EsLint在webpack中的配置

什么是EsLint?

• 在团队开发过程中，我们经常会遇到这样一种情况，比如一个语句后边，有的人会加分号;有的人认为不加分号也可以；

• 在一个团队里，如果编程风格不能得到统一的话，有的文件是这样写的，有的是那样写的，团队代码维护上，就会很麻烦，这个时候我们就需要引入一些规范来约束我们的代码

• EsLint就是这样一种约束规范代码的工具

使用步骤

1. 安装 npm install eslint --save-dev (我用的是5.12.0版本)

2. 安装好后还不行，还需要做一个配置文件，这个配置文件可以通过命令快速生成 npx eslint --init,运行这个命令后，会问我们要怎么去配置我们的eslint呢？非常智能啊。。。；里边有3个选择，第一个的意思是，用一种比较流行的规范；第二个选择的意思是，你问我答的形式来一步异步做配置；第三个的意思是，自己已经有了JS文件去自动的做配置；
   

   image.png

3. 在这里我们使用业界比较通用的方案，选择第一项。然后我们会看到有3种不同的模板。分别是Aribnb公司的前端规范，标准的前端规范，谷歌的前端规范。我们选择Aribnb公司的前端规范
   

   image.png

4. 然后会问我们，是否使用React，我这个例子是用React写的，所以选是

   
   
   image.png

5. 然后会问，您希望配置文件采用什么格式，我们选JavaScript

   
   
   image.png

6. 然后提示我，airbnb需要更高版本的eslint,问是否要升级，选升级
   

   image.png

7. 然后会问当，当使用这个模板的时候，会有一些依赖需要安装，是否现在安装？选是

   
   
   image.png

8. 安装好以后，我们的项目目录里，就会多一个.eslintrc.js文件；里边内容的意思就是，整个工程下边要使用eslint对代码进行规范，用的哪个规范呢，就是aribnb公司的规范
   

   image.png

安装好了以后，该怎么使用呢？ 不需要webpack的情况下，有两种方式，简单的和复杂的

复杂的使用方式--- 命令行通过输入命令npx eslint xxxx，然后在命令行提示

1. 假如我们现在，相对src目录下的代码做代码检测，看下整个文件夹里的代码是否符合aribnb公司的前端规范；我们可以运行 npx eslint src;整个命令的意思是，通过eslint这个工具，帮我们检测src目录下的代码
2. 然后会有很多提示
   
   image.png
   
   3.我们再Eslint里的一个parser(解析器),我们可以到Eslint官网，找到Configuring
   
   image.png
3. 然后找到parser，官网默认使用的是一个expree的解析器，我们可以给parser配置一个目前用的比较多的解析器babel-eslint,我们先安装一下npm install babel-eslint --save-dev,安装好后，配置一下
   
   image.png
4. 然后保存重新运行一下npx eslint src，然后我们可以看到，哪个文件里，第几行，第几列有问题；1:42的意思是第一行第42列,然后针对具体的问题再去解决
   
   image.png

简单的方式---编辑器安装ESLint插件，直接在代码里提示

1. 当然，这么多的问题。我们不可能一个一个看，一个一个去配置解决。我们可以通过在编辑器(我的是VSCode)，安装一个插件来解决，这个插件就是ESLint
   
   image.png
   
   2.安装好之后，我们再重新打开文件夹，我们可以看到，编辑器已经自动的把写的不规范的代码给标红了。
   
   image.png
   
   3.然后我们可以把鼠标放在标红的代码上看到具体是什么问题，该怎么解决
   
   image.png
2. 因为Aribnb公司的前端规范比较严格，有的时候，我们不想遵循它的某项规则，那我们可以自己重新配置一下某些规则，去覆盖它的一些原有的规则。
   
   image.png
   
   
   image.png

3.规则被覆盖掉以后，我们可以看到，这一行原来的报错(Component should be written as a pure function组件应该作为纯函数编写)不见了。

image.png

4. 继续往下看，会看到提示我们Expected indentation of 2 spaces but found 1 tab (应缩进2个空格，但找到1个制表符)，我们可以把缩进改为2个空格，而不是原来的一个tab缩进
   
   image.png
5. 下边还有提示 JSX not allowed in files with extension '.js(扩展名为“.js”的文件中不允许使用JSX),这个要求，我们不想遵循，也可以修改一下
   
   image.png
   
   
   image.png
