轉自https://segmentfault.com/a/1190000012936029

首先，要使webpack支援eslint，就要要安裝eslint-loader，命令如下:

npm install --save-dev 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。

其次，要想webpack具有 eslint 的能力，就要安裝eslint，命令如下：

npm install --save-dev eslint

最後，專案想要使用那些eslin規則，可以建立一個配置項檔案 '.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

eslint 配置項

• root 限定配置檔案的使用範圍
• parser 指定eslint的解析器
• parserOptions 設定解析器選項
• extends 指定eslint規範
• plugins 引用第三方的外掛
• env 指定程式碼執行的宿主環境
• rules 啟用額外的規則或覆蓋預設的規則
• globals 宣告在程式碼中的自定義全域性變數

在我們使用eslint時，配置檔案中的rules 配置項是否是不可或缺的？

答案是肯定的。不過我們也可以不用自定義reules，我們可以使用第三方的，這裡我們就要使用extends配置項。

extends

我們可以使用eslint官方推薦的，也可以使用一些大公司提供的的，如：aribnb, google, standard。

在開發中我們一般使用第三方的。

官方推薦

只需在.eslintrc.js中新增如下程式碼：

extends: 'eslint:recommended',
extends: 'eslint:all',

瞭解詳情可以參考一下官方規則表

第三方分享

使用第三方分享的，我們一般需要安裝相關的外掛程式碼如下：

npm install --save-dev eslint-config-airbnb // bnb
npm install --save-dev eslint-config-standard // standard

在.eslintrc.js中新增如下程式碼：

extends: 'eslint:google',
// or
extends: 'eslint:standard',

使用這些第三方的擴充套件，有時我們需要更新一些外掛，比如standard：

eslint-plugin-import

不要慌，我們只要按照錯誤提示一步一步的安裝這些外掛即可。

雖然，這些第三方的擴充套件很不錯，但是有時我們需要定義一些比較個性化的規則，我們就需要新增rules配置項。

配置規則

在.eslintrc.js檔案中新增rules, 程式碼如下：

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

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

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

這些規則一般分為兩類：

• 新增預設或第三庫中沒有的
• 覆蓋預設或第三庫的

我們的專案中可能會有一些其他的檔案也需要進行格式規範，如：html, vue, react等，對於這些檔案的處理，我們需要引入第三方外掛。

plugins（html）

安裝eslint-plugin-html，命令如下：

npm install --save-dev eslint-plugin-html

這個外掛將會提醒模組指令碼之間模擬瀏覽器共享全域性變數的行為，因為這不適用於模組指令碼。

這個外掛也可以擴充套件檔案，如：.vue，.jsx

.eslintrc.js中，新增如下配置項：

settings: {
    'html/html-extensions': ['.html', '.vue'],
    'html/indent': '+2',
},

而對於這種用eslint-pulgin-html擴充套件的的檔案我們可以使用eslint --ext .html,.vue src進行檢測，如果想要在開發中邊寫邊檢測，我們可以使用相應檔案的loader進行處理。然後執行npm run dev就可以實現的功能。邊寫邊檢測的功能。

在開發中有時根據需要，我們可能在同一個專案不同的目錄使用不同的.eslintrc.js檔案，這時我們就需要使用配置項root。

限定使用範圍 (root: true)

如果我們想要在不同的目錄中使用不同的.eslintrc, 我們就需要在該目錄中新增如下的配置項：

{
    "root": true
}

如果我們不設定的話，它將會繼續查詢，知道更目錄，如果更目錄有配置檔案它將會使用根目錄的，這樣會導致當前配置目錄配置無法起作用的問題。

在開發中針對不同的情況我們要使用不同的解析器，而我們常用的就是babel-eslint。

parser（指定解析器）

babel-eslint解析器是一種使用頻率很高的解析器，因為現在很多公司的很多專案目前都使用了es6，為了相容性考慮基本都使用babel外掛對程式碼進行編譯。而用babel編譯後的程式碼使用babel-eslint這款解析器可以避免不必要的麻煩。

babel-eslint安裝命令：

npm install --save-dev babel-eslint

在.eslintrc.js配置檔案中新增如下配置項程式碼：

parser: 'babel-eslint',

如果你使用的預設解析器的話，且在程式碼中使用了瀏覽器有相容性的問題的js新特性，使用webpack編譯就會出現問題，這時我們一般裝最新的eslint或者安裝是使用babel-eslint來解決問題。

env（環境）

在.eslintrc.js中新增如下程式碼：

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

指定了環境，你就可以放心的使用它們的全域性變數和屬性。

global

指定全域性變數。

在.eslintrc.js中新增如下程式碼：

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

參考原始碼

webpack乾貨