VSCode Vue,HTML,JS按ESLint规则格式化和保存


本文只讨论如何在vscode 中自动格式化和保存前自动格式化遵循eslint，不包含eslint 的使用以及规则配置。

前置条件

一、 保证项目中已按照eslint插件并添加 .eslintrc.js文件
二、 添加插件 ESLint

image.png

配置环境

打开vscode 配置 文件 > 首选项 > 配置 （也可以ctrl+ ,） 搜索eslint ，打开配置文件


image.png

新/旧版vscode可能有所出入，在setting.json中根节点下添加如下配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
   "[javascript]": {
        "editor.defaultFormatter": "dbaeumer.vscode-eslint"
    },
    "[html]": {
        "editor.defaultFormatter": "dbaeumer.vscode-eslint"
    },
    "[vue]": {
        "editor.defaultFormatter": "dbaeumer.vscode-eslint"
    },
    "eslint.codeAction.showDocumentation": {
        "enable": true
    },
    // 每次保存时将代码按eslint格式进行保存
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    // 添加文件扩展名支持
    "eslint.validate": [
        "javascript",
        "vue",
        "html",
        ".js"
    ],
    "eslint.format.enable": true,

如果您安装了 JS-CSS-HTML Formatter请禁用或卸载，否则会和eslint插件发生冲突。

image.png

禁用或卸载后需要重启vscode