前言

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

1.為什么需要 ESLint？—— 解決什么問(wèn)題？

   比如張三喜歡用單引號(hào)，李四喜歡用雙引號(hào)

   王五寫(xiě)if語(yǔ)句不加花括號(hào) {}，趙六每次都加

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

   .......

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

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

2.工作原理

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

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

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

• 當(dāng)它遍歷到 ‘World’ 這個(gè)節(jié)點(diǎn)時(shí)，發(fā)現(xiàn)用的是單引號(hào) ，通過(guò)。

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

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

3.配置與使用

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

//自動(dòng)生成配置文件  配置如下
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ī)則配置好的，就不需要一個(gè)個(gè)寫(xiě)了，官方地址：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插件  --自動(dòng)檢驗(yàn)規(guī)則

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

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

當(dāng)下面這行代碼沒(méi)有寫(xiě)分號(hào)時(shí)  就會(huì)報(bào)紅

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

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

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

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

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

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

在vite.config.ts中配置

去掉 ts 中部分 分號(hào)，npm run dev運(yùn)行時(shí)就會(huì)報(bào)錯(cuò)

5.注意

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

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

@vue/eslint-config-typescript插件是用來(lái)驗(yàn)證ts語(yǔ)法(比如 ts 中的一些符號(hào)會(huì)報(bào)錯(cuò)，如泛型的括號(hào))

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

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

import tseslint from "typescript-eslint";

總結(jié) 

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

最新評(píng)論