第一个问题：安装配置eslint；
第二个问题：还在每次写完代码以后，点击鼠标（或者使用快捷键）格式化文档让代码保持整齐？还在因为装了eslint后经常报出eslint校检语法错误而犯愁？——以至于装后又卸载eslint。这篇文章让你不再为语法校对烦恼，让你编程快到飞起。
# 1、安装
（1）vue项目中安装eslint插件
当你构建一个新的项目的时候，就以构建一个新的vue项目来说，默认把eslint安装就好。
如果项目中没有安装，那就只能手动安装了撒。传送门：eslint官网
$ npm install eslint --save-dev
1
# 2、配置eslint
- 然后在eslintc.js中可以配置你的规则，在我们脚手架初始化
panda-mall项目的时候，这些东西都已经做好了；你可以根据自己的喜好自己去配置rules.
module.exports = {
root: true,
env: {
node: true
},
extends: [
'plugin:vue/essential',
'@vue/standard'
],
parserOptions: {
parser: 'babel-eslint'
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
"space-before-function-paren": 0,
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
- 在.eslintignore中可以设置你要忽略的文件：
build/*.js
src/assets
public
dist
1
2
3
4
2
3
4
# 3、vscode中eslint扩展安装
我用的是vscode，如果你是用的其他工具自行google，反正原理都一样。
配置一下，进入到
setting.json文件中，添加一下代码：
"files.autoSave": "off",
"eslint.validate": [
"javascript",
"javascriptreact",
"vue-html",
{
"language": "vue",
"autoFix": true
}
],
"eslint.run": "onSave",
"eslint.autoFixOnSave": true,
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
- 很多人配置不成功大部分都是添加代码方式不对，特意上一份我的配置文件截图：
# 4、结语
- 当你完成了如上所有的配置以后，当你
command+s（ctrl+s）点击保存的时候，eslint就会帮你自动格式化以符合.eslintrc.js文件中的规则，让你编程快到飞起，不用再为了修复eslint报错的冲突而烦恼。
- 你可以编辑自己的eslint规则或者直接拿别人的用：如饿了么团队的config，vue的config。