eslint是什么？
eslint是一个用于报告语法格式是否符合规范的工具，目的是为了提高代码的可读性和可维护性，它的原理是用AST语法树去评估代码格式。特性是具有高可扩展性(可以自行添加规则)、完全可插入性(关于eslint的规则可以应用在多个地方)。
- 例如执行
npm install eslint命令安装后，package.json下的devDependencies下会有eslint
- 在vscode中的扩展商店里会有eslint插件
- 对于gitlab的远端格式校验，则是运用gitlab ci runner里的eslint校验
那么package.json下的eslint、vscode里的eslint和ci runner里的eslint有什么区别？
首先，package.json里面的eslint仅适用于该package.json所属项目，这种方式应用于只是想局部引用eslint校验的情况(即仅仅是想在单个项目中引用格式校验)。
其次来看vscode里的eslint和ci runner里的eslint！
项目的代码校验通常由两部分构成：
- 基于git 钩子的校验
- webpack中的eslint-loader校验器
用户安装了对应依赖，启动项目会触发webpack中的校验器，提交代码会触发git 钩子中设置的校验器，在此时，提交至远端的代码格式一般是安全的。代码格式能够满足校验规则的条件是安装了相应依赖、启动项目并执行提交操作，因此也会有无法触发校验器的盲区。具体分为以下两种情况：
-
不安装包（不下载node_modules）的情况
这种情况下webpack和eslint依赖不存在，对应的两个校验器本身也就不存在。从而使得推向远端的代码可能存在代码格式错误问题，为了防止这样的问题，需要gitlab中ci runner里的eslint开启远端的eslint校验。 -
安装了包，但是不启动不提交的情况
这种情况下eslint和webpack依赖安装了，项目没有启动，因此eslint-loader不触发校验，没有进行提交，因此不触发git钩子，没有触发eslint校验器。为了在本地也能够知道代码格式是否有误，需要使用vscode里的eslint plugin，这个插件基于AST词法解析提供了本地校验的方法，安装完这个插件以后，会自动检测项目中js和jsx文件是否有不符合eslint规范的代码。
这时可以执行一些命令，例如按照.eslintrc.js配置规则自动改正demo.js中出现的不符合eslint规范的代码：eslint demo.js --fix在vscode想要更方便的、不使用命令就能做到自动修复以及对多种文件的检测，需要在vscode首选项中的设置进行配置，每次保存文件的时候就可以根据.eslintrc.js配置规则来对多种类型的文件进行格式校验以及做一些简单的修复。
vscode里eslint plugin的自动化检测和简单的修复该怎么配置?
-
打开vscode里的设置
-
点开json形式下的设置
-
以下是eslint一些配置方式(在原有配置后面添加)：
(1) 一组语言标识符，指定要对其进行验证的文件，默认只有"javascript", "javascriptreact"两项，即仅对js与jsx文件进行eslint校验，如果想要对更多的文件进行eslint校验，需要手动配置，我的项目运用到了ts，tsx和vue类型文件，以下是我的配置，后面追加了ts，tsx和vue文件：
"eslint.validate": [ "javascript", "javascriptreact", "typescript", "typescriptreact", "vue", ],(2) 下面的设置为包括 ESLint 在内的所有提供程序打开自动修复：
"editor.codeActionsOnSave": { "source.fixAll.eslint": true },(3) 更多配置点这里
