前言

ESLint 是一個用于 JavaScript/TypeScript 代碼的靜態(tài)代碼分析工具。它的核心作用是：在代碼運行之前，自動檢查并發(fā)現(xiàn)代碼中的錯誤、潛在問題，以及強制執(zhí)行統(tǒng)一的代碼風(fēng)格規(guī)范

1.為什么需要 ESLint？—— 解決什么問題？

   比如張三喜歡用單引號，李四喜歡用雙引號

   王五寫if語句不加花括號 {}，趙六每次都加

   有人定義了變量卻沒用，有人調(diào)用了不存在的函數(shù)

   .......

   這些問題會導(dǎo)致代碼混亂、隱藏的bug、協(xié)作低效 等問題

   ESLint 就是為了解決這些問題而生的，它通過一套可配置的規(guī)則，自動將上述所有問題標(biāo)準(zhǔn)化

2.工作原理

3.1 解析：  將你的 JavaScript 代碼解析成一個抽象語法樹。這是一種用樹狀結(jié)構(gòu)來表示代碼語       法的方法，便于程序分析。

   3.2 遍歷與檢測：ESLint 攜帶一組規(guī)則，去遍歷這顆 AST 樹

• 例如，它有一條規(guī)則叫 quotes，規(guī)定字符串必須用單引號。

• 當(dāng)它遍歷到 ‘World’ 這個節(jié)點時，發(fā)現(xiàn)用的是單引號 ，通過。

• 如果它發(fā)現(xiàn)代碼里用的是 “World”（雙引號），規(guī)則就會被觸發(fā)。

   3.3 報告：ESLint 將所有觸發(fā)的規(guī)則，以錯誤或警告的形式輸出給你。

3.配置與使用

//安裝eslint
npm install eslint --save-dev

//自動生成配置文件  配置如下
npm init @eslint/config

//eslint.config.ts文件

import js from "@eslint/js";
import globals from "globals";
import tseslint from "typescript-eslint";
import pluginVue from "eslint-plugin-vue";
import { defineConfig } from "eslint/config";

export default defineConfig([
  // 1. 通用 JavaScript 規(guī)則
  { 
    files: ["**/*.{js,mjs,cjs,ts,mts,cts,vue}"], //匹配所有 JS, TS, Vue 文件
    plugins: { js }, 
    extends: ["js/recommended"], // 使用 ESLint 官方推薦的規(guī)則集，很多規(guī)則配置好的，就不需要一個個寫了，官方地址：https://eslint.org/docs/latest/rules/
    languageOptions: { 
      globals: globals.browser // 聲明瀏覽器全局變量，如 window, document
    } 
  },
  // 2. TypeScript 特定規(guī)則
  tseslint.configs.recommended,// 應(yīng)用 TypeScript-ESLint 的推薦規(guī)則
  // 3. Vue 特定規(guī)則
  pluginVue.configs["flat/essential"],// 應(yīng)用 Vue 插件的核心規(guī)則（適配 Flat Config）
  // 4. 讓 Vue 文件中的 <script> 標(biāo)簽?zāi)鼙?TypeScript 解析器正確處理
  { 
    files: ["**/*.vue"], 
    languageOptions: {
       parserOptions: { 
        parser: tseslint.parser // 告訴 Vue 插件，用 TypeScript 的解析器去解析 <script> 標(biāo)簽里的內(nèi)容
      } 
    } 
  },
]);

安裝eslint插件  --自動檢驗規(guī)則

示例1：配置一個semi規(guī)則(建議把自定義規(guī)則寫在最后，下拉滾到底可查看如何寫到最后)

• 第一個值 "error"：規(guī)則的錯誤級別。"error" (或 2) 表示會報錯并阻止程序（比如 git pre-commit hook）；"warn" (或 1) 表示只是警告；"off" (或 0) 表示關(guān)閉該規(guī)則。
• 第二個值 "always"：規(guī)則的選項。"always" 表示必須使用分號；"never" 表示禁止使用分號。

當(dāng)下面這行代碼沒有寫分號時  就會報紅

示例2：關(guān)閉某個規(guī)則

 no-explicit-any 規(guī)則會警告你：“你正在使用一個不安全的類型，這可能會隱藏潛在的 bug

如果你想關(guān)閉掉這個規(guī)則就可以這樣配置(不推薦)

"@typescript-eslint/no-explicit-any": "off"

4.ESLint 配合 Vite 設(shè)置更多規(guī)則

安裝
npm install vite-plugin-eslint --save-dev

在vite.config.ts中配置

去掉 ts 中部分 分號，npm run dev運行時就會報錯

5.注意

1. 建議把自定義規(guī)則配置在最后，這樣就能覆蓋前面的規(guī)則

2. ### 添加基于Typescript的特殊規(guī)則組 

@vue/eslint-config-typescript插件是用來驗證ts語法(比如 ts 中的一些符號會報錯，如泛型的括號)

在eslint.config.ts配置文件中的extends中添加上 @vue/eslint-config-typescript即可解決

但是在現(xiàn)代的 Vue 3 + Ts 項目中，我們不再使用它，而是使用配置文件里的 typescript-eslint 

import tseslint from "typescript-eslint";

總結(jié) 

到此這篇關(guān)于ESLint在Vue3+TypeScript中的配置與使用方法的文章就介紹到這了,更多相關(guān)Vue3+TS中配置使用ESLint內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論