如何在react專案中配置ESlint

Molin發表於2019-03-04
ReactEsLint

規範自己的程式碼從 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

相關文章