本篇文章主要介紹了webpack引入eslint配置詳解，現在分享給大家，也給大家做個參考。
webpack中eslint使用

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

1

npm install --save-dev eslint-loader

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

1

2

3

4

5

6

7

8

9

{

??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，命令如下：

1

npm install --save-dev eslint

最后，項目想要使用那些eslin規則，可以創建一個配置項文件 '.eslintrc.js'，代碼如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

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 中添加如下代碼：

1

2

extends: 'eslint:recommended',

extends: 'eslint:all',

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

第三方分享

使用第三方分享的，我們一般需要安裝相關的插件代碼如下：

1

2

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

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

在 .eslintrc.js 中添加如下代碼：

1

2

3

extends: 'eslint:google',

// or

extends: 'eslint:standard',

使用這些第三方的擴展，有時我們需要更新一些插件，比如standard：eslint-plugin-import

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

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

配置規則

在.eslintrc.js 文件中添加 rules, 代碼如下：

1

2

3

4

5

6

{

??"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 ，命令如下：

1

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

這個插件將會提醒模塊腳本之間模擬瀏覽器共享全局變量的行為，因為這不適用于模塊腳本。

這個插件也可以擴展文件，如：.vue，.jsx

.eslintrc.js中，添加如下配置項：

1

2

3

4

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, 我們就需要在該目錄中添加如下的配置項：

1

2

3

{

??"root": true

}

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

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

parser（指定解析器）

babel-eslint 解析器是一種使用頻率很高的解析器，因為現在很多公司的很多項目目前都使用了es6，為了兼容性考慮基本都使用babel插件對代碼進行編譯。而用babel編譯后的代碼使用 babel-eslint 這款解析器可以避免不必要的麻煩。

babel-eslint 安裝命令：

1

npm install --save-dev babel-eslint

在 .eslintrc.js 配置文件中添加如下配置項代碼：

1

parser: 'babel-eslint',

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

env（環境）

在 .eslintrc.js 中添加如下代碼：

1

2

3

4

"env": {

??"browser": true, //

??"node": true //

}

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

global

指定全局變量。

在 .eslintrc.js 中添加如下代碼：

1

2

3

4

"globals": {

??"var1": true,

??"var2": false?

}

上面是我整理給大家的，希望今后會對大家有幫助。