一、eslint介紹

eslint中文官網：https://zh-hans.eslint.org/docs/latest/use/getting-started

1. 什么是eslint

• ESLint是一個開源的JavaScript代碼靜態(tài)分析工具，用于找出代碼中的問題，并提供一致的編碼風格。它可以掃描代碼，并根據(jù)預定義的規(guī)則進行分析，然后給出對應的警告或錯誤提示。
• ESLint的使用可以幫助開發(fā)者遵循一致的編碼規(guī)范，提高代碼的質量和可維護性。它可以檢測到一些常見的編碼錯誤、不合理的代碼結構、潛在的問題等，并生成相應的警告或錯誤信息。同時，ESLint還支持自定義規(guī)則，開發(fā)者可以根據(jù)自己的需求定義特定的規(guī)則來適應團隊的編碼風格。
• ESLint可以通過命令行工具、集成開發(fā)環(huán)境`（IDE插件等方式進行集成和使用，以便在編碼過程中實時分析代碼，減少錯誤和提高開發(fā)效率。

2. 為什么需要eslint校驗

在前端項目中，ESLint校驗是必要的，原因如下：

• 代碼質量保證：ESLint可以通過規(guī)則來檢測代碼中的潛在問題和錯誤，確保代碼的質量。它可以檢查常見的錯誤、代碼風格問題、未使用的變量、未聲明的變量等，從而減少Bug數(shù)量。
• 統(tǒng)一代碼風格：ESLint可以強制執(zhí)行特定的代碼風格規(guī)范，確保項目中的代碼風格一致。這對于多人協(xié)作的項目來說尤為重要，可以避免由于不同人員編寫代碼風格不統(tǒng)一而導致的閱讀和維護困難。
• 提高代碼可讀性：ESLint可以發(fā)現(xiàn)不易察覺的問題，例如未使用的變量、未聲明的變量等，這些問題會影響代碼的可讀性。通過ESLint的校驗，可以及時發(fā)現(xiàn)這些問題，提高代碼的可讀性和維護性。
• 節(jié)省時間和精力：ESLint的自動校驗可以在開發(fā)過程中實時提醒錯誤和警告，避免了手動查找問題的時間和精力。這樣開發(fā)人員可以更專注于解決問題和開發(fā)新功能。

總之，ESLint校驗在前端項目中是必要的，可以提高代碼質量、統(tǒng)一代碼風格，增加代碼的可讀性和維護性，節(jié)省時間和精力。

二、在vite項目中配置eslint

1. 安裝ESLint和相關插件

通過命令行工具進入項目目錄，然后運行以下命令安裝ESLint和相關依賴：

npm install eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-standard eslint-plugin-import eslint-plugin-promise eslint-plugin-node -D

(1) eslint-config-standard

eslint-config-standard是一個ESLint的配置文件，用于定義規(guī)范的代碼樣式和規(guī)則。它基于JavaScript標準風格指南，包含了一系列預定義的規(guī)則和配置，幫助開發(fā)者在編寫JavaScript代碼時保持一致的風格和規(guī)范。

具體來說，eslint-config-standard插件的作用有以下幾個方面：

• 規(guī)范代碼風格：eslint-config-standard定義了一系列規(guī)則，包括縮進、命名、引號、空格等方面，幫助開發(fā)者規(guī)范代碼風格，提高代碼可讀性和可維護性。
• 避免常見錯誤：eslint-config-standard還包含了許多規(guī)則來檢測常見的錯誤，比如未聲明的變量、不必要的逗號、禁止使用無意義的表達式等，幫助開發(fā)者避免一些常見的編碼錯誤。
• 提高代碼質量：根據(jù)規(guī)范的代碼風格和錯誤檢測，eslint-config-standard使得開發(fā)者能夠更容易地發(fā)現(xiàn)和糾正代碼中的常見問題，從而提高代碼的質量。
• 可定制性：eslint-config-standard是一個可配置的插件，允許開發(fā)者根據(jù)自己的需求來自定義部分規(guī)則，以滿足項目的特定要求和團隊的共識。

(2) eslint-plugin-import

eslint-plugin-import是一個ESLint插件，用于檢查和規(guī)范模塊導入語句的使用。

該插件提供了一些規(guī)則，用于檢查模塊導入語句的正確性和一致性。例如：

• 檢查導入的模塊是否存在；
• 檢查導入路徑的大小寫是否正確；
• 檢查導入的模塊是否符合一定的命名規(guī)范；
• 檢查導入的模塊是否使用了正確的擴展名；
• 檢查導入的模塊是否存在循環(huán)依賴；
• 檢查導入的模塊是否按照一定的順序排序；
• 檢查導入的模塊是否使用了正確的導入格式（默認導入、命名導入或者批量導入）；
• 檢查導入的模塊是否使用了正確的別名；
• 檢查導入的模塊是否使用了正確的導入位置。

通過使用eslint-plugin-import插件，可以幫助開發(fā)者規(guī)范并統(tǒng)一模塊導入語句的使用，提高代碼的可讀性和維護性。

(3)eslint-plugin-promise

eslint-plugin-promise插件是用于在JavaScript代碼中檢測并提醒開發(fā)者有關Promise對象的使用問題的ESLint插件。它可以幫助開發(fā)者編寫更可靠、更可維護的異步代碼。

該插件的主要功能包括：

• 檢測Promise中的錯誤處理：可以檢查在Promise鏈中是否有錯誤處理，以避免未捕獲的Promise拒絕。這有助于防止異常在代碼中傳播。
• 檢測Promise的誤用：可以檢查不必要或錯誤的Promise使用方式，比如在沒有理由的情況下使用Promise構造函數(shù)，或者在沒有必要的情況下使用Promise的resolve或reject方法。
• 提供最佳實踐建議：可以提供關于Promise的最佳實踐的建議，例如推薦使用Promise.all和Promise.race而不是手動處理多個Promise對象。

通過使用eslint-plugin-promise插件，可以提高代碼質量，避免常見的Promise使用錯誤，并提供更好的錯誤處理和可讀性。這有助于開發(fā)者編寫更健壯和可維護的代碼。

(4) eslint-plugin-node

eslint-plugin-node是一個ESLint插件，主要用于在Node.js環(huán)境下對JavaScript代碼進行靜態(tài)代碼分析和規(guī)范檢查。它提供了一系列的規(guī)則，可以幫助開發(fā)者在開發(fā)Node.js應用時遵循最佳實踐、減少錯誤、提高代碼質量。

該插件可以用于以下方面的檢查：

• 引入模塊的規(guī)則：檢查代碼中是否存在未被使用的模塊、未被引入的模塊、循環(huán)引用等問題，避免無效的引入和模塊循環(huán)依賴。
• 文件/路徑規(guī)則：檢查文件的命名是否符合規(guī)范、文件路徑是否存在、是否使用了不推薦的文件擴展名等。
• 調用回調函數(shù)的規(guī)則：檢查回調函數(shù)是否正確使用、是否處理了錯誤，避免回調地獄和未處理的錯誤。
• 錯誤處理的規(guī)則：檢查代碼中的錯誤處理是否完善，是否統(tǒng)一處理錯誤、是否遺漏了某些錯誤處理等。
• 全局對象的規(guī)則：檢查全局對象的使用是否安全，避免污染全局命名空間和不安全的操作。
• Node.js相關的規(guī)則：檢查Node.js特定的API的使用是否正確、是否存在錯誤的使用方式、是否使用了已廢棄的API等。

通過運用eslint-plugin-node插件，開發(fā)者可以更好地保證Node.js應用的代碼質量、可讀性和可維護性，提高開發(fā)效率和代碼質量。

(5) eslint-plugin-vue

eslint-plugin-vue 是一個用于檢測和修復 Vue.js 代碼的 ESLint 插件。它通過自定義規(guī)則來提供對 Vue.js 代碼的靜態(tài)代碼分析功能，幫助開發(fā)者編寫出更規(guī)范、可維護、高效的 Vue.js 代碼。

使用 eslint-plugin-vue 插件可以幫助開發(fā)者完成以下功能：

• 檢測常見的代碼錯誤：eslint-plugin-vue 提供了一系列的規(guī)則，可以檢測常見的代碼錯誤，比如使用了未定義的變量、未使用的變量、重復的屬性等等，以幫助開發(fā)者盡早發(fā)現(xiàn)并解決這些問題。
• 提供規(guī)范的代碼風格：eslint-plugin-vue 提供了一些與代碼風格相關的規(guī)則，可以強制使用一致的縮進、換行符、引號等，保持團隊間的代碼風格一致性。
• 增強代碼的可讀性和可維護性：eslint-plugin-vue 可以檢查并修復一些常見的代碼寫法問題，比如檢測未使用的組件、未設置key的列表項、不必要的計算屬性等，幫助開發(fā)者編寫出更易讀、易維護的代碼。
• 支持自定義規(guī)則：除了提供的默認規(guī)則外，eslint-plugin-vue 還支持自定義規(guī)則的配置，開發(fā)者可以根據(jù)自己的需求對代碼進行更精細的檢查。

(6)@typescript-eslint/parser

@typescript-eslint/parser插件是用于解析TypeScript代碼的插件。它可以將TypeScript代碼轉換為抽象語法樹（AST），以便其他插件或工具可以分析、處理或修改代碼。

使用@typescript-eslint/parser插件可以提供更準確的TypeScript語法解析，確保與TypeScript最新版本的語法一致。它還支持一些新的TypeScript特性，如裝飾器和類型注解。

通過使用@typescript-eslint/parser插件，可以在ESLint中使用TypeScript規(guī)則和插件來檢查和修復TypeScript代碼的問題。這種集成可以幫助開發(fā)人員在開發(fā)過程中盡早發(fā)現(xiàn)潛在的問題，以提高代碼質量和可維護性。

(7）@typescript-eslint/eslint-plugin

@typescript-eslint/eslint-plugin是一個ESLint插件，用于提供針對TypeScript代碼的ESLint規(guī)則和功能。

它的主要用途包括：

• 靜態(tài)類型檢查：TypeScript的一個重要特點是靜態(tài)類型檢查，@typescript-eslint/eslint-plugin可以幫助你在編寫代碼時進行更嚴格的類型檢查。它包含了一些規(guī)則，可以檢查函數(shù)參數(shù)、變量賦值、類型聲明等方面的類型錯誤。
• 語法規(guī)則檢查：@typescript-eslint/eslint-plugin還包含了一些規(guī)則，用于檢查TypeScript代碼的語法規(guī)范。它可以幫助你發(fā)現(xiàn)一些不符合最佳實踐的代碼，比如使用不推薦的語法、不規(guī)范的變量命名等等。
• 代碼風格約定：ESLint可以幫助你約定一致的代碼風格，@typescript-eslint/eslint-plugin提供了一些規(guī)則，可以檢查變量命名、縮進、換行符等代碼風格方面的問題。

2. 在項目根目錄新增.eslintrc.js配置文件

eslintrc.js規(guī)則參考：https://zh-hans.eslint.org/docs/latest/rules/

當然這里面的校驗規(guī)則都是自己配置的，具體需要如何配置可以根據(jù)項目需求和團隊的代碼風格配置。

下面是一些比較常用的配置。

• extends: 用于繼承其他配置?？梢允褂妙A設的配置，如"eslint:recommended"表示使用eslint的推薦配置，也可以使用第三方的擴展配置。
• rules: 用于設置規(guī)則。可以通過設置每個規(guī)則的值來確定其行為，如"no-console": "error"表示禁止使用console，并將其視為錯誤。
• env: 用于指定代碼運行的環(huán)境?？梢允褂妙A設的環(huán)境，如"browser"表示在瀏覽器環(huán)境中運行代碼，也可以自定義環(huán)境。
• globals: 用于定義全局變量?？梢詫⑷肿兞康拿Q和其是否允許被重寫進行配置。
• parserOptions: 用于配置解析器的選項?？梢灾付ń馕銎鞯陌姹尽⒔馕鎏囟ǖ腅CMAScript特性等。
• plugins: 用于加載eslint插件?？梢允褂玫谌讲寮硗卣筫slint的功能。
• settings: 用于共享配置信息?？梢栽O置全局共享的配置信息，供不同的eslint規(guī)則使用。

贈送一波常用relse、globals配置

eslintrc.js

module.exports = {
  extends: [
 	'standard', // 繼承標準規(guī)則
  	'plugin:vue/vue3-recommended', // 如果是Vue 3的項目
    'plugin:vue/essential', // 如果是Vue 2的項目
    'plugin:@typescript-eslint/recommended'
    ], 
  parserOptions: {
    parser: '@typescript-eslint/parser',
  },
  globals: {
    Component: true, // 注冊組件
    Behavior: true, // 注冊行為
    requirePlugin: true, // 引入插件
    postMessage: true, // 向 Worker 線程發(fā)送消息
    onmessage: true, // 監(jiān)聽 Worker 線程的消息
    self: true, // Worker 線程全局對象
    importScripts: true, // 引入第三方庫
    onerror: true, // 監(jiān)聽錯誤
    onmessageerror: true, // 監(jiān)聽 Worker 線程消息錯誤
    close: true, // 關閉 Worker 線程
    open: true, // 創(chuàng)建 Worker 線程
    XMLHttpRequest: true, // ajax
    FormData: true, // ajax
    FileReader: true, // ajax
    setInterval: true, // 定時器
    setTimeout: true, // 定時器
    clearInterval: true, // 定時器
    clearTimeout: true, // 定時器
    Image: true, // 圖片
    Audio: true, // 音頻
    WebSocket: true, // WebSocket
    IntersectionObserver: true, // 監(jiān)聽節(jié)點是否進入屏幕可視區(qū)域
    Promise: true,  // Promise
  },
  rules: {
    "no-console": "off", // 允許使用console
    "no-debugger": "off", // 允許使用debugger
    "no-unused-vars": "off", // 允許聲明未使用變量
    "no-undef": "off", // 允許使用未定義變量
    "no-irregular-whitespace": "off", // 允許使用不規(guī)則的空白符
    "no-mixed-spaces-and-tabs": "off", // 允許混用tab和空格
    "no-tabs": "off", // 允許使用tab
    "no-trailing-spaces": "off", // 允許行尾有空白
    "no-multiple-empty-lines": "off", // 允許多行空白
    "no-prototype-builtins": "off", // 允許使用hasOwnProperty
    "no-async-promise-executor": "off", // 允許使用異步函數(shù)作為Promise執(zhí)行器
    "no-useless-escape": "off", // 允許使用無用的轉義符
    "no-useless-catch": "off", // 允許使用無用的catch
    "no-constant-condition": "off", // 允許使用常量作為判斷條件
    "no-empty": "off", // 允許空的代碼塊
    "no-unsafe-finally": "off", // 允許在finally中使用控制流語句
    "no-throw-literal": "off", // 允許拋出字面量錯誤
    "no-sequences": "off", // 允許使用逗號操作符
    "no-unreachable": "off", // 允許在return、throw、continue和break語句后出現(xiàn)不可達代碼
    "no-unsafe-negation": "off", // 允許對關系運算符的左操作數(shù)使用否定操作符
    "no-unsafe-optional-chaining": "off", // 允許使用不安全的可選鏈
    "no-unused-expressions": "off", // 允許使用未使用的表達式
    "no-useless-backreference": "off", // 允許使用無用的反向引用
    "no-unsafe-regex": "off", // 允許使用無效的正則表達式
    "no-regex-spaces": "off", // 允許正則表達式中使用多個空格
    "no-empty-character-class": "off", // 允許在正則表達式中使用空字符集
    "no-control-regex": "off", // 允許在正則表達式中使用控制字符
    "no-else-return": "off", // 允許在else代碼塊中return
    "no-empty-pattern": "off", // 允許解構中出現(xiàn)空的模式
    "no-extra-boolean-cast": "off", // 允許不必要的布爾類型轉換
    "no-extra-semi": "off", // 允許不必要的分號
    "no-extra-parens": "off", // 允許不必要的括號
    "no-extra-bind": "off", // 允許不必要的函數(shù)綁定
    "no-extra-label": "off", // 允許不必要的標簽
    "no-extra-boolean-cast": "off", // 允許不必要的布爾類型轉換
  },
};

3. 配置package.json，lint命令，來校驗js文件

package.json

"lint": "eslint --ext .js src/"

這行命令的意思就是

• lint: 這是命令的名稱，可以根據(jù)項目需要進行更改。
• eslint: 這是運行ESLint工具的命令。
• --ext .js: 這是命令的選項，用于指定ESLint檢查的文件擴展名，這里指定為.js表示只檢查JavaScript文件。
• src/: 這是命令的參數(shù)，指定要檢查的文件目錄，這里指定為src/表示檢查項目中的src目錄下的所有文件。

通過運行這個命令，可以對項目中的JavaScript文件進行靜態(tài)代碼分析，檢查是否符合預定義的代碼風格規(guī)則，幫助提高代碼質量和可維護性。

當然可以擴展檢查其他文件，就在.js后面用逗號分隔加就行了，比如我們還要檢查.vue文件就可以這樣寫

"lint": "eslint --ext .js,.vue src/"

4. 執(zhí)行npm run lint

npm run lint

執(zhí)行這個命令來檢查文件。

這時如果你的package.json文件中的type:module可能會報錯

這時我們將module改為commonjs就可以了

改完重新執(zhí)行npm run lint

這時它就會檢查js文件有哪些不符合規(guī)范了

針對于一些報錯，其實不影響開發(fā)規(guī)范的，我們可以禁用掉，比如我這里的這兩個報錯，這時我們可以去.eslintrc.js文件中配置rules規(guī)則

將這兩個禁用掉之后，再次執(zhí)行npm run lint

可以看到沒有任何警告和報錯，說明校驗通過拉。

5. 打包時校驗eslint

這時想在打包時校驗eslint,可以這樣配置

讓其先執(zhí)行一遍校驗，校驗通過之后再執(zhí)行打包。

三、使用prettierrc格式化文件

當我們把eslint配置文件加上之后，可能項目中很多地方會報不符合規(guī)范，這時如果手動根據(jù)提示更改，不知道要改到何年馬月了，這時推薦一款格式化代碼文件的工具Prettier

安裝之后，我們在項目根目錄下新建一個.prettierrc.js的配置文件

prettierrc.js

//此處的規(guī)則供參考，其中多半其實都是默認值，可以根據(jù)個人習慣改寫
module.exports = {
  printWidth: 80, //單行長度
  tabWidth: 2, //縮進長度
  useTabs: false, //使用空格代替tab縮進
  semi: true, //句末使用分號
  singleQuote: true, //使用單引號
  quoteProps: 'as-needed', //僅在必需時為對象的key添加引號
  jsxSingleQuote: true, // jsx中使用單引號
  trailingComma: 'all', //多行時盡可能打印尾隨逗號
  bracketSpacing: true, //在對象前后添加空格-eg: { foo: bar }
  jsxBracketSameLine: true, //多屬性html標簽的‘>'折行放置
  arrowParens: 'always', //單參數(shù)箭頭函數(shù)參數(shù)周圍使用圓括號-eg: (x) => x
  requirePragma: false, //無需頂部注釋即可格式化
  insertPragma: false, //在已被preitter格式化的文件頂部加上標注
  proseWrap: 'preserve', //不知道怎么翻譯
  htmlWhitespaceSensitivity: 'ignore', //對HTML全局空白不敏感
  vueIndentScriptAndStyle: false, //不對vue中的script及style標簽縮進
  endOfLine: 'lf', //結束行形式
  embeddedLanguageFormatting: 'auto', //對引用代碼進行格式化
};

然后我們將格式化文檔的方式，默認配置為Prettier

這樣以后我們格式化文檔時，就可以根據(jù)我們配置的prettier規(guī)則來格式化文檔，這樣可以和eslint校驗規(guī)則配合使用，輕松實現(xiàn)代碼規(guī)范。

四、git提交時執(zhí)行eslint校驗

把eslint配置完成之后，就算我們沒有解決eslint校驗產生的報錯提醒，我們照樣可以將代碼通過git提交到代碼倉庫，這樣顯然是不行。

此時我們需要一個工具可以在git提交代碼是進行校驗，它就是husky 你可以將它叫做‘哈士奇’，哈哈哈，諧音梗。

Husky 是一個用于在 Git 提交（git commit）或 git 提交代碼（git push）之前運行腳本的工具。

它允許我們在代碼提交之前執(zhí)行一些檢查、測試、格式化等操作，來保證代碼質量和規(guī)范性。

husky使用步驟

1. 安裝 Husky：

在項目根目錄下，執(zhí)行 npm install husky --save-dev 命令來安裝 Husky。

npm install husky --save-dev

2.執(zhí)行npx husky install

npx husky install

這個命令會在項目跟目錄下生成一個husky的文件夾

3. 配置提交校驗

npx husky add .husky/pre-commit “npm run lint”

這時會在husky文件夾下生成一個pre-commit文件

這段命令的含義是在前端項目中使用husky插件來添加一個pre-commit鉤子，并配置該鉤子在每次提交代碼前執(zhí)行"npm run lint"命令。

具體解釋如下：

• npx husky add：使用npx運行husky插件的add命令，用于添加一個鉤子。
• husky/pre-commit：指定要添加的鉤子的路徑，這里是pre-commit鉤子。
• npm run lint：指定在pre-commit鉤子觸發(fā)時需要執(zhí)行的命令，這里是運行l(wèi)int腳本。

通過執(zhí)行該命令，husky會幫助將指定的命令綁定到pre-commit鉤子上，這樣每次在提交代碼前，將會先執(zhí)行"npm run lint"命令來檢查代碼質量，如果代碼檢查不通過，則不允許提交。

這有助于提升團隊協(xié)作開發(fā)時代碼的質量和一致性。

總結

好啦以上就是關于如何在vite項目中配置esLint校驗的介紹啦

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論