其实VSCode代码配置很简单,可以通过控制面板文件→首选项→设置直接配置,这个面板上面是所有可以去配置的东西,但是东西太多了,看上去就太杂了,会给人一种无从下手的感觉,其实我们需要的配置一般只有几个,而且很多都是通过格式化插件去完成的,只需要指定使用的插件就行了,下面就是这种方式。
安装插件
安装下面图中的插件,建议全部安装
VSCode配置
setting.json 配置后所有项目都生效
文件→首选项→设置:打开setting.json文件
请根据自己的需求自行选择配置
{
"workbench.colorTheme": "Visual Studio Dark",
"editor.tabSize": 2,
// 配置eslint自动格式化代码
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
// vue使用prettier格式化
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// css使用prettier格式化
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// json使用prettier格式化
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// js使用prettier格式化
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// html使用prettier格式化
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// markdown使用markdown-all-in-one格式化,需要安装markdown-all-in-one
"[markdown]": {
"editor.defaultFormatter": "yzhang.markdown-all-in-one"
},
// 无尾随逗号
"prettier.trailingComma": "none",
// 统⼀使⽤单引号(‘),不使⽤双引号(“)
"prettier.singleQuote": true,
// 在每行末尾加分号
"prettier.semi": true,
// 缩进
"prettier.tabWidth": 2,
// 保存时在文件最后插入一个空行
"files.insertFinalNewline": true,
}
.prettierrc 配置后当前项目生效
项目内生效,使用上面的配置就可以了,这个地方只是说明以下这个功能,.prettierrc文件配置的优先级最高。
在项目根目录下创建名为.prettierrc的文件,将以下代码拷贝进去。
{
"semi": true, // 在每行末尾加分号
"singleQuote": true, // 统⼀使⽤单引号(‘),不使⽤双引号(“)
"tabWidth": 2, // 缩进
"trailingComma": "none" // 无尾随逗号
}
如有JSON报错,参考这个解决blog.csdn.net/m0_59850169…