正文
ESLint入门
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
一、ESLint是什么？
ESLint是一个用于识别和报告ECMAScript/JavaScript中代码格式的工具，目的是使代码风格更加统一和避免错误。ESLint的理念是可扩展、每条规则独立、不内置编码风格。
二、为什么要使用ESLint？
在多人协作时，统一的代码风格更具可读性、可维护性。即使是单人开发，也可以使用ESLint来规范自己的书写规范。毕竟，规范化代码也是提升效率的一个方面。
而且，ESLint可以集成到主流的编辑器和构建工具中，以便我们在编写的代码的同时进行lint。
以 WebStorm 为例，只要全局安装 ESLint 或者在项目中依赖中添加 ESLint ，然后在设置里开启 ESLint 即可。其他编辑可以从官方文档（https://eslint.org/docs/user-guide/integrations）中获得具体信息。
三、如何使用ESLint？
1 安装和使用
有两种方式去安装ESLint：全局和本地。
1.1 本地安装和使用
如果要将ESLint作为项目构建系统的一部分，那么选择在本地进行安装。 您可以使用npm：
npm install eslint --save-dev
然后您需要建立一个配置文件：
./node_modules/.bin/eslint --init
接着，你可以在您的项目根目录运行ESLint：
./node_modules/.bin/eslint yourfile.js
您使用的任何插件或可共享配置也必须在本地安装，以此与本地安装的ESLint配合使用。
1.2 全局安装和使用
如果要使ESLint可以运用你的所有项目，那么选择在全局安装ESLint。 你可以使用npm：
npm install -g eslint
然后您需要建立一个配置文件：
eslint --init
接着，你可以在您的项目根目录运行ESLint：
eslint yourfile.js
您使用的任何插件或可共享配置也必须在全局安装，以此与全局安装的ESLint配合使用。
2 配置
在运行eslint --init之后，会在您的目录建立一个.eslintrc文件。在其中您将看到一些如下的配置规则：
{
"rules": {
"semi": ["error", "always"],
"quotes": ["error", "double"]
}
}
“semi”和“quotes”是ESLint中规则的名称。 第一个值是规则的错误级别，可以是以下值之一：
- "off" 或 0 - 关闭规则
- "warn" 或 1 - 将规则作为警告
- "error" 或 2 - 将规则作为错误
这三个错误级别允许您细微地控制ESLint如何应用规则。
您的.eslintrc配置文件将同样包含该行：
"extends": "eslint:recommended"
由于这一行，规则页面上标记为“”的所有规则都将被打开。
ESLint被设计为可完全配置的，配置ESLint有两种主要的方法：
- 注释配置 - 使用JavaScript注释将配置信息直接嵌入文件。
- 配置文件 - 使用JavaScript，JSON或YAML文件来指定整个目录及其所有子目录的配置信息。
这可以是格式为.eslintrc.*文件或package.json中的eslintConfig域，这两个ESLint都将自动查找和读取，也可以在命令行中指定配置文件。
有几个可配置的信息：
- Environment - 您的脚本被设计在所运行的环境。每个环境都带有一组预定义的全局变量。
- Globals - 您的脚本在执行期间访问的其他全局变量。
- Rules - 启用的规则和错误的级别。
更多配置选项和细节，看官方配置文档（http://eslint.org/docs/user-guide/configuring）。
四、常用的ESLint共享配置
因为一个配置文件可以被基础配置中的以启用的规则继承。一些公司或组织会开源出来他们使用的配置，它们以共享配置（Shareable Cinfig）的形式存在。
备注：共享配置是一个npm包，它输出一个配置对象。要确保这个包安装在ESLint能请求到的目录下。将extends的属性值指定为该对象名称即可实现继承。
1 Standard（https://github.com/standard/eslint-config-standard）
2 Airbnb（https://github.com/airbnb/javascript)
五、webpack 整合 ESLint
webpack 中通过添加 loader 的方式来使用 eslint，该 loader 名为 eslint-loader。在 webpack 中的配置如下。
/* 这是webpack配置文件的内容，省略无关部分 */
{
module: {
preLoaders: [{
test: /\.js$/, // 只针对js文件
loader: 'eslint', // 指定启用eslint-loader
include: dirVars.srcRootDir, // 指定审查范围仅为自己团队写的业务代码
exclude: [/bootstrap/], // 剔除掉不需要利用eslint审查的文件
}],
},
eslint: {
configFile: path.resolve(dirVars.staticRootDir, './.eslintrc'), // 指定eslint的配置文件在哪里
failOnWarning: true, // eslint报warning了就终止webpack编译
failOnError: true, // eslint报error了就终止webpack编译
cache: true, // 开启eslint的cache，cache存在node_modules/.cache目录里
}
}
当然也可以把 eslint-loader 放在 loaders 中，但是放置到 preLoaders 中可以先于 loader 进行处理，若 ESLint 检查到了问题就会在此停掉。如果你使用了 babel 等类似的 loader，那么通过 webpack 编译前后的代码相差就很大了，这往往导致无法 ESLint 的检查。
eslint-loader 可以采用一个配置项 eslint 来进行配置，默认会使用项目根目录下的配置文件 .eslintrc 来读取配置信息。
