webpack 引入 eslint

webpack 引入 eslint

一、在 webpack 中配置 eslint

安裝 eslint 和 eslint-loader

npm install -D eslint eslint-loader

在 webpack.config.js 中添加以下代碼：

{
        test: /\.js$/,
        loader: 'eslint-loader',
        enforce: "pre",
        include: [path.resolve(__dirname, 'src')], // 指定檢查的目錄
        options: {                                 // 這裏的配置項參數將會被傳遞到 eslint 的 CLIEngine 
            formatter: require('eslint-friendly-formatter') // 指定錯誤報告的格式規範
        }
    }

注：formatter默認是stylish，若是想用第三方的能夠安裝該插件，如上方的示例中的 eslint-friendly-formatter 。

在根目錄建立 .eslintrc.js 文件, 簡版代碼以下

module.exports = {
    root: true, 
    parserOptions: {
        sourceType: 'module'
    },
    env: {
        browser: true,
    },
    rules: {
        "indent": ["error", 2],
        "quotes": ["error", "double"],
        "semi": ["error", "always"],
        "no-console": "error",
        "arrow-parens": 0
    }
}

這樣，一個簡單的webpack引入eslint已經完成了。

這裏講一下 eslintrc.js 的配置使用，詳細細節請參考http://eslint.cn/docs/user-guide

二、eslintrc.js 的配置

配置項以下：

- rules         啓用額外的規則或覆蓋默認的規則
     - extends       指定eslint規範
     - plugins       引用第三方的插件
     - parser        指定eslint的解析器
     - root          限定配置文件的使用範圍
     - env           指定代碼運行的宿主環境
     - globals       聲明在代碼中的自定義全局變量
     - parserOptions 設置解析器選項

rules
rules 就是咱們設置代碼規則的配置項，以下方代碼，

{
    "rules": {
        "semi": ["error", "always"],
        "quotes": ["error", "double"]
    }
}

"semi" 和 "quotes" 是 ESLint 中 規則 的名稱。第一個值是錯誤級別，可使下面的值之一：

"off"   or 0 - 關閉規則
"warn"  or 1 - 將規則視爲一個警告（不會影響退出碼）
"error" or 2 - 將規則視爲一個錯誤 (退出碼爲1)

extends
咱們也能夠不用自定義reules，使用官方推薦的，這裏咱們就要使用extends配置項。
也可使用一些大公司提供的的，如：aribnb, google, standard。

{
  "extends": "standard",
  "plugins": [
    "html"
  ]
}

plugins
如上方引用 html 插件，其餘如： import react

parser
指定解析器
babel-eslint 解析器是一種使用頻率很高的解析器，由於如今不少公司的不少項目目前都使用了es6，爲了兼容性考慮基本都使用babel插件對代碼進行編譯。而用babel編譯後的代碼使用 babel-eslint 這款解析器能夠避免沒必要要的麻煩。

npm install -D babel-eslint

parser: 'babel-eslint',     // .eslintrc.js

root
若是咱們想要在不一樣的目錄中使用不一樣的 .eslintrc, 咱們就須要在該目錄中添加以下的配置項

{
    "root": true
}

若是咱們不設置的話，它將會繼續查找，知道更目錄，若是更目錄有配置文件它將會使用根目錄的，這樣會致使當前配置目錄配置沒法起做用的問題。

env
指定了環境，就能夠放心的使用它們的全局變量和屬性。

"env": {
    "browser": true, //
    "node": true //
}

global
指定全局變量。

"globals": {
    "var1": true,
    "var2": false 
}

三、scripts配置

package.json 中添加：

"scripts": {
    "lint": "eslint --ext .jsx,.js src/ --cache"
 }

檢查是自動修復可以下：

"scripts": {
    "lint": "eslint --ext .jsx,.js src/  --fix ./src --cache"
 }

這樣，終端運行以下命令，便可

npm run lint

四、常見錯誤

Unexpected token

Unexpected token <;        解決：添加 parser: 'babel-eslint'
Unexpected token import;   解決：添加 plugins: [import]
Unexpected token =;        解決：添加 plugins: [react]

其中插件名稱爲：babel-eslint、 eslint-plugin-import、 eslint-plugin-react。

附：

module.exports = {
    root: true,    
    parserOptions: {
        sourceType: 'module'
    },
    env: {
        browser: true,
    },
    "plugins": [
        "react",
        "import"
    ],
    "parser": "babel-eslint",
    rules: {
        "no-debugger": process.env.NODE_ENV === 'production' ? 2 : 1,
        "indent": ["error", 2],
        // "quotes": ["error", "double"],
        // "semi": ["error", "always"],
        // "no-console": "error",
        "arrow-parens": 0
    }
}