eslint它规范的是代码偏向语法层面上的风格。本篇文章以一个基本的vue3项目，来说明vscode + eslint 配置项目代码规范，为了更好的描述本文，我恢复了vscode的默认设置（即未安装eslint插件，setting中也没有相关配置）
1、新建vue3.0脚手架项目
vue create eslint-test
2、项目安装eslint
npm install eslint --save-dev
3、运行以下命令，生成.eslintrc.js
npx eslint --init
.eslintrc.js文件
module.exports = { "env": { "browser": true, "es2021": true, "node": true }, "extends": [ http://eslint.cn/docs/rules/ "plugin:vue/recommended", // 此项是用来配置vue.js风格 "eslint:recommended" //继承Eslint中推荐的（打钩的）规则项 ], "parserOptions": { "ecmaVersion": 13, "sourceType": "module" }, "plugins": [ "vue" ], "rules": { } };
4、查看这个推荐的默认规则
这里的规则，写在后面的会覆盖前面的，并且rules中的规则最后会覆盖这里的，所以我们自定义规则就是写在rules中，才能覆盖之前的规则，从而生效。
"extends": [ "plugin:vue/recommended", // 此项是用来配置vue.js风格 "eslint:recommended" //继承Eslint中推荐的（打钩的）规则项 ],
这个默认规则是怎么生效的呢？举个例子，我们点进去链接，可以看到这个no-debugger是打上了对勾（也就是"eslint:recommended"）中生效的规则，然后我们再在项目中写个debugger，然后命令行运行检查eslint的命令，就会报错了。
打了勾表示属于recommended采用的规则
有个扳手则表示可自动修复不需手动修复
5、自定义规则
Eslint附带了大量的校验规则，这些规则的值分别有如下规律：
off | 0 :表示关闭规则。
warn | 1 :表示将该规则转换为警告。
error | 2 :表示将该规则转换为错
常见的rules规则：
"semi": [2, "always"], // 语句强制分号结尾 "quotes": [2, "double"], // 引号类型 "" "no-alert": 0, // 禁止使用alert "no-console": 2, // 禁止使用console "no-const-assign": 2, // 禁止修改const声明的变量 "no-debugger": 2, // 禁止使用debugger "no-duplicate-case": 2, // switch中的case标签不能重复 "no-extra-semi": 2, // 禁止多余的冒号 "no-multi-spaces": 1, // 不能用多余的空格
定义好规则后，怎会出现对应的校验报错
6、package.json中配置检查命令行
上文中，我们是手动输入命令行来检查代码是否符合eslint规范的，这样每次检查都要输入一遍，有的人要是记不住这命令怎么办？于是可以在package.json的script中写死这个脚本：
"lint": "eslint --ext .js --ext .jsx --ext .vue src/",
于是，项目根目录运行npm run lint，实际上就是运行：
npx eslint --ext .js --ext .jsx --ext .vue src/
7、eslint插件自动检查规范
为避免每次校验都需要输入命令的问题，可以通过vscode提供的插件实现保存时自动校验
在vscode插件市场搜索Eslint安装且重启即可
8、package.json中配置自动修复命令行
eslint校验后会通过红色波浪线和控制台提示不符合规则的代码，需要使用命令行进行自动修复，注意有（扳手）🔧的图标对应的规则才是可以修复的
在package.json中添加
"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"
在根目录执行这个npm run lint-fix，则会自动修复，某些规则需要手动修复
9、在vscode中配置setting,让每次保存代码时自动修复
通过配置setting.json实现保存的时候自动校验和修复，而不需要像上一步那样需要输入命令行现在利用vscode的eslint插件我们已经能一写完代码，就知道是否符合规范了。然而我们还想实现的是每次写完代码，按下ctrl+s保存时，它能够自动修复
在vscode中按快捷键ctrl+shift+p，输入setting,打开setting.json
增加这段配置即可（如果未生效重启vscode）：
// 配置保存时按照eslint文件的规则来处理一下代码
"editor.codeActionsOnSave": { "source.fixAll": true, "eslint.autoFixOnSave" : true, }
10、配置.eslintignore
有些文件，我们不希望它受eslint管辖，可以在根目录新建.eslintignore文件，把想要自由的文件或目录丢进去即可：
.eslintrc.js .prettierrc.js babel.config.js vetur.config.js /node_modules/
11、总结
1.为什么要使用eslint
- 因为每个人的代码习惯不一样，每个开发人员都需要和他人协作或者项目需要交接给下一代开发者
- 保持统一的代码规范，可以极大地提高效率，降低沟通和理解代码的成本。
2.既然已经有vscode的eslint插件帮助我们自动检查和修复代码了，为什么还需要在pakage.json中配置eslint命令行
因为vscode是我们自己电脑上的编辑器，我们不能保证另一个人拿到我们的代码时他也是用vscode的（也许他用记事本？）。
就算他用vscode,我们也不能保证他安装了eslint插件。
eslint命令行可以使用pakage.json的命令行来检查和修复代码。因为项目中肯定需要安装eslint依赖，也肯定有我们配置的.eslintrc.js规则文件，这样依旧能保证代码的统一规范。
