切換語言為:簡體
詳細總結前端必備的eslint知識點!

詳細總結前端必備的eslint知識點!

  • 爱糖宝
  • 2024-07-30
  • 2074
  • 0
  • 0

ESLint簡介

作為前端,大家對ESLint 一定不陌生!它可以幫我們強制約束程式碼風格、檢測程式碼中的語法錯誤、可以識別程式碼中的潛在問題甚至提供了一些自動修復功能。

但要注意,在前端中,ESLint 有兩個工具:

一個是 模組包 ,一個是 VSCode的擴充套件工具

ESLint 模組包

安裝方式:

透過 npm 或 yarn 直接進行 全域性 或 專案安裝

npm i eslint -D


透過 vue 腳手架 建立專案時 選擇安裝 eslint 模組包 vue create 建立專案過程中選擇 lint

詳細總結前端必備的eslint知識點!

模組包安裝在專案裡,當啟動專案時,會根據配置情況在瀏覽器控制檯顯示錯誤。

詳細總結前端必備的eslint知識點!

VS中ESLint擴充套件工具

安裝方式:透過 vscode 搜尋安裝

詳細總結前端必備的eslint知識點!

此外掛會根據當前專案的配置(配置不能使用console.log),實時將錯誤顯示在編譯器裡

詳細總結前端必備的eslint知識點!

ESLint配置詳解

官網:Configuring ESLint

eslint 本身是一個js語法規範檢查的包,可以使用官方推薦的推薦的檢查規則,也可以使用自定義的規則。

手動下載生成配置

原有專案第一次引入eslint時,可以使用該方法生成配置檔案。使用vue腳手架的方式建立專案多半是不用這種方式的,因為腳手架內會幫我們把eslint配置好。

建立專案

  • 建立一個測試資料夾:eslint_test

  • 初始化專案:npm init -y (建立 package.json)

ESLint安裝

在專案中安裝eslint包

npm i eslint -D


注意安裝結果:node_moduels 中下載了很多包

  • .bin/eslint.cmd 指令碼檔案,內部透過 nodejs 執行 eslint執行包 的程式碼

  • @eslint包 用來規範 eslint配置檔案

  • eslint開頭的包 是 eslint執行包,包含eslint程式碼

詳細總結前端必備的eslint知識點!

生成ESLint配置檔案

ESLint 可以建立獨立的配置檔案 .eslintrc.js,也可以 直接在 package.json 中配置

vue-cli安裝eslint預設將配置寫在package.json檔案中

詳細總結前端必備的eslint知識點!

使用內建指令碼實現配置檔案的生成:

執行 node_modules/.bin 資料夾裡的 eslint指令碼建立配置檔案

  • 包含完整指令碼路徑的命令: ./node_modules/.bin/eslint --init

  • 也可以用 npx 來執行 (推薦)

npx eslint --init


npx是隨node一起安裝的,能去 .bin 目錄 裡找 目標指令碼檔案,簡化執行指令碼的語法

建立配置檔案過程中,需要選擇配置:

詳細總結前端必備的eslint知識點!

執行完畢後,會自動生成了配置檔案 .eslintrc.js

詳細總結前端必備的eslint知識點!

觀察package.json,會發現此過程下載了若干相關規範包

主要是下載了 standard 語法規範包,而它需要 用到 import、node、promise 外掛包

詳細總結前端必備的eslint知識點!

使用ESLint檢查js語法

npx eslint ./需要檢查語法的檔案路徑


如果違法規範,會將錯誤提示到 終端,說明 eslint 工作正常

詳細總結前端必備的eslint知識點!

ESLint配置解析

ESlint 被設計為完全可配置的,我們可以關閉每一個規則而只執行基本語法驗證。有兩種主要的方式來配置 ESLint:

註釋法(不推薦): 使用 JavaScript 註釋把配置資訊直接嵌入到一個程式碼原始檔中。

配置檔案: 使用 JavaScript、JSON 或者 YAML 檔案為整個目錄和它的子目錄指定配置資訊,或者直接在 package.json 檔案裡的 eslintConfig 欄位指定配置。

JavaScript配置的方式優先順序最高

一個標準的eslint配置檔案格式大致如下:

詳細總結前端必備的eslint知識點!

eslint檢測規則

