Vue 項目中 ESlint 配置

前言

對於 ESlint 這一塊一直存在一些疑問，今天看到一個文章內容挺好的，這里拿來了。

一、eslint 安裝

1、全局安裝

npm i -g eslint

全局安裝的好處是，在任何項目我們都可以使用eslint的全局命令進行代碼規則操作，但是這對我們的意義並不大，后續會詳細介紹；
全局安裝之后，要求相關的eslint插件頁必須全局安裝，這對多人開發項目來說會比項目安裝更加繁瑣。所以，我們這里采用在項目上安裝eslint：

2、項目安裝

npm i -D eslint

3、編輯器安裝

二、eslint 定義規則

1、創建 .eslintrc.js 文件

• 可以使用 ./node_modules/.bin/eslint --init 創建文件
• .eslintrc.* 文件支持 .js .yaml .yal .json等格式的配置文件，這里使用 .js文件
• 在 package.json 里創建一個 eslintConfig 屬性，在那里，同樣可以定義你的配置
• 如果 .eslintrc.js 和 package.json里的 eslintConfig 同時存在，則只讀取 .eslintrc.js文件

2、eslint 選項說明

"root": true

默認情況下，ESLint 會在所有父級目錄里尋找配置文件，一直到根目錄。如果發現配置文件中有 “root”: true，它就會停止在父級目錄中尋找。

  parserOptions: {

    parser: 'babel-eslint', // 解析器，默認使用Espree

    ecmaVersion: 6, // 支持es6語法，但並不意味着同時支持新的 ES6 全局變量或類型（比如 Set 等新類型）

    sourceType: 'module', // 指定來源的類型，"script" (默認) 或 "module"（如果你的代碼是 ECMAScript 模塊)

    // 使用的額外的語言特性

    ecmaFeatures: {

      jsx: true, // 啟用 JSX

      globalReturn: true, // 允許在全局作用域下使用 return 語句

      impliedStrict: true, // 啟用全局 strict mode (如果 ecmaVersion 是 5 或更高)

      experimentalObjectRestSpread: true, // 啟用實驗性的 object rest/spread properties 支持。(重要：這是一個實驗性的功能,在未來可能會有明顯改變。 建議你寫的規則 不要 依賴該功能，除非當它發生改變時你願意承擔維護成本。)

    },

  }

解析器選項可以在 parserOptions 屬性設置。設置解析器選項能幫助 ESLint 確定什么是解析錯誤，所有語言選項默認都是 false。如上：

  env: {
    es6: true, // 啟用 ES6 語法支持以及新的 ES6 全局變量或類型
    node: true, // Node.js 全局變量和 Node.js 作用域
    browser: true, // 瀏覽器全局變量
    jquery: true, // jQuery 全局變量
  }

使用 env 關鍵字指定你想啟用的環境。如上：
更多環境設置請參考：https://cn.eslint.org/docs/user-guide/configuring#specifying-environments

  globals: {
    template: false, // false 不允許被重寫
    _util: false,
  }

當訪問當前源文件內未定義的變量時，no-undef 規則將發出警告。如果你想在一個源文件里使用全局變量，推薦你在 ESLint 中定義這些全局變量，這樣 ESLint 就不會發出警告了。如上：

  plugins: [
    'html', // 此插件用來識別.html 和 .vue文件中的js代碼
  ]

ESLint 支持使用第三方插件。在使用插件之前，你必須使用 npm 安裝它。如：npm i -D eslint-plugin-html。在配置文件里配置插件時，可以使用 plugins 關鍵字來存放插件名字的列表。插件名稱可以省略 eslint-plugin- 前綴。如上：

"extends": "eslint:recommended"

一個配置文件可以從基礎配置中繼承已啟用的規則。如上，如果值為字符串數組則每個配置繼承它前面的配置。值為 “eslint:recommended” 的 extends 屬性啟用了eslint默認的規則，請參考：https://cn.eslint.org/docs/rules/

  rules: {
    indent: [2, 4], // 強制使用一致的縮進
    eqeqeq: [2, 'always'], // 要求使用 === 和 !==
    semi: [2, 'never'], // 要求或禁止使用分號代替 ASI
    quotes: [2, 'single'], // 強制使用一致的反勾號、雙引號或單引號
  }

