本博客日IP超过2000，PV 3000 左右，急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序
腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云
百度了一下，发现关于ESLint的文章不是很多。而有的人已经使用很久了，希望通过本文在给大家普及一下eslint的相关知识。
ESLint是什么？
ESLint是一个QA工具，用来避免低级错误和统一代码的风格。
ESLint被设计为完全可配置的，主要有两种方式来配置ESLint：
- 在注释中配置：使用JavaScript注释直接把配置嵌入到JS文件中。
- 配置文件：使用下面任一的文件来为全部的目录和它的子目录指定配置信息。
下面这些文件的优先级则是按照以上出现的顺序（.eslintrc.js > .eslintrc.yaml > .eslintrc.yml > .eslintrc.json > .eslintrc > package.json）。
- javascript：使用.eslintrc.js文件并导出一个包含配置的对象。
- YAML：.eslintrc.yaml或者.eslintrc.yml
- JSON：.eslintrc.json，并且此文件允许使用JS形式的注释
- 废弃的用法：.eslintrc，此文件可以是JSON或者YAML
- package.json：在package.json文件中创建eslintConfig属性，所有的配置包含在此属性中。
可以被配置的信息主要分为3类：
- Environments：你的 javascript 脚步将要运行在什么环境（如：nodejs，browser，commonjs等）中。
- Globals：执行代码时脚步需要访问的额外全局变量。
- Rules：开启某些规则，也可以设置规则的等级。
ESLint安装
npm install -g eslint
如果你的项目还没有配置文件的话，可以通过指定–init参数来生成一个新的配置文件：
eslint --init
然后，配合命令行的eslint工具就可以检查代码了。
eslint [options] file.js [file.js] [dir]
当然，也可以安装在项目中，然后配合编辑器的插件（如vscode-eslint）来使用。
指定全局变量
可以在配置文件或注释中指定额外的全局变量，false表明变量只读：
注释：
/* global var1, var2 */ /* global var1:false, var2:false */
JSON：
{
"globals": {
"var1": true,
"var2": false
}
}
在配置文件中可以设置一些规则。
规则的错误等级有三种：
- "off" 或者 0：关闭规则。
- "warn" 或者 1：打开规则，并且作为一个警告（不影响exit code）。
- "error" 或者 2：打开规则，并且作为一个错误（exit code将会是1）。
/* eslint eqeqeq: "off", curly: "error" */ /* eslint eqeqeq: 0, curly: 2 */
也可以在注释中关闭所有或者某个规则：
/* eslint-disable */ /* eslint-enable */ /* eslint-disable no-alert, no-console */ /* eslint-enable no-alert, no-console */
具体的规则可以在官网上找到，或者使用别人写好的配置，例如eslint-config-airbnb。
下面可以下载demo，进入练习部分。
学习操作步骤
进入demos/eslint-demo目录，安装 ESLint。
$ cd demos/eslint-demo $ npm install eslint --save-dev
通常，我们会使用别人已经写好的代码检查规则，这里使用的是 Airbnb 公司的规则。所以，还要安装 ESLint 这个规则模块。
$ npm install eslint-plugin-import eslint-config-airbnb-base --save-dev
上面代码中，eslint-plugin-import是运行这个规则集必须的，所以也要一起安装。
ESLint 的配置文件是.eslintrc.json，放置在项目的根目录下面。新建这个文件，在里面指定使用 Airbnb 的规则。
{
"extends": "airbnb-base"
}
4、打开项目的package.json，在scripts字段里面添加三个脚本。
{
// ...
"scripts" : {
"test": "echo \"Error: no test specified\" && exit 1",
"lint": "eslint **/*.js",
"lint-html": "eslint **/*.js -f html -o ./reports/lint-results.html",
"lint-fix": "eslint --fix **/*.js"
},
// ...
}
除了原有的test脚本，上面代码新定义了三个脚本，它们的作用如下。
- lint：检查所有js文件的代码
- lint-html：将检查结果写入一个网页文件./reports/lint-results.html
- lint-fix：自动修正某些不规范的代码
5、运行静态检查命令。
$ npm run lint 1:5 error Unexpected var, use let or const instead no-var 2:5 warning Unexpected console statement no-console 2 problems (1 error, 1 warning)
正常情况下，该命令会从index.js脚本里面，检查出来两个错误：一个是不应该使用var命令，另一个是不应该在生产环境使用console.log方法。
6、修正错误。
$ npm run lint-fix
运行上面的命令以后，再查看index.js，可以看到var x = 1;被自动改成了const x = 1;。这样就消除了一个错误，但是还留下一个错误。
7、修改规则。
由于我们想要允许使用console.log方法，因此可以修改.eslintrc.json，改变no-console规则。请将.eslintrc.json改成下面的样子。
{
"extends": "airbnb-base",
"rules": {
"no-console": "off"
}
}
再运行npm run lint，就不会报错了。
$ npm run lint
最后，欢迎关注我的个人微信公众号：业余草（yyucao）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！