webpack + react 使用 eslint

LucineXL發表於2018-09-12
WebReactEsLint

ESLint 是在 ECMAScript/JavaScript 程式碼中識別和報告模式匹配的工具，它的目標是保證程式碼的一致性和避免錯誤。

在本文開始前， 我們假設您已經有一個webpack + react 的 初始專案。

初始化

首先， 現在 專案中 安裝 eslint 和 eslint-loader

yarn add eslint eslint-loader -D
複製程式碼

在webpack中，通過 .eslintrc 檔案 對 eslint 進行配置。在根目錄下 執行 touch .eslintrc 在根目錄下生成 .eslintrc 配置檔案

eslint-loader

在 webpack.config.js 中 配置 eslint-loader.

module: {
    // ...
    rules: [
        // ...
        {
            test: /\.(js|jsx)$/,
            enforce: 'pre',
            loader: 'eslint-loader',
            include: path.resolve(__dirname, './src/**/*.js'),
            exclude: /node_modules/
        },
    ]
}
複製程式碼

我們的專案中之前已經使用了 babel-loader對我們的程式碼進行轉譯， 我們可以把 eslint-loader 和他一起使用。

module: {
    // ...
    rules: [
        // ...
        {
            test: /\.(js|jsx)$/,
            loader: ['babel-loader', 'eslint-loader'],
            include: path.resolve(__dirname, './src/**/*.js'),
            exclude: /node_modules/
        },
    ]
}
複製程式碼

babel-eslint

我們的專案中使用了 es6 的語法， 可以通過 babel-eslint 進行檢測。

yarn add babel-eslint -D
複製程式碼

.eslintrc

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

然後， 便可以新增 rules 來檢測我們程式碼，更多規則可參考官方文件

{
  "parser": "babel-eslint",
  "rules": {
    "indent": ["error", 4, {
      "SwitchCase": 1
    }],
    "no-extra-boolean-cast": "error",
    "no-cond-assign": "error",
    "no-magic-numbers": ["off", {
      "ignoreArrayIndexes": true,
      "ignore": [0, 1],
      "enforceConst": true
    }],
    "max-params": ["error", 6],
    "no-var": "error",
    "no-console": "off",
    "no-alert": "off",
    "no-debugger": "off",
    // ...
  }
}
複製程式碼

eslint-plugin-react

我們可以使用eslint-plugin-react 來檢測 react 的一些語法規則

yarn add eslint-plugin-react -D 
複製程式碼

.eslintrc

{
    // ...
    "plugins": [
        "react",
    ],
    "rules": {
        "react/jsx-uses-react": "error",
        "react/prop-types": "error",
         // ...
    }
}

複製程式碼

Environments 指定指令碼的執行環境。

env: 指定指令碼的執行環境。每種環境都有一組特定的預定義全域性變數。

browser - 瀏覽器環境中的全域性變數。
node - Node.js 全域性變數和 Node.js 作用域。
commonjs - CommonJS 全域性變數和 CommonJS 作用域 (用於 Browserify/WebPack 打包的只在瀏覽器中執行的程式碼)。
shared-node-browser - Node.js 和 Browser 通用全域性變數。
es6 - 啟用除了 modules 以外的所有 ECMAScript 6 特性（該選項會自動設定 ecmaVersion 解析器選項為 6）。
worker - Web Workers 全域性變數。
amd - 將 require() 和 define() 定義為像 amd 一樣的全域性變數。
複製程式碼

更多環境變數請參考 官方文件

.eslintrc

{
    // ...
    "env": {
        "browser": true,
        "node": true,
        "es6": true,
        "amd": true
    },
}
複製程式碼

Globals - 指令碼在執行期間訪問的額外的全域性變數。

在配置檔案裡配置全域性變數時，使用 globals 指出你要使用的全域性變數。將變數設定為 true 將允許變數被重寫，或 false 將不允許被重寫。

.eslintrc

{
    // ...
    "globals": {
        "var1": true,
        "var2": false,
    }
}
複製程式碼

eslint-config-airbnb

我們在使用 eslint 的時候 可以使用別人配置好的 配置， 我們可以選用 Airbnb 標準。

使用 Airbnb標準，還需要 兩個 必須的 外掛。

yarn add eslint-config-airbnb eslint-plugin-jsx-a11y eslint-plugin-import -D

.eslintrc

{
    // ...
    "extends": "airbnb",
}
複製程式碼

pre-commit

我們的專案使用了git, 可以通過設定pre-commit 來對我們的程式碼 每次提交時 進行檢測，如果檢測到 程式碼 不符合 eslint規範，則不允許 提交， 這樣可以很大程度上保證我們的程式碼質量。

yarn add pre-commit -D
複製程式碼

然後我們在 package.json 中 新增pre-commit配置

// ...
"scripts": {
   // ...
  "eslint": "eslint --ext .js src"
},
"pre-commit": [
  "eslint"
]
複製程式碼

相關文章