webpack引入eslint配置詳解

webpack中eslint使用

首先，要使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: { // 這里的配置項(xiàng)參數(shù)將會被傳遞到 eslint 的 CLIEngine 
    formatter: require('eslint-friendly-formatter') // 指定錯誤報告的格式規(guī)范
  }
}

注：formatter默認(rèn)是stylish，如果想用第三方的可以安裝該插件，如上方的示例中的 eslint-friendly-formatter 。

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

npm install --save-dev eslint

最后，項(xiàng)目想要使用那些eslin規(guī)則，可以創(chuàng)建一個配置項(xiàng)文件 '.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已經(jīng)完成了。

這里講一下 eslintrc.js 的配置使用，詳細(xì)細(xì)節(jié)請參考http://eslint.cn/docs/user-guide

eslint 配置項(xiàng)

1. root 限定配置文件的使用范圍
2. parser 指定eslint的解析器
3. parserOptions 設(shè)置解析器選項(xiàng)
4. extends 指定eslint規(guī)范
5. plugins 引用第三方的插件
6. env 指定代碼運(yùn)行的宿主環(huán)境
7. rules 啟用額外的規(guī)則或覆蓋默認(rèn)的規(guī)則
8. globals 聲明在代碼中的自定義全局變量

在我們使用eslint時，配置文件中的 rules 配置項(xiàng)是否是不可或缺的？

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

extends

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

在開發(fā)中我們一般使用第三方的。

官方推薦

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

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

了解詳情可以參考一下官方規(guī)則表

第三方分享

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

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',

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

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

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

配置規(guī)則

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

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

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

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

這些規(guī)則一般分為兩類：

1. 添加默認(rèn)或第三庫中沒有的
2. 覆蓋默認(rèn)或第三庫的

我們的項(xiàng)目中可能會有一些其他的文件也需要進(jìn)行格式規(guī)范，如：html, vue, react等，對于這些文件的處理，我們需要引入第三方插件。

plugins（html）

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

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

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

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

.eslintrc.js中，添加如下配置項(xiàng)：

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

而對于這種用 eslint-pulgin-html 擴(kuò)展的的文件我們可以使用 eslint --ext .html,.vue src 進(jìn)行檢測，如果想要在開發(fā)中邊寫邊檢測，我們可以使用相應(yīng)文件的loader進(jìn)行處理。然后執(zhí)行 npm run dev 就可以實(shí)現(xiàn)的功能。邊寫邊檢測的功能。

在開發(fā)中有時根據(jù)需要，我們可能在同一個項(xiàng)目不同的目錄使用不同的 .eslintrc.js 文件，這時我們就需要使用配置項(xiàng) root 。

限定使用范圍 (root: true)

如果我們想要在不同的目錄中使用不同的 .eslintrc, 我們就需要在該目錄中添加如下的配置項(xiàng)：

{
  "root": true
}

如果我們不設(shè)置的話，它將會繼續(xù)查找，知道更目錄，如果更目錄有配置文件它將會使用根目錄的，這樣會導(dǎo)致當(dāng)前配置目錄配置無法起作用的問題。

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

parser（指定解析器）

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

babel-eslint 安裝命令：

npm install --save-dev babel-eslint

在 .eslintrc.js 配置文件中添加如下配置項(xiàng)代碼：

parser: 'babel-eslint',

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

env（環(huán)境）

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

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

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

global

指定全局變量。

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

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。