ESLint 檢測配置檔案步驟:

  1. 在要檢測的檔案同一目錄裡尋找 .eslintrc.* 和 package.json;

  2. 緊接著在父級目錄裡尋找,一直到檔案系統的根目錄;

  3. 如果在前兩步發現有 root:true 的配置,停止在父級目錄中尋找 .eslintrc;

  4. 如果以上步驟都沒有找到,則回退到使用者主目錄 ~/.eslintrc 中自定義的預設配置;

通常我們都習慣把 ESLint 配置檔案放到專案根目錄,因此可以爲了避免 ESLint 校驗的時候往父級目錄查詢配置檔案,所以需要在配置檔案中加上

 root: true


env節點

在ESLint 的各種規範中,一般都不允許使用未在頁面內宣告的成員,即使是一些執行環境自帶的 api,如:

  • 瀏覽器中的 window/document

  • nodejs中的 __dirname

  • es2021中的 WeakRef

所以要告訴eslint,當前程式碼是執行在哪些環境中,這樣檢查時就不會報錯了

   env: {
    //使用瀏覽器的內建變數,如window,
    browser: true,
    //使用node的內建變數,如__dirname
    commonjs: true,
    es2021: true
  },


可用的環境包括:

一個環境定義了一組預定義的全域性變數。可用的環境包括:

  • browser - 瀏覽器環境中的全域性變數。

  • node - Node.js 全域性變數和 Node.js 作用域。

  • commonjs - CommonJS 全域性變數和 CommonJS 作用域 (用於 Browserify/WebPack 打包的只在瀏覽器中執行的程式碼)。

  • shared-node-browser - Node.js 和 Browser 通用全域性變數。

  • es6 - 啟用除了 modules 以外的所有 ECMAScript 6 特性(該選項會自動設定 ecmaVersion 解析器選項為 6)。

  • worker - Web Workers 全域性變數。

  • amd - 將 require() 和 define() 定義為像 amd 一樣的全域性變數。

  • mocha - 新增所有的 Mocha 測試全域性變數。

  • jasmine - 新增所有的 Jasmine 版本 1.3 和 2.0 的測試全域性變數。

  • jest - Jest 全域性變數。

  • phantomjs - PhantomJS 全域性變數。

  • protractor - Protractor 全域性變數。

  • qunit - QUnit 全域性變數。

  • jquery - jQuery 全域性變數。

  • prototypejs - Prototype.js 全域性變數。

  • shelljs - ShellJS 全域性變數。

  • meteor - Meteor 全域性變數。

  • mongo - MongoDB 全域性變數。

  • applescript - AppleScript 全域性變數。

  • nashorn - Java 8 Nashorn 全域性變數。

  • serviceworker - Service Worker 全域性變數。

  • atomtest - Atom 測試全域性變數。

  • embertest - Ember 測試全域性變數。

  • webextensions - WebExtensions 全域性變數。

  • greasemonkey - GreaseMonkey 全域性變數。

globals節點

當訪問當前原始檔內未定義的變數時,no-undef 規則將發出警告。如,在jquery專案中,直接使用“$”就會報錯。

因此,我們可以在ESLint 中定義這些全域性變數,這樣 ESLint 就不會發出警告了。

配置檔案中:

   //自定義全域性變數
  globals:{
    //自定義全域性變數$,既可讀又可改
    "$":true
  },


可選引數

引數名 釋義 示例
writable 允許重寫變數 "var1": "writable",
readonly 不允許重寫變數 "var2": "readonly"

可以使用字串 "off" 禁用全域性變數。

{
    "env": {
        "es6": true
    },
    "globals": {
        "Promise": "off"
    }
}


由於歷史原因,布林值 false 和字串值 "readable" 等價於 "readonly"。類似地,布林值 true 和字串值 "writeable" 等價於 "writable"。但是,不建議使用舊值。

Parser節點

ESLint 預設使用Espree作為其解析器,你可以在配置檔案中指定一個不同的解析器,只要該解析器符合下列要求:

  1. 它必須是一個 Node 模組,可以從它出現的配置檔案中載入。通常,這意味著應該使用 npm 單獨安裝解析器包。

  2. 它必須符合 parser interface

爲了表明使用該 npm 模組作為你的解析器,你需要在你的 .eslintrc 檔案裡指定 parser 選項。

