在webpack中使用eslint配置（詳細教學）

本篇文章主要介紹了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: { // 这里的配置项参数将会被传递到 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 " 或 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 
}

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在JS中如何改变单物体透明度

在JS中如何实现通过拖拽改变物体大小

在vue中使用cli如何实现重构多页面脚手架

以上是在webpack中使用eslint配置（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！