本文由我们团队的 杨俊宁 组内分享后总结。
一、前言
ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误。在许多方面，它和 JSLint、JSHint 相似，除了少数的例外：
- ESLint 使用 Espree 解析 JavaScript。
- ESLint 使用 AST 去分析代码中的模式
- ESLint 是完全插件化的。每一个规则都是一个插件并且你可以在运行时添加更多的规则。
二、安装和初始化
先决条件：Node.js (>=4.x), npm version 2+。
1、npm install eslint -g
ESLint是通过npm安装的，这里的-g选项代表全局，也就是说它不会把ESLint的可执行文件安装在你的项目文件夹或者说当前文件夹下。如果你没有设置这个-g选项的话，它会在你当前文件夹下安装ESLint可执行文件，那样就不是全局安装了。后面我们所有安装包都要用使用这个 -g 选项
2、eslint -v
安装完成之后，你可以先执行一下 eslint -v 这个命令来看一下eslint是否已经安装成功了，如果没有的话，你需要反复检查，直到确保eslint安装已经成功为止。
3、eslint --init
关于 eslint --init 可以不必执行，它主要的作用是在你当前文件夹下生成.eslintrc文件，但同时也会把eslint在你当前文件夹下重新安装一遍，并且如果你使用包的话，它还会要求必须要有 package.json 文件，总之会很麻烦。但如果你是第一次使用的话，我建议你可以执行一下试试，它主要提供3种预安装包：Google标准、Airbnb标准和Standard标准。
这3个标准里，Google就是Google公司的标准，Airbnb是Airbnb公司的标准，Standard就是一些前端工程师自定的标准。目前来看，公认的最好的标准是Airbnb标准（互联网发展日新月异，永远是年轻人颠覆老年人，连Google都老了）。它对于ES6要求最严格，比如禁止使用var定义变量，必须使用let或者const等等。既然采用最新标准，当然就让你的代码一次性向最高标准看齐，省得以后麻烦。
三、扩展配置
所谓扩展配置就是使用别人配置好的配置，我们选用 Airbnb 标准
1、npm install eslint-config-airbnb -g
精彩的重头戏来了：看到漂亮的airbnb了吗？我们就里就是要安装Airbnb的标准了。注意-g，还是全局化安装。
2、 npm install eslint-plugin-jsx-a11y -g
a11y是accessibility（无障碍环境）的缩写，从第一个字母a到最后一个字母y，中间一共是11个字母，所以就叫a11y了，类似于i18n表示internationalization（国际化）一样。JSX主要是React会用到，虽然我们的项目里可能并不会用React，但是这个Airbnb标准必须要用到它，所以必须安装。
3、 npm install eslint-plugin-import -g
同上，Airbnb标准必需。是用来校验 import 的，比如不能加 .js 后缀
四、React支持
1、eslint-plugin-react
前文说到 eslint 是一个完全插件化的东西，所以支持特定语言也很简单。，比如我们需要支持 react，那么我们直接安装 react 插件即可：npm install eslint-plugin-react -g
2、babel-eslint
如果不配置这个插件的话，会报
Parsing error: Unexpected token =。所以我们下载npm i -g babel-eslint之后还需要在配置文件中加入"parser": "babel-eslint"(配置方法见下文)
五、编写全局 .eslintc.* 文件
全局的 .eslintrc.json 文件则放在当前用户的根目录下，类Unix系统的当前用户目录是 ~，而Windows系统的话则是类似于 C:\Windows\Users\Username 这样的地方。
把以下代码放入 .eslintrc.json，就做好了你的全局ESLint配置文件。
{
"extends": "airbnb",
"plugins": [
"react"
],
"env": {
"browser": true,
"node": true,
"jquery": true
},
"parser": "babel-eslint",
"rules": {
"eqeqeq": 0,
"semi": [
2, "never"
],
"import/first": 0,
"max-len": [
1, {
"code": 200
}
],
"no-unused-vars": 1,
"global-require": 0,
"prefer-destructuring": 0,
"class-methods-use-this": 0,
"react/no-unused-state": 1,
"react/prop-types": 0,
"react/jsx-filename-extension": [1, {
"extensions": [".js", ".jsx"]
}]
}
}
具体的自定义配置方法请参考 eslint.cn/docs/user-g…
六、Atom 中使用ESLint
1、安装 atom-ide-ui
相对于 linter，它是 facebook 开发，制作更精良，其次他并不仅仅提供了这一个功能。
2、安装 linter-eslint
安装完成之后，linter-eslint 的缺省设置有2个地方需要修改：
1、把 Disable when no ESLint config is found 的对钩去掉。这个选项的意思是说：如果你的javascript项目文件夹中没有.eslintrc这样的配置文件的话，那么ESLint就不起作用。在这里，我们要设置为全局lint，不需要在每个javascript文件夹中包含 .eslintrc.* 文件，所以要把它去掉，否则由于我们的项目文件夹中没有 .eslintrc.* 文件，ESLint会不起作用。
2、把 Use global ESLint installation 的对钩勾上。因为我们使用的是全局的ESLint安装包。
七、后记
VSCode 与 Atom 的使用大同小异，需要提醒的一点是代码检查插件一般都有修复和格式化代码的能力，比如我使用的 Atom linter-eslint，可以开启保存的时候自动修复并格式化文件。再配合编辑器的自动保存功能，开发体验很是畅爽。省去考虑代码结构的精力，也就可以更加专注于业务和逻辑。
点击咨询 