6. 还有一些其他的提示，比如jsx语法来说，path属性要加双引号；还有就是return 的结果后要加一个分号，这些都是aribnb公司的前端规范，这就是修改后的
   
   image.png
   
   7.最后我们还发现，有一个document报错，document实际上是一个全部变量，如果直接使用了全部变量，也会告诉我们这样不对，我还需要配置一下
   
   image.png
   
   
   image.png
   
   
   image.png
   
   8.然后，我们可以看下list.js,发现里边也有报错，是关于换行符的，原因是因为在各操作系统下，文本文件所使用的换行符是不一样的。UNIX/Linux 使用的是 0x0A（LF），早期的 Mac OS 使用的是0x0D（CR），后来的 OS X 在更换内核后与 UNIX 保持一致了。但 DOS/Windows 一直使用 0x0D0A（CRLF）作为换行符。,我们可以重写linebreak-style规则，来强制执行统一的行结尾，而不受操作系统或整个代码库中使用的编辑器的影响
   
   image.png
   
   
   image.png
   
   
   image.png

这里会遇到一个问题，假设团队另外一个人，也是用的vscode编辑器，但是他的编辑器，并没有安装ESLint插件(或者安装不了)，他写的代码也就没有提示哪里不符合规范，他也就无从知道自己写的代码是否规范，所以这种单纯靠浏览器插件来确保团队代码开发质量的方法是不靠谱的，谁能保证团队每个小伙伴都安装了插件呢？至于另外一种命令行方法，比较麻烦，就不说了

这个时候，我们可以在webpack中把eslint结合进去，从而让团队所有伙伴即使编辑器没有装插件，也可以看到代码中不符合规范的地方;步骤如下：

1. 我们需要安装一个eslint-loader ,命令是npm install eslint-loader --save-dev
2. 安装好以后，我们要配置，一般情况下，我们会对JS文件进行检测，所以我们需要修改我们的webpack.config.js配置
   
   image.png
   
   
   image.png
3. 配置好以后，启动服务器npm run start,我们可以看到，它会帮我们执行一下eslint-loader，并且在终端告诉我们home.js里的代码是有问题的。
   
   image.png
4. 如果我们还是在命令行里看提示，那么跟刚才我们直接通过npx eslint src这种方法也没有区别了，也不是很直观 ，这个时候，我们可以在webpack.config.js里的devServer里配置一个overlay参数
   
   image.png
5. 这个配置好以后。当我们去运行webpack-dev-server去做打包的时候，一旦过程中出现代码规范问题，它会在浏览器上谈一个提示层，现在我们重新运行npm run start
   
   image.png
6. 通过上图我们可以很直观的看到哪里出了问题，当我们解决一个问题，提示就会少一个；所以，即便我们的编辑器没有eslint插件，但是借助webpack里eslint-loader的配置，我们还是可以快速定位代码里，关于代码规范的问题。方便我们快速解决问题。

实际上vue的脚手架工具里，当我们代码写的不规范的时候，也会给我们一些eslint的提示；这种提示做起来非常简单，只要在工程目录下，安装eslint，然后再安装eslint-loader，然后在webpack.config.js里的derServer配置一个overlay,再去module里配置一个eslint-loader就可以实现在页面上提示代码不规范的功能了

eslint-loader还有很多其他的配置，这些配置，我们可以通过webpack官网loader里查看

1.比如fix配置,下边这配置的意思是，在eslint做检测时候，如果代码里有一些浅显的错误，很容易发现的问题，它会自动帮我们把代码修复掉的

image.png

2. catch参数，可以降低eslint对打包过程性能的损耗，因为我们配置了eslint-loader，每次打包的时候。对JS文件都会去分析是否符合规范，这会降低打包速度。所以配置这个参数后。会稍微提升我们打包的速度
   
   image.png

真正的项目中，做webpack配置的时候的最佳实践

• 在真是的项目里，一般不建议使用eslint-loader，因为用了它，不可避免的就会降低打包速度；那要怎么做呢？
  写代码的时候，随便写，当要把代码提交到git仓库的时候，git里有一些钩子，在git提交代码的时候，对代码进行eslint的检测。在这个钩子里，通过命令行去运行eslint src,如果代码不符合规范，会在命令行禁止我们把代码提交到git仓库里，当我们看到命令行提示的错误，再去改对应的问题。如果所有的问题都解决了，才可以把代码提交到git仓库里
• 但是这种做法，就没有办法实现图形交互式的eslint的提示(也就是页面上的提示)，这种方式不够便捷

所以，具体要怎么做，还是要看实际情况，如果很影响打包速度，那么我们就要牺牲一些便捷性。