在React+Babel+Webpack环境中使用ESLint

ESLint是js中目前比较流行的插件化的静态代码检测工具。经过使用它能够保证高质量的代码，尽可能减小和提前发现一些错误。使用eslint能够在工程中保证一致的代码风格，特别是当工程变得愈来愈大、愈来愈多的人参与进来时，须要增强一些最佳实践。

本文假设您已经有一个react+babel+webpack的起始工程，能够参考react-webapp-startkit

首先，安装eslint包

在项目的跟目录下，运行

npm --save-dev install eslint

由于咱们使用了webpack，因此必需要告诉webpack咱们在构建时使用eslint，安装eslint-loader

npm --save-dev install eslint-loader

安装以后，咱们能够再webpack配置中使用eslint加载器了。
webpack.config.js

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

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

在根目录下：

touch .eslintrc

.eslintrc

{
  "rules": {
  }
}

稍后咱们能够在该文件中指定规则，但首先咱们要在Webpack配置文件中引入该文件。

webpack.cofnig.js

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

如今能够启动app了，在根目录下

npm run dev // 取决与package.json中的定义

你可能会看到The keyword ‘import’ is reserved的解析错误。这是由于eslint还不知道经过Babel使用的ES6特性(好比import)。

ESLint + Babel

以前，咱们已经安装了babel-loader(在起步工程中)来转换咱们的代码。如今咱们能够将它和eslint-loader一同使用。

webpack.config.js

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

或者，使用webpack的preLoaders

webpack.config.js

...
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 --save-dev babel-eslint

修改.eslintrc

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

如今应该能够启动app了，可是没有任何错误显示，不要高兴的太早，这只是由于咱们尚未添加任何检测规则。

ESLint规则

咱们来添加咱们的第一条规则。

修改.eslintrc

...
"rules": {
  "max-len": [1, 70, 2, {ignoreComments: true}]
}
...

咱们添加了一条规则来检查代码的单行长度，当单行代码长度大于70个字符时，检测会报错。

启动app,你可能会看到关于代码长度的错误，由于某些行多于70个字符了。咱们能够修改规则来容许更多的字符。

.eslintrc

...
"rules": {
  "max-len": [1, 120, 2, {ignoreComments: true}]
}
...

若是还有错误，可能你就须要考虑修改代码了。

React的ESLint规则

如今来添加一些检测React的代码规则，使用eslint-plugin-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}],
    "prop-types": [2]
  }
}

当启动app后，你可能会看到PropTypes定义的错误，你可能想要修复这些错误。

另外，咱们可使用一些包含推荐规则的预设，但暂时咱们先扩展本身的规则。

扩展ESLint规则

咱们不想每次都指定这些规则，所幸已经有不少符合最佳实践的规则。其中之一就是Airbnb Style Guide，此外Airbnb还开源了他们本身的ESlint配置。

已经有一部分依赖包安装了，但还缺乏一些：

npm --save-dev install eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y

Now we can add a one-liner to our ESLint configuration to use Airbnbs’ ESLint configuration. When you look back at the packages we installed, you can see that the configuration includes JSX and React rules.

接下来，经过一行代码的配置来让咱们可使用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]
  }
}

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

src/index

/*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钩子在每次提交前检测，若是检测失败则禁止提交。能够在很大必定程度上保证代码质量。

这里咱们使用了pre-commitgit包来帮助咱们实现这一目标。

首先在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失败。

done.