如何在VSCode中设置setting.json的自定义配置
最编程
2024-08-01 14:34:07
...
setting. json是什么:相当于是你对vscode的一些定制化内容。就比如可能编译器默认的是4个空格为一个tab,但是你可以设置为2个空格为一个tab
对vscode有什么用:当你把这个文件放到安装目录下之后,vscode就会自动识别这个文件。这个就可以让你快速把一个全新的vscode设置成自己之前已经设置过的样子。
vue项目中新建一个.vscode文件夹,
文件夹里增加一个settings.json文件,内容如下
{
"typescript.preferences.quoteStyle": "single",
"javascript.preferences.quoteStyle": "single",
// tab 大小为2个空格
"editor.tabSize": 2,
// 保存时格式化
"editor.formatOnSave": false,
// 编辑器换行
"editor.wordWrap": "off",
// //让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// 开启 vscode 文件路径导航
"breadcrumbs.enabled": true,
// 选择 vue 文件中 template 的格式化工具
"vetur.format.defaultFormatter.html": "js-beautify-html",
// 让vue中的js按编辑器自带的ts格式进行格式化
"vetur.format.defaultFormatter.js": "vscode-typescript",
// vetur 的自定义设置
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_line_length": 120,
"wrap_attributes": "auto",//"force-aligned" //属性强制折行对齐
"end_with_newline": false
},
"prettier": {
"singleQuote": true,
"semi": false,
"printWidth": 100,
"wrapAttributes": false,
"sortAttributes": false,
"trailingComma": "none",
}
}
}
如果vue文件中的方法名之前没有添加空格,eslint就会检查出错,页面部分也会出现一个红色的波浪线,如下图
此时,用快捷键ctrl+shift+k即可自动在show方法与()之间添加一个空格
但是:vscode必须已将安装了插件ESLint、Vetur才会有作用
vscode工具里的设置:
可以看到设置内容有“用户User”“工作区Workspace”两个分支,它们其实就分别对应了两个不同位置的settings.json文件,
User位于与用户相关联的特定文件夹中,
Workspace位于你当前打开的文件夹的.vscode子目录下。
这两个settings.json文件其实都只会包含你修改过的设置项,默认的配置项不会显示,而软件的全局默认设置则记录在软件安装目录中的某个位置,用户是不必理会的。
上面两张图表示:在settings的Workspace里设置Tab Size设置为2,对应的.vscode/settings.json里自动添加了一行配置"editor.tabSize": 2,
但是如果Tab Size设置的是4,因为4是默认设置,所以并不会在.vscode/settings.json添加一行"editor.tabSize": 4,的配置
这表明工作区Workspace的配置作用域于你当前打开的文件夹的.vscode子目录下即.vscode/settings.json
优先级:工作区>用户>全局默认,前面的配置覆盖后面的,这样做的好处是你可以为不同工作区、不同用户做不同配置,而不会互相干扰
如果你有好几个项目,不同的项目需要不同的配置,这样你就可以在每一个项目根路径添加一个 .vscode/setting.json 文件来保存对当前工作区的配置。默认打开的设置界面配置的是全局设置,对每个工作区都会起作用,不过工作区的配置会覆盖全局配置,优先级更高。
上一篇: 如何轻松设置VSCode编辑器
推荐阅读
-
CentOS 7安装ipvsadm和Nginx,并进行基本配置与测试 下面是重写后的段落: 1. 关闭防火墙 2. 在浏览器中输入服务器IP地址并访问 3. 修改网页内容以区分不同的服务器 4. 配置lvs/nat,使用自定义的脚本 5. 检查ipvsadm设置的规则 6. 关闭防火墙 7. 测试LVS效果。
-
如何在Maven中设置Tomcat 9支持的IDEA插件配置方法
-
简单聊聊如何在Maven中配置单元测试的代理设置
-
Intellij IDEA 插件开发入门详解 - 如何添加 Application 和 Project Component,并创建 Action? 在本文中,我们将详细介绍如何在 IntelliJ IDEA 中添加 Application 和 Project Component,并且通过这些组件来创建一个简单的 Action。 首先,我们将在 src 目录上使用 Alt+Insert 快捷键打开 New 对话框,然后从中选择 Application Component 并输入名称如 MyComponent。接下来,我们在 MyComponent 类中添加一个 sayHello 方法并编写相关逻辑。 然后,我们需要为我们的插件添加一个 Action,使用户可以通过菜单或其它方式访问它。为此,我们将创建一个新的类 SayHelloAction 继承自 AnAction 类,并在 actionPerformed 方法中获取 Application 和 MyComponent 对象,最后调用 MyComponent 的 sayHello 方法。 最后,我们需要为我们的插件配置相关的文件以确保它可以正常运行。在本文中,我们将详细介绍如何进行这些配置。
-
如何在VScode中设置多台SSH服务器的无密码登录?
-
如何在VSCode中记录和管理自定义设置教程
-
如何在VSCode中设置setting.json的自定义配置
-
如何在VsCode中设置C/C++的编译环境
-
如何在VSCode中设置:轻松通过双击选择带连字符的文本
-
如何在VScode中设置Java开发环境:JDK 17的详细教程