格式检查工具eslint

eslint是什么？

eslint是一个用于报告语法格式是否符合规范的工具，目的是为了提高代码的可读性和可维护性，它的原理是用AST去评估代码格式。特性是具有高可扩展性(可以自行添加规则)、完全可插入性(关于eslint的规则可以应用在多个地方)。

1. 例如执行npm install eslint命令安装后，package.json下的devDependencies下会有eslint
   
2. 在vscode中的扩展商店里会有eslint插件
   
3. 对于gitlab的远端格式校验，则是运用gitlab ci runner里的eslint校验

那么package.json下的eslint、vscode里的eslint和ci runner里的eslint有什么区别？

首先，package.json里面的eslint仅适用于该package.json所属项目，这种方式应用于只是想局部引用eslint校验的情况(即仅仅是想在单个项目中引用格式校验)。

其次来看vscode里的eslint和ci runner里的eslint！

项目的代码规范校验通常由两部分构成：

1. 基于git 钩子的校验
2. webpack中的eslint-loader校验器

用户安装了对应依赖，启动项目会触发webpack中的校验器，提交代码会触发git 钩子中设置的校验器，在此时，提交至远端的代码格式一般是安全的。代码格式能够满足校验规则的条件是安装了相应依赖后启动项目或执行提交操作，因此也会有无法触发校验器的盲区。具体分为以下两种情况：

1. 不安装包（不下载node_modules）的情况
   这种情况下webpack和eslint依赖不存在，对应的两个校验器本身也就不存在。从而使得推向远端的代码可能存在代码格式错误问题，为了防止这样的问题，需要gitlab中ci runner里的eslint开启远端的eslint校验。

2. 安装了包，但是不启动不提交的情况
   这种情况下eslint和webpack依赖安装了，项目没有启动，因此eslint-loader不触发校验。没有进行提交，因此不触发git钩子，没有触发eslint校验器。为了在本地也能够知道代码是否符合eslint规范，需要使用vscode里的eslint plugin，这个插件基于AST提供了本地校验的方法，安装完这个插件以后，会自动检测项目中js和jsx文件是否有不符合eslint规范的代码。
   这时可以执行一些命令，例如按照.eslintrc.js(这个文件是在安装完插件后自动生成的，默认有一套规则，后续可以在这基础上添加自己的规则)配置规则自动改正demo.js中出现的不符合eslint规范的代码：eslint demo.js --fix

   在vscode想要更方便的、不使用命令就能做到自动修复以及对多种文件的检测，需要在vscode首选项中的设置进行配置，每次保存文件的时候就可以根据.eslintrc.js配置规则来对多种类型的文件进行格式校验以及做一些简单的修复。

vscode里eslint plugin的自动化检测和简单的修复该怎么配置?

1. 打开vscode里的设置
   

2. 点开json形式下的设置
   

3. 以下是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) 更多配置点这里