使用VSCode开发Vue CLI 3.0项目时配置ESLint进行代码检测以及自动格式化

ESLint是一款代码检测工具,它可以规范代码,保证代码的语法正确以及风格统一,当使用Vue CLI 3.0创建项目时,默认提供了三种ESLint配置

eslint

我选择的是Standard Config,下面介绍的也是针对该配置。

使用VSCode打开创建的项目,找到main.js文件,找到一处单引号并将其修改为双引号,然后运行命令npm run serve,会发现如下图所示:

error

上图中可以看到启动时出现了错误,必须使用单引号,这时候只要把双引号改成单引号便可成功启动。如果每次都使用修改肯定很麻烦,所有我们要配置VSCode在保存的时候自动按照ESLint规范格式化代码。

首先,VSCode需要安装两个插件ESLintPrettier - Code formatter,然后打开VSCode的配置,把以下配置复制过去,你可以放到用户设置,也可以放到工作区设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
"editor.formatOnPaste": true,
"editor.formatOnSave": true,
"editor.formatOnType": true,
"prettier.singleQuote": true,
"prettier.semi": false,
"eslint.autoFixOnSave": true,
"vetur.format.defaultFormatter.js": "vscode-typescript",
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
]
}

以上配置保存后即可正常格式化,需要注意的是,Standard Config要求JavaScript的函数名与后面的括号之间要有一个空格,在VSCode中需要同时配置下面两个属性才能实现

1
2
"vetur.format.defaultFormatter.js": "vscode-typescript",
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,