前言
js是一门动态弱类型语言，程序中的错误要在代码运行时才能发现。而ESLint就是能在编译中发现代码错误的工具，在团队协作中，避免低级 Bug，产出风格统一的代码。
工具需要的是合适
ESLint是最新的工具，支持配置，自定义规则，报告错误，文档详尽，支持ES6语法最广，支持JSX语法。那Airbnb ESLint又是什么呢，为什么这么多人推荐？这是我一开始的疑惑，其实这是Airbnb公司自身定制的标准。ESLint默认有一套规则eslint:recommended，每个团队可以根据自身需求，进行部分配置修改。如果你很喜欢大厂那一套，可以自己安装配置进ESLint工具中使用，但这里建议不要迷信权威，Airbnb的标准是高度定制的，不一定适合你的项目，所以学好怎么配置自己的标准才是重要的。
安装
ESLint是一个运行在node环境的工具，使用npm进行安装
- 全局安装
npm install -g eslint
- 本地安装
npm install eslint --save-dev
我喜欢都安装，因为全局安装能多个工程直接使用命令，本地安装能为后续提供灵活配置。
生成配置文件
工具基本都有配置文件，告诉工具该做什么，怎么做。如npm的就是package.json文件，而ESLint的配置文件就是.eslintrc。
进入项目根目录，终端执行
eslint --init
之后程序会询问你一些问题，以创建符合你风格的配置文件，最终生成配置文件，其格式会有JavaScript、YAML、JSON、package.json等等。这里我们把生成的文件重命名一下为.eslintrc，为后续在IDE中进行配置。
配置文件
打开配置文件，可以看到以下内容，我使用的是JSON格式
{
"env": {
"browser": true
},
"extends": "eslint:recommended",
"rules": {
"indent": [
"error",
"tab"
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"double"
],
"semi": [
"error",
"always"
]
},
Globals: {
}
}
解析以下参数的意思
- env：指定你的js代码在哪个运行环境中检测（每个运行环境都有一组预定义的全局变量）；
- extends：扩展配置规则，我这里扩展的是eslint的推荐规则，可以使用Airbnb的规则；
- rules：指定检测规则。这是最重要的部分，也是你的自定义js代码监测规则的地方，格式为：规则名: 规则。比如：
"indent": ["error","tab"]
这里indent就是规则名，它定义了缩进应该使用tab，规则内的第一个值error指的是错误等级，它有三个等级，分别是
| error level | 对应数值 | 含义 |
|---|---|---|
| error | 2 | 错误 |
| warn | 1 | 提醒 |
| off | 0 | 关闭该规则 |
具体请参考eslint官网。
- Globals：指定脚本执行过程中访问的附加全局变量（比如jquery）
运行工具
到上面为止，已经完成基本配置了，在终端运行
eslint yourfile.js
便可以对该文件进行检测，如果有问题，终端会提示相关错误的代码和错误类型，可以运行
eslint yourfile.js --fix
进行自动修复，但这只是局限于部分规则。
更多项目中的应用请查看《如何在WebStorm中配置ESLint》和《利用 git 钩子做代码提交前的检查》，谢谢支持！
网友评论