为何需要ESLint

总结写这篇文章是因为我已经开始意识到了规范的重要性，遵守良好的规范可以让一个人少犯错误，代码也是如此。在小的公司小的开发团队中这点意识比较薄弱，因为大家更注重的是技术，因为开发人员相对较少所以沟通起来比较方便，很少有使用eslint的。但是在大团队协作时，良好的代码规范显得格外重要，因为这是保障一个团队代码风格相同、避免低级bug的途径之一。

使用Lint工具和代码风格检测工具，可以辅助编码规范执行，有效控制代码质量。

关于ESLint的介绍，我在这就不多说了，自行GG。ESLint相比于JSLint和CSSLint的好处在于更加的灵活简洁。

规则的开启和禁用比较好，分为0（关闭）、1（warning）、2（error）三种模式。
ESLint的文档很完善
可以根据需要制定自己的规则（自己开发业务插件）
可以集成到开发工具中，webstorm、sublime、atom等，
那webstorm举例，只需要在设置里面开启ESLint即可，其他编辑器可以从官方文档中获得说明

如何使用ESLint

首先先安装

sudo npm -g install eslint

使用webpack构建工具的话需要使用eslint的loader，安装eslint-loader

npm --save-dev install eslint-loader

在webpack的webpack.config.js文件中配置一下

module: {
  loaders: [
    {
      test: /\.jsx? $/, exclude: /node_modules/, loader: 'react-hot!babel' }, { test: /\.js$ /,
      exclude: /node_modules/,
      loader: 'eslint-loader'
    }
  ]
},

或者使用preloader的方式都可以（推荐使用）

module: {
    preLoaders: [
      {
        test: /\.(js|jsx) $/, loader: 'eslint-loader', include: [path.resolve(__dirname, "src/app")], exclude: [nodeModulesPath] }, ], loaders: [ { test: /\.(js|jsx)$ /, //正则表达式匹配 .js 和 .jsx 文件
        loader: 'babel-loader?optional=runtime&stage=0',//对匹配的文件进行处理的loader 
        exclude: [nodeModulesPath]//排除node module中的文件
      }
    ]
}

我们既可以在webpack配置文件中指定检测规则，也可以遵循最佳实践在一个专门的文件中指定检测规则。我们就采用后面的方式：

首先是创建在根目录下 .eslintrc 文件，或者执行eslint --init 来自动化生成文件

{
  "rules": {
  }
}

稍后完善规则，现在在webpack配置中引入该文件。

webpack.config.js

devServer: {
  contentBase: './dist',
  hot: true,
  historyApiFallback: true
},
eslint: {
  configFile: './.eslintrc'
},

如果之前已经使用babel-loader（not babel）来转换代码的话，现在可以一起用

...
module: {
  loaders: [
    {
      test: /\.jsx? $/, exclude: /node_modules/, loader: 'react-hot!babel' }, { test: /\.js$ /,
      exclude: /node_modules/,
      loaders: ['babel-loader', 'eslint-loader']
    }
  ]
},
...

preLoaders 的方式

...
module: {
  preLoaders: [
    {
      test: /\.js $/, exclude: /node_modules/, loader: 'eslint-loader' }, ], loaders: [ { test: /\.jsx?$ /,
      exclude: /node_modules/,
      loader: 'react-hot!babel'
    }
  ]
},
...

我们可以通过babel-eslint来检测ES6代码

npm install babel-loader --save-dev

.eslintrc 文件

{
  parser: "babel-eslint",
  "rules": {
  }
}

可以开启ESLint JSX支持（ESLint内置选项）：

{
  "ecmaFeatures": {
    "jsx": true
  }
}

现在还没有制定规则（rules还是空的），所以没有任何提示。

具体的规则和遵循的写法，请看这里（airbnb的规则），也可以看官方文档的推荐。

https://github.com/airbnb/javascript

https://github.com/airbnb/javascript/tree/master/react

https://github.com/airbnb/css

https://github.com/airbnb/javascript/tree/master/css-in-javascript

React的ESLint规则

使用eslint-plugin-react来检测React代码

npm --save-dev install eslint-plugin-react

安装之后，我们可以使用react插件来制定我们关于react代码的规则，比如说我们要求组件指定PropTypes

.eslintrc

{
  parser: "babel-eslint",
  "plugins": [
    "react"
  ],
  "rules": {
    "max-len": [1, 120, 2, {ignoreComments: true}],//检测每行代码最多为120个字符
    "prop-types": [2]//2是代表error ，不符合就禁止运行。
  }
}

启动项目后，如果你的项目中使用到props但是没有指定PropTypes的话就会报错，报错是在编辑器的控制台中。

扩展ESLint规则

如果你不想每次都配置指定规则的话，那你可以采取一些最佳实践的规则，其中之一就是 Airbnb 的规则（作者推荐），具体规则上面已经提到了。此外Airbnb还开源了他们自己的ESlint配置。

接下来，通过一行代码的配置来让我们可以使用Airbnb的ESLint配置(你可以通过查看node_modules里面的包来查看，这个配置包含了jsx和React的规则)

.eslintrc

{
  parser: "babel-eslint",
  "extends": "airbnb",
  "rules": {
    "max-len": [1, 120, 2, {ignoreComments: true}],
    "prop-types": [2]
  }
}

我们可以看到可以很简单的使用别人的配置规则来扩展ESLint规则。我们还可以使用其他的扩展，但目前Airbnb代码规范和ESlint配置非常的受欢迎并被大多数开发者所接受(除了一些规则我本人不接受)。这个时候我们可以使用规则来进行微调。

比如说我不想看到no-unused-vars(为使用过的变量定义)的警告，可以

.eslintrc

{
  parser: "babel-eslint",
  "extends": "airbnb",
  "rules": {
    "no-unused-vars": 0,
    "max-len": [1, 120, 2, {ignoreComments: true}],
    "prop-types": [2]
  }
}

上面这种是全局的配置，如果是只想在某些文件中禁止检测，可以如下修改(通过注释的方式)

/*eslint-disable no-unused-vars*/
import SC from 'soundcloud';
/*eslint-enable no-unused-vars*/
import React from 'react';
import ReactDOM from ‘react-dom';
...

pre-commit钩子

如果项目使用了git,可以通过使用pre-commit钩子在每次提交前检测，如果检测失败则禁止提交。可以在很大一定程度上保证代码质量。（本人认为有点多余，因为我在commit之前肯定会检查好代码的检测情况的）

这里我们使用pre-commit git包来帮助我们实现这一目标。

首先在package.json中添加script命令：

"scripts": {
  "eslint": "eslint --ext .js src"
}

安装 pre-commit

npm install pre-commit --save-dev

最后，在package.json中配置pre-commit需要运行的命令：

"pre-commit": [
  "eslint"
]

完成之后，在每次提交之前，都会运行eslint命令进行检测，如果检测到有违反代码规则的情况，则会返回1，导致git commit失败。

简单的介绍一下在gulp中的使用，实时的话就在watch下运行即可。

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

gulp.task('lint', function() {  
  return gulp.src('client/app/**/*.js')
    .pipe(eslint())
    .pipe(eslint.format());
});

参考自：

https://csspod.com/getting-started-with-eslint/

http://eslint.org/docs/user-guide/integrations

http://le0zh.github.io/2016/06/21/eslint+in+react+babel+webpack/

https://www.npmjs.com/package/eslint-config-airbnb

https://segmentfault.com/q/1010000006801542

http://www.cnblogs.com/fanyegong/p/5302960.html

如何使用ESLint

扩展ESLint规则

pre-commit钩子

文章评论