@chris-ren 2016-04-27T07:18:23.000000Z 字数 2712 阅读 1425

代码检查工具- Eslint

eslint-plugin-react eslint react

简介

在团队协作中，为避免低级 Bug、产出风格统一的代码，会预先制定编码规范。使用代码检查工具和代码风格检测工具，则可以辅助编码规范执行，有效控制代码质量。

目前较为流行的代码检查工具有JSLint、JSHint、ESLint，代码风格检查工具主要有JSCS。
下面我们逐一介绍，并进行对比。
1. JSLint：JSLint是由Douglas Crockford开发的，可能是最早的JavaScript Lint工具了，它的名字来源于著名的C语言工具Lint。老道把他认为的非Good Parts的部分都报了warning，而且在它的文档中也提到了你应该欣然接受所有的JSLint的建议。

优点：配置是老道已经定好的，开箱即用。
不足：
- 有限的配置选项，很多规则不能禁用
- 规范严格，凡是不符合老道所认为的好的风格的，都会有警告(这一项就看你是否完全认同老道了)
- 扩展性差
- 无法根据错误定位到对应的规则
2. JSHint：JSHint是由Anton Kovalyov基于JSLint的代码实现的开源项目，由于JSLint时期大多数人都在受JSLint压迫，JSHint相比较之下，更友好，也更容易配置，所以很快就发展了起来，也得到了众多IDE和编辑器的支持。但是，由于它是基于JSLint开发的，自然原有的一些问题它也继承下来了，比如不易扩展，不容易直接根据报错定位到具体的规则配置等。好在它发展的不错，很多时候遇到的问题都可以在网上找到相关的解决方案，而且文档也是非常不错的。
优点
有了很多参数可以配置
支持配置文件，方便使用
支持了一些常用类库
支持了基本的ES6
不足
不支持自定义规则
无法根据错误定位到对应的规则
3.ESLint：是由Nicholas C. Zakas在2013年开始开发的，它的初衷就是为了能让开发者能自定义自己的linting rules，而且它提供了一套相当完善的插件机制，可以自由的扩展，动态加载配置规则，同时可以方便的根据报错定位到具体的规则配置。而且文档非常详细。在这里还要提一点，ESLint最初并不是为了造一个重复的轮子，而是作者在实际使用中的需求没有能得到JSHint团队的回应，所以他就结合当时的JSHint和另一个代码风格的检查工具JSCS写出来了现在具备代码风格检查，自定义插件扩展功能的ESLint了。
优点
默认规则里面包含了JSLint和JSHint的规则，易于迁移
可配置为警告和错误两个等级，或者直接禁用掉
支持插件扩展
可以自定义规则
可以根据错误定位到对应的规则
支持ES6
唯一一个支持JSX的工具
包含代码风格检测的规则（可以丢掉 JSCS 了）
不足
需要进行一些自定义配置(因为太灵活了嘛，不过文档是很详细的)
慢 (它比其他两个都要慢)

下面介绍ESLint的使用操作：

安装

1.安装Eslint（全局或本地方式）

 $ npm install eslint    //本地安装
 $ npm install -g eslint    //全局安装

说明：此处说明一下全局安装与本地安装的区别。
- 全局安装：该模块将被安装到全局目录下（全局目录通过 npm config set prefix "目录路径" 来设置。通过 npm config get prefix 来获取当前设置的全局目录）
- 本地安装：将模块下载到当前命令行所在目录。

一般都会使用全局安装方式统一安装的一个目录中去,这样既方便管理、结构清晰还可以重复利用。

2.安装React插件，如果你是以全局的方式安装Eslint，则也以全局方式安装React插件，反之亦然。

$ npm install eslint-plugin-react

配置

1. 在你的项目目录下，运行：eslint --init 将会产生一个.eslintrc的文件，文件内容包含一些校验规则

module.exports = {
    "env": {//Environment可以预设好其他环境的全局变量，如brower、node环境变量、es6环境变量、mocha环境变量等
        "browser": true，
        "node": true
    },
    "extends": "eslint:recommended", //Extends是EsLint默认推荐的验证，你可以使用配置选择哪些校验是你所需要的
    "parserOptions": {
        "ecmaVersion": 6, //指定ECMAScript支持的版本，6为ES6
        "sourceType": "module", //指定来源的类型，有两种”script”或”module”
        "ecmaFeatures": {
            "experimentalObjectRestSpread": true,
            "jsx": true //启动JSX
        }
    },
    "plugins": [//插件，可以自定义增加插件
        "react"
    ],
    "rules": {  //添加的规则信息
        "indent": [ //规则名称
            "error",//规则级别
            "tab"
        ],
        "linebreak-style": [
            "error",
            "windows"
        ],
        "quotes": [
            "error",
            "double"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
};

Rules说明
自定义规则，一般格式：”规则名称”:error级别系数。系数0为不提示(off)、1为警告(warn)、2为错误抛出(error)

可以包括Strict模式、也可以是code的方式提醒，如符号等。还可以是第三方的校验，如react。

{
    "plugins": [
        "react"
    ],
    "rules": {
         //Javascript code 默认校验
        "eqeqeq": "off", //off = 0
        "curly": "error", //error = 2
        "quotes": ["warn", "double"], //warn = 1
         //使用第三方插件的校验规则
        "react/jsx-quotes": 0
    }
}

2.配置完成后，可以运行如下命令执行代码检查
检查具体文件：

eslint file1.js file2.js

检查某个包下所有文件：

eslint lib/**

或

eslint "lib/**"

详细的配置信息，这里不一一说明，需要了解的可以查看官方文档

3.目前一些主流的IDE都可以集成EsLint，集成后可以在IDE中执行EsLint代码检查，非常方便。

参考资料：
Eslint官方文档：http://eslint.org/
中文版资料：https://github.com/Jocs/ESLint_docs
react插件配置说明：https://www.npmjs.com/package/eslint-plugin-react

代码检查工具- Eslint

简介

安装

配置

内容目录