认识达内从这里开始

使用ESLint

昆明达内的老师知道，ESLint详尽使用参见官方文档，下面罗列的是由JSHint迁移到ESLint的一些要点。

配置

可以通过以下三种方式配置ESLint:

使用.eslintrc文件（支持JSON和YAML两种语法）；

在package.json中添加eslintConfig配置块；

直接在代码文件中定义。

.eslintrc文件示例：

{

"env": {

"browser": true,

},

"parserOptions": {

"ecmaVersion": 6,

"ecmaFeatures": {

"jsx": true

}

},

"globals": {

"angular": true,

},

"rules": {

"camelcase": 2,

"curly": 2,

"brace-style": [2, "1tbs"],

"quotes": [2, "single"],

"semi": [2, "always"],

"space-in-brackets": [2, "never"],

"space-infix-ops": 2,

}

}

.eslintrc放在项目根目录，则会应用到整个项目；如果子目录中也包含.eslintrc文件，则子目录会忽略根目录的配置文件，应用该目录中的配置文件。这样可以方便地对不同环境的代码应用不同的规则。

package.json示例：

{

"name": "mypackage",

"version": "0.0.1",

"eslintConfig": {

"env": {

"browser": true,

"node": true

}

}

}

文件内配置

代码文件内配置的规则会覆盖配置文件里的规则。

禁用ESLint：

/* eslint-disable */

var obj = { key: 'value', }; // I don't care about IE8 

/* eslint-enable */

禁用一条规则：

/*eslint-disable o-alert */

alert('doing awful things'); 

/* eslint-enable o-alert */

调整规则：

/* eslint o-comma-dangle:1 */

// Make this just a warning, not an error

var obj = { key: 'value', }

工作流集成

ESLint可以集成到主流的编辑器和构建工具中，以便我们在编写的代码的同时进行lint。

编辑器集成

以WebStorm为例，只要全局安装ESLint或者在项目中依赖中添加ESLint，然后在设置里开启ESLint即可。其他编辑可以从官方文档中获得获得具体信息。

构建系统集成

在Gulp中使用：

var gulp = require('gulp'); 

var eslint = require('gulp-eslint');

gulp.task('lint', function() { 

return gulp.src('client/app/**/*.js')

.pipe(eslint())

.pipe(eslint.format());

});

其他构建工具参考官方文档。

代码风格检测

在团队协作中，统一的代码风格更具可读性、可维护性。ESLint内置了一系列有关代码风格的规则，可以根据团队的编码规范设置。

自定义规则

显然，ESLint内置的规则不可能包罗所有需求。可以通过插件实现自定义规则，这是ESLint最有卖点的功能。在NPM上以eslintplugin为关键词，可以搜索到很多插件，包括eslint-plugin-react。如果有自行开发插件的需求，可以阅读ESLint插件开发文档。

以eslint-plugin-react为例，安装以后，需要在ESLint配置中开启插件，其中eslint-plugin-前缀可以省略：

{

"plugins": [

"react"

]

}

接下来开启ESLint JSX支持（ESLint内置选项）：

{

"ecmaFeatures": {

"jsx": true

}

}

然后就可以配置插件提供的规则了：

{

"rules": {

"react/display-name": 1,

"react/jsx-boolean-value": 1

}

}

自定义规则都是以插件名称为命名空间的。