webpack引入eslint配置詳解

webpack中eslint使用

10余年的蒙山網站建設經驗，針對設計、前端、開發、售后、文案、推廣等六對一服務，響應快，48小時及時工作處理。營銷型網站建設的優勢是能夠根據用戶設備顯示端的尺寸不同，自動調整蒙山建站的顯示方式，使網站能夠適用不同顯示終端，在瀏覽器中調整網站的寬度，無論在任何一種瀏覽器上瀏覽網站，都能展現優雅布局與設計，從而大程度地提升瀏覽體驗。創新互聯從事“蒙山網站設計”,“蒙山網站推廣”以來，每個客戶項目都認真落實執行。

首先，要使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 // 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 中 規則 的名稱。第一個值是錯誤級別，可以使下面的值之一：

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 
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持創新互聯。

新聞名稱：webpack引入eslint配置詳解
文章地址：http://m.kartarina.com/article16/gspigg.html

成都網站建設公司_創新互聯，為您提供建站公司、靜態網站、企業網站制作、動態網站、網站策劃、外貿網站建設

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