ESLint配置方法

一、概述

ESLint的目标是提供一个插件化的JavaScript代码检测工具。代码检查是一种静态的分析，常用于寻找有问题的模式或者代码，并且不依赖于具体的编码风格。JavaScript是一个动态的弱类型语言，在开发过程中比较容易出错。因为没有编译程序，为了寻找JavaScript代码错误通常需要在执行过程中不断调试。ESLint可以让程序员在编码的过程中发现问题。

ESLint 的初衷是为了让程序员可以创建自己的检测规则。ESLint 的所有规则都被设计成可插入的。ESLint 的默认规则与其他的插件并没有什么区别，规则本身和测试可以依赖于同样的模式。为了便于人们使用，ESLint 内置了一些规则，也可以在使用过程中自定义规则。

ESLint 使用 Node.js 编写，这样既可以有一个快速的运行环境的同时也便于安装。

 

二、使用方法

（一）安装并初始化ESLint

在项目package.json的同级目录下执行以下命令。

npm i -D eslint
npx eslint --init

初始化过程中会问一些问题，按项目的需要选择后完成配置，在package.json同级目录下生成配置文件.eslintrc.js。

生成的.eslintrc.js文件中已经带了推荐的eslint配置了，规则是https://eslint.bootcss.com/docs/rules/中带√的检查项。如果不配置规则，默认所有检查项是关闭的。

 

（二）使用ESLint执行静态检查

在使用create-react-app创建的React项目下，对App.js执行静态检查：

npx eslint ./src/App.js

检查结果提示在使用JSX语法的代码中未引入React：

修改后再次执行命令不报错了。

如果要对所有js和jsx文件进行检查，使用命令：

npx eslint src/**/*.{js,jsx}

对于一些错误，eslint命令是可以自动修复的，比如字符串要求用单引号的错误：

提示有22个错误是可以用--fix参数来修复的，使用命令：

npx eslint src/**/*.{js,jsx} --fix

可以自动把双引号替换为单引号。但是向上面那种React未引入的问题是没法通过--fix来修复的，只能手动修复。

 

（三）添加自定义规则

在自动生成的.eslintrc.js文件中，有个rules字段可以用来配置自定义的检查规则：

以quotes的规则设置为例：https://eslint.bootcss.com/docs/rules/quotes，上图的规则是要求字符串必须使用单引号，否则会提示error级别的错误。自定义规则会覆盖extends字段中定义的规则集。

 

（四）添加外部规则

如果不想自己配置规则，或者除了推荐的eslint规则之外还有别的外部规则集想要使用，可以在extends字段中添加外部eslint规则集，下面以google的eslint规则为例。

google eslint：https://github.com/google/eslint-config-google

按github链接上的指引，安装eslint-config-google后在extends字段中配置即可。

新加的检查项多检查出了一个问题：

 

三、其他

在eslint检查过程中一直在报这个warning：

Warning: React version not specified in eslint-plugin-react settings. See https://github.com/yannickcr/eslint-plugin-react#configuration .

按链接的要求把settings的配置在.eslintrc.js中配置上即可。

 

四、参考资料

ESLint中文文档：https://eslint.bootcss.com/