ESLint 附帶有大量的規則。你可以在rules選項中設置，設置的規則將覆蓋上面繼承的默認規則。要改變一個規則設置，你必須將規則 ID 設置為下列值之一：

“off” 或 0 - 關閉規則
“warn” 或 1 - 開啟規則，使用警告級別的錯誤：warn (不會導致程序退出)
“error” 或 2 - 開啟規則，使用錯誤級別的錯誤：error (當被觸發的時候，程序會退出)

三、eslint 代碼檢測和修復

這里講的是使用 eslint 命令行來操作，后續會講到如何用編輯器提升代碼效率

1、代碼檢測

項目根目錄運行 eslint，檢測指定文件，支持 glob 模式

./node_modules/.bin/eslint index.js

檢測index.js文件，如下，有一個錯誤：多余的分號（基於semi規則）。並告訴我們此規則可以通過 --fix 命令修復。

指定文件后綴名

./node_modules/.bin/eslint --ext .js,.html src

目前，告訴 ESLint 哪個文件擴展名要檢測的唯一方法是使用 --ext 命令行選項指定一個逗號分隔的擴展名列表。注意，該標記只在與目錄一起使用時有效，如果使用文件名或 glob 模式，它將會被忽略。

2、代碼修復

項目根目錄運行：

./node_modules/.bin/eslint index.js --fix

會自動修復代碼，當然不是所有的規則都能實現自動修復的，具體說明請參照：https://cn.eslint.org/docs/rules/

四、eslint更多配置方式

完整的 配置層次結構，從最高優先級最低的優先級，如下：

1、行內配置

/*eslint-disable*/ 、 /*eslint-enable*/
/*global*/
/*eslint*/
/*eslint-env*/

2、命令行選項

--global
--rule
--env
-c、--config

3、項目級配置

與要檢測的文件在同一目錄下的 .eslintrc.\* 或 package.json 文件
繼續在父級目錄尋找 .eslintrc 或 package.json文件，直到根目錄（包括根目錄）或直到發現一個有"root": true的配置。

4、如果不是（1）到（3）中的任何一種情況，退回到 ~/.eslintrc 中自定義的默認配置。

五、.eslintignore 忽略文件

1、定義及作用

在項目根目錄創建一個 .eslintignore 文件告訴 ESLint 去忽略特定的文件和目錄。

2、忽略規則

.eslintignore 文件是一個純文本文件，其中的每一行都是一個 glob 模式表明哪些路徑應該忽略檢測。如：

/dist/
/*.js

eslint總是忽略 /node_modules/\* 和 /bower_components/\* 中的文件

3、用eslint命令檢查忽略文件

./node_modules/.bin/eslint index.js

六、創建自己的規則風格文件

1、命名

eslint-config-* // 如：eslint-config-vui

2、上傳

參照：發布一個自己的npm包

3、下載

npm i -D eslint-config-vui

4、使用

在繼承規則 extends 屬性中定義自己上傳的規則名，可以忽略 eslint-config- 字符，如下：

extends: ['vui']

5、eslint-config-vui 規則源碼地址

https://github.com/shiguang0116/eslint-config-vui

七、使用編輯器插件標識錯誤以及自動修復代碼

為什么使用編輯器插件：上述講到的使用 eslint 命令來檢測和修復代碼的操作顯然非常繁瑣，我們需要能夠自動修復代碼的工具，相關編輯器都提供了 eslint 插件。

參考：ESLint配置（二）：vscode配置eslint，實現錯誤代碼標識以及自動修復

八、使用構建工具檢測代碼

為什么：以上方式，包括后續講到的使用編輯器修復代碼，都只是自我書寫代碼的規范意識而已，在多人開發時如何強制性的要求提交的代碼是符合我們自定的規范呢？這就需要在構建工具做相應的配置。

參考：ESLint配置（三）：構建工具（webpack、gulp）配置eslint  

 

轉載自：ESLint 配置 （這里有系列文章可看）