{
    "parser": "esprima",
    "rules": {
        "semi": "error"
    }
}

parserOptions 節點

注:此項配置是基於Parser節點的!不同的解析器,配置項可能不同!參考: vue-eslint-parser

ESLint 允許你指定你想要支援的 JavaScript 語言選項。預設情況下,ESLint 支援 ECMAScript 5 語法。

對於 ES6 語法,可以在配置檔案內增加如下配置

{
    "parserOptions": {
        "ecmaVersion": 6,
    },
}

.eslintrc.js 檔案示例:

{
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",   
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "rules": {
        "semi": "error"
    }
}
  • ecmaVersion - 預設設定為 3,5(預設), 你可以使用 6、7、8、9 或 10 來指定你想要使用的 ECMAScript 版本。你也可以用使用年份命名的版本號指定為 2015(同 6),2016(同 7),或 2017(同 8)或 2018(同 9)或 2019 (same as 10)

  • sourceType - 設定為 "script" (預設) 或 "module"(如果你的程式碼是 ECMAScript 模組)。

  • ecmaFeatures - 這是個物件,表示你想使用的額外的語言特性:


    • globalReturn - 允許在全域性作用域下使用 return 語句

    • impliedStrict - 啟用全域性 strict mode (如果 ecmaVersion 是 5 或更高)

    • jsx - 啟用 JSX

Processor節點

外掛可以提供處理器,這意味著Processor都是呼叫外掛中的內建處理器。

處理器可以預處理程式碼: 比如過濾掉一些不需要檢測的js程式碼,然後交給rules去檢驗

若使用 processor 鍵,並使用由外掛名和處理器名組成的串接字串加上斜槓。例如,下面的選項啟用外掛 a-plugin 提供的處理器 a-processor:

{
    "plugins": ["a-plugin"],
    "processor": "a-plugin/a-processor"
}


注:

這裏的Processor外掛中的Processor是不一樣的!

這裏的Processor是指定呼叫哪個外掛中的Processor,如果不指定外掛,這句配置將失去意義!

外掛中的Processor告訴 ESLint 如何處理 JavaScript 之外的檔案。

要為特定型別的檔案指定處理器,請使用 overrides 鍵和 processor 鍵的組合。例如,下面對 *.md 檔案使用處理器 a-plugin/markdown。

{
    "plugins": ["a-plugin"],
    "overrides": [
        {
            "files": ["*.md"],
            "processor": "a-plugin/markdown"
        }
    ]
}


處理器可以生成命名的程式碼塊,如 0.js 和 1.js。ESLint 將這樣的命名程式碼塊作為原始檔案的子檔案處理。你可以在配置的 overrides 部分為已命名的程式碼塊指定附加配置。例如,下面的命令對以 .js 結尾的 markdown 檔案中的已命名程式碼塊禁用 strict 規則。

{
    "plugins": ["a-plugin"],
    "overrides": [
        {
            "files": ["*.md"],
            "processor": "a-plugin/markdown"
        },
        {
            "files": ["**/*.md/*.js"],
            "rules": {
                "strict": "off"
            }
        }
    ]
}

extends 節點

簡介:

ESLint 檢查時用哪些規範呢?透過這個節點可以配置使用 內建規範 還是 第三方規範。如使用第三方下載的 eslint-config-standard 規範

  // 擴充套件規則,使用第三方npm包
  extends: 'standard',

extends 屬性值可以是:

  • 指定配置的字串(配置檔案的路徑、可共享配置的名稱、eslint:recommended 或 eslint:all)

  • 字串陣列:每個配置繼承它前面的配置

extends 內建的規範有:

內建規範
eslint:recommended 值為 "eslint:recommended" 的 extends 屬性啟用一系列核心規則,核心規則參考eslint.bootcss.com/docs/rules/頁面內的所有綠色對鉤標記。
eslint:all 包含規則頁面的所有規則

如何配置:

實際專案中配置規則的時候,不可能團隊一條一條的去商議配置,太費精力了。通常的做法是使用業內大家普通使用的、遵循的編碼規範;然後透過 extends 去引入這些規範。

extends 屬性值可以是:

  • 指定配置的字串(配置檔案的路徑、可共享配置的名稱、eslint:recommended 或 eslint:all)

  • 字串陣列:每個配置繼承它前面的配置

{
    extends: [
        'eslint:recommended',
        'plugin:vue/essential',
        'eslint-config-standard', // 可以縮寫成 'standard'
        '@vue/prettier',
        './node_modules/coding-standard/.eslintrc-es6'
    ]
}

從上面的配置,可以知道 extends 支援的配置型別可以是以下幾種

  • eslint 開頭的:是 ESLint 官方的擴充套件;

  • plugin 開頭的:是外掛型別擴充套件,比如 plugin:vue/essential;

  • eslint-config 開頭的:來自 npm 包,使用時可以省略字首 eslint-config-,比如上面的可以直接寫成 standard;

  • @開頭的:擴充套件和 eslint-config 一樣,只是在 npm 包上面加了一層作用域 scope;

  • 一個執行配置檔案的相對路徑或絕對路徑;

那有哪些常用的、比較著名擴充套件可以被 extends 引入呢

  • eslint:recommended:ESLint 內建的推薦規則,即 ESLint Rules 列表中打了鉤的那些規則;

  • eslint:all:ESLint 內建的所有規則;

  • eslint-config-standard:standard 的 JS 規範;

  • eslint-config-prettier:關閉和 ESLint 中以及其他擴充套件中有衝突的規則;

  • eslint-config-airbnb-base:airbab 的 JS 規範;

  • eslint-config-alloy:騰訊 AlloyTeam 前端團隊出品,可以很好的針對你專案的技術棧進行配置選擇,比如可以選 React、Vue(現已支援 Vue 3.0)、TypeScript 等;

Plugins節點

有的時候,內建的規則不能滿足我們的要求,比如,對於vue檔案,顯然缺少對應的規則。這個時候,我們就可以使用外掛來拓展規則了。

外掛 是一個 npm 包,通常輸出規則。一些外掛也可以輸出一個或多個命名的 配置。要確保這個包安裝在 ESLint 能請求到的目錄下。

注意: 外掛是相對於 ESLint 程序的當前工作目錄解析的。換句話說,ESLint 將載入與使用者透過從專案 Node 互動直譯器執行 ('eslint-plugin-pluginname') 獲得的相同的外掛。

如何配置外掛

ESLint 相關的外掛的命名形式有 2 種:不帶名稱空間的和帶名稱空間的,比如:

  • eslint-plugin- 開頭的可以省略這部分字首;

  • @開頭的;

{
    plugins: [
        'jquery',          // 是指 eslint-plugin-jquery
        '@jquery/jquery',  // 是指 @jquery/eslint-plugin-jquery
        '@foobar',         // 是指 @foobar/eslint-plugin
    ]
}

當需要基於外掛進行 rules 的配置的時候,需要加上外掛的引用,比如:

{
    plugins: [
        'jquery',   // eslint-plugin-jquery
        '@foo/foo', // @foo/eslint-plugin-foo
        '@bar,      // @bar/eslint-plugin
    ],
    rules: {
        'jquery/a-rule': 'error',
        '@foo/foo/some-rule': 'error',
        '@bar/another-rule': 'error'
    },
}

rules 節點

使用內建規則

兩個用法:

  • 不使用 extend 節點 配置 整套的規範,而是在 rules節點中直接配置

  • 使用 extend 節點 配置 整套的規範,在 rules節點中修改部分規範的配置 eg

{
    "rules": {
        "eqeqeq": "off",
        "curly": "error",
        "quotes": ["error", "double"]
    }
}

"off" 或 0 - 關閉規則

"warn" 或 1 - 開啟規則,使用警告級別的錯誤:warn (不會導致程式退出)

"error" 或 2 - 開啟規則,使用錯誤級別的錯誤:error (當被觸發的時候,程式會退出)

使用外掛規則

我們也可以使用外掛中的規則,你必須使用 外掛名/規則ID 的形式。比如:

{
    "plugins": [
        "vue"
    ],
    "rules": {
        "vue/rule1": "error"
    }
}

注意: 當指定來自外掛的規則時,確保刪除 eslint-plugin- 字首。ESLint 在內部只使用沒有字首的名稱去定位規則。

0則評論

您的電子郵件等資訊不會被公開,以下所有項目均必填

OK! You can skip this field.