配置VSCode的代码格式化

7,434 阅读1分钟

其实VSCode代码配置很简单,可以通过控制面板文件→首选项→设置直接配置,这个面板上面是所有可以去配置的东西,但是东西太多了,看上去就太杂了,会给人一种无从下手的感觉,其实我们需要的配置一般只有几个,而且很多都是通过格式化插件去完成的,只需要指定使用的插件就行了,下面就是这种方式。

安装插件

安装下面图中的插件,建议全部安装

image.png

VSCode配置

setting.json 配置后所有项目都生效

文件→首选项→设置:打开setting.json文件

image.png

请根据自己的需求自行选择配置

{
  "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…