在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.