如何在react項目中配置ESlint

規範本身的代碼從 ESlint 開始。 ESlint 和 webpack 集成，在 babel 編譯代碼開始前，進行代碼規範檢測。

Eslint介紹

ESLint是js中目前比較流行的插件化的靜態代碼檢測工具。經過使用它能夠保證高質量的代碼，儘可能減小和提前發現一些錯誤。使用eslint能夠在工程中保證一致的代碼風格，特別是當工程變得愈來愈大、愈來愈多的人蔘與進來時，須要增強一些最佳實踐。

依賴版本

"webpack": "^2.3.2"

"react": "^15.4.2"

"babel-eslint": "^7.2.3"

"babel-plugin-import": "^1.1.1"

"eslint": "^3.19.0"

"eslint-loader": "^1.7.1"

"eslint-plugin-react": "^6.10.3"

安裝依賴

在項目的根目錄下，安裝eslint和eslint-loader

npm --save-dev install eslint
npm --save-dev install eslint-loader複製代碼

.eslintrc

.eslintrc是ESlint的配置文件，咱們須要在項目的根目錄下增長.eslintrc文件。

webpack配置

在webpack.config.js中，爲須要檢測的文件添加eslint-loader加載器。通常咱們是在代碼編譯前進行檢測。

module: {
    rules: [
        // ...

        {
            test: /\.js[x]?$/,
            enforce: 'pre',
            use: [{
                loader: 'eslint-loader', 
                options: { fix: true }
            }],
            include: path.resolve(__dirname, './src/**/*.js'),
            exclude: /node_modules/
        },

        // ...
    ]
}複製代碼

package.json文件配置

package.json中添加script命令：

"scripts": {
      "lint": "eslint --ext .js src"
}複製代碼

到這裏，執行npm run lint就能夠檢測結果了。

經過babel-eslint來檢測ES6代碼

安裝babel-eslint:

npm install --save-dev babel-eslint複製代碼

修改.eslintrc:

{
  parser: "babel-eslint",
  "rules": {
  }
}複製代碼

在rules中加上規則就能夠了。

React的ESLint規則

安裝eslint-plugin-react來檢測react代碼：

npm install --save-dev eslint-plugin-react複製代碼

安裝以後，咱們能夠使用react插件來指定咱們關於react的第一條代碼規則。好比咱們要求組件指定PropTypes。

{
  parser: "babel-eslint",
  "plugins": [
    "react"
  ],
  "rules": {
    "max-len": [1, 120, 2, {ignoreComments: true}],
    "prop-types": [2]
  }
}複製代碼

.eslintrc示例

下面是一份react項目的.eslintrc配置示例

{
    //文件名 .eslintrc.json
    "env": {
        "browser": true,
        "es6": true,
        "node": true,
        "commonjs": true
    },
    "extends": "eslint:recommended",
    "installedESLint": true,
    "parserOptions": {
        "ecmaFeatures": {
            "experimentalObjectRestSpread": true,
            "jsx": true,
            "arrowFunctions": true,
            "classes": true,
            "modules": true,
            "defaultParams": true
        },
        "sourceType": "module"
    },
    "parser": "babel-eslint",
    "plugins": [
        "react"
    ],
    "rules": {
        "linebreak-style": [
            "error",
            "unix"
        ],
        //"semi": ["error", "always"],
        "no-empty": 0,
        "comma-dangle": 0,
        "no-unused-vars": 0,
        "no-console": 0,
        "no-const-assign": 2,
        "no-dupe-class-members": 2,
        "no-duplicate-case": 2,
        "no-extra-parens": [2, "functions"],
        "no-self-compare": 2,
        "accessor-pairs": 2,
        "comma-spacing": [2, {
            "before": false,
            "after": true
        }],
        "constructor-super": 2,
        "new-cap": [2, {
            "newIsCap": true,
            "capIsNew": false
        }],
        "new-parens": 2,
        "no-array-constructor": 2,
        "no-class-assign": 2,
        "no-cond-assign": 2,
        "no-mixed-spaces-and-tabs": 0
    }
}複製代碼

添加pre-commit

若是項目使用了git,能夠經過使用pre-commit鉤子在每次提交前檢測，若是檢測失敗則禁止提交。能夠在很大必定程度上保證代碼質量。

首先，安裝pre-commit:

npm install pre-commit --save-dev複製代碼

在package.json中配置pre-commit須要運行的命令：

"pre-commit": [
  "lint"
]複製代碼

示例代碼

示例代碼 react-molin