vscode 根据 ESLint 规范自动格式化代码

在项目根目录新建一个名为 .vscode 文件夹，在该文件夹中新建 settings.json 配置文件，具体配置如下：

{
  "eslint.validate": [
    "javascript",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true,
      "source.organizeImports": true
  },
  "eslint.format.enable": true,
  "editor.defaultFormatter": "dbaeumer.vscode-eslint",
  "eslint.validate": [
      "javascript",
      "javascriptreact",
      "typescript",
      "typescriptreact"
  ],
  "editor.codeActionsOnSave": {
      "source.fixAll": true,
      "source.fixAll.eslint": true
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

配置完成后，在编辑器中直接保存代码就可以实现代码格式化，或者是按钮 shift + alt + F 格式化代码快捷键。

如果vscode本地配置不需要上传到代码库，还需要在项目根目录的 .gitignore 文件中添加上 .vscode