webpack引入eslint配置詳解，webpackeslint詳解

webpack引入eslint配置詳解，webpackeslint詳解

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: { // 這裡的配置項參數將會被傳遞到 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 配置項

1. root 限定設定檔的使用範圍
2. parser 指定eslint的解析器
3. parserOptions 設定解析器選項
4. extends 指定eslint規範
5. plugins 引用第三方的外掛程式
6. env 指定代碼啟動並執行宿主環境
7. rules 啟用額外的規則或覆蓋預設的規則
8. 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 // bnbnpm install --save-dev eslint-config-standard // standard

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

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

使用這些第三方的擴充，有時我們需要更新一些外掛程式，比如standard：eslint-plugin-import

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

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

配置規則

在.eslintrc.js 檔案中添加 rules, 代碼如下：

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

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

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

這些規則一般分為兩類：

1. 添加預設或第三庫中沒有的
2. 覆蓋預設或第三庫的

我們的項目中可能會有一些其他的檔案也需要進行格式規範，如：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 }

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。