0

ESLint是一个用于ECMAScript/JavaScript、JSX的可拔插设计的代码检查工具（linting utility），可以对代码风格进行检查，并发现潜在的BUG。ESLint类似于JSLint或者JSHint，但是：

1. ESLint使用Espree来解析JavaScript代码
2. ESLint使用抽象语法树来进行模式（Pattern）评估
3. ESLint采用完全可拔插架构，每一个规则都是一个插件，你可以在运行时添加更多插件

要在工程中使用ESLint，可以进行局部安装。要使用ESLint提供的命令行工具，进行全局安装：

# 局部安装
cd reactstudy  # 进入工程根目录
npm install eslint --save-dev
# 全局安装
npm install -g eslint

为了让全局安装的ESLint能够正常工作，插件、共享配置也必须全局的安装。

在工程中使用ESLint，首先应该初始化一个配置文件：

cd reactstudy 
./node_modules/.bin/eslint --init
# 根据提示，结合工程特点逐个回答问题，选择以JSON形式保存配置文件

初始化命令执行完毕后，工程的根目录会生成一个名为.eslintrc.json  的配置文件。

可以手工调用ESLint命令行工具，执行代码检查：

# 调用全局安装的ESLint
eslint yourfile.js
# 调用局部安装的ESLint
./node_modules/.bin/eslint yourfile.js

打开.eslintrc.json 文件可以看到类似下面的内容：

{
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaFeatures": {
            "experimentalObjectRestSpread": true,
            "jsx": true
        },
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "indent": [
            "error",
            4
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
}

rules的属性包含了一系列ESLint需要执行的规则，rules的每个属性的名称都是ESLint的一个规则。属性的值是一个数组：

1. 第一个元素指定该规则检查不通过时的错误级别：off/warn/error，或者0/1/2。如果设置为error，则检查的退出码设置为1
2. 后续元素指定该规则的配置参数 

extends属性指定将哪个共享配置作为起点，默认值是"extends": "eslint:recommended"  ，这导致ESLint规则列表中所有打钩的规则，都自动开启。你可以到npm仓库搜索“eslint-config”来发现更多的共享配置。如果你既不extends共享配置也不手工指定rules，则ESLint什么都不检查。

安装ESlint的Webpack加载器：

npm install eslint --save-dev
npm install eslint-loader --save-dev

 修改Webpack 1.x的配置文件，添加：

module: {
    loaders: [
        { test: /\.js$/, loader: "eslint-loader", exclude: /node_modules/ }
    ]
}

如果和编译器类的Webpack加载器一起使用，要注意顺序：

module: {
    loaders: [
        { test: /\.js$/, loaders: [ "babel-loader", "eslint-loader" ], exclude: /node_modules/ },
    ]
}

注意：和Webpack一起使用时，.eslintrc.json配置文件也是必须的。

Settings ⇨ Languages&Frameworks ⇨ JavaScript ⇨ Code Quality Tools  ⇨ ESLint，参考下图设置：

现象：提示 *** is defined but never used，但是JSX中的确使用了***

解决办法：在.eslintrc.json中添加：

{
    "rules": {
        // 添加此规则：
        "react/jsx-uses-vars": [
            "error"
        ]
    }
}