以下是ESLint的完整功能介紹和完整使用示例演示：

ESLint 完整功能介紹

一、核心功能

1. 靜態代碼分析：

   • 通過解析JavaScript/TypeScript代碼為抽象語法樹（AST），識別語法錯誤、潛在問題（如未定義變量、未使用變量、不規范代碼等）。
   • 支持自定義規則和插件擴展，覆蓋代碼風格、邏輯錯誤、最佳實踐等。

2. 規則配置與管理：

   • 提供數千條內置規則，每條規則可配置為 off（關閉）、warn（警告）、error（錯誤）。
   • 支持通過 rules 字段自定義規則，或通過 extends 繼承預設配置（如 eslint:recommended、airbnb、google 等）。

3. 插件生態：

   • 支持插件擴展功能，如 eslint-plugin-vue 處理 Vue 文件，eslint-plugin-react 處理 React 代碼，@typescript-eslint/parser 解析 TypeScript 語法。
   • 插件可提供新增規則、環境變量、解析器等。

4. 自動化修復：

   • 通過 --fix 參數自動修復部分可修復問題（如缺少分號、縮進錯誤等）。
   • 支持集成到編輯器（如 VSCode）或構建工具（如 Webpack、Gulp）實現保存時自動修復。

5. 多環境支持：

   • 通過 env 字段指定代碼運行環境（如瀏覽器、Node.js、Jest 等），自動適配全局變量和語法特性。
   • 支持 ES6+、TypeScript、JSX 等語法，可通過 parserOptions 配置解析器和 ECMAScript 版本。

6. 配置分層與優先級：

   • 支持多種配置文件格式（.eslintrc.js、.eslintrc.json、package.json 中的 eslintConfig）。
   • 配置優先級：注釋內聯配置 > 命令行參數 > 項目配置文件 > 用戶級配置文件。

二、關鍵配置選項

1. 環境配置（env）：

   • 定義代碼運行環境，如 browser: true（瀏覽器環境）、node: true（Node.js 環境）。

2. 規則擴展（extends）：

   • 繼承預設配置，如 eslint:recommended（ESLint 推薦規則）、plugin:vue/vue3-essential（Vue 3 必備規則）。

3. 解析器（parser）：

   • 默認使用 Espree，可替換為 @babel/eslint-parser（支持 Babel 語法）或 @typescript-eslint/parser（支持 TypeScript）。

4. 插件（plugins）：

   • 啟用第三方插件，如 vue、@typescript-eslint，并調用插件提供的規則。

5. 忽略文件與目錄：

   • 通過 .eslintignore 文件忽略特定文件或目錄（語法類似 .gitignore）。

三、高級功能

1. 自定義規則：

   • 通過編寫自定義規則文件（如 rules/my-rule.js）實現個性化檢測，例如禁止特定命名或代碼模式。

2. 格式化與報告：

   • 支持多種輸出格式（如 JSON、HTML、STYLELISH），可集成到 CI/CD 流程生成代碼質量報告。

3. 緩存與性能優化：

   • 通過 --cache 參數僅檢查變更文件，提升大型項目掃描效率。

---

ESLint 完整使用示例演示

一、安裝與初始化

1. 安裝 ESLint：

   # 全局安裝（不推薦）
   npm install -g eslint# 推薦作為項目依賴安裝
   npm install eslint --save-dev
   

2. 初始化配置文件：

   npx eslint --init
   

   • 交互式選擇配置：
     • 選擇代碼風格（如 Airbnb、Standard 或自定義）。
     • 指定運行環境（如瀏覽器、Node.js）。
     • 選擇是否需要 TypeScript、Vue 等支持。
   • 生成 .eslintrc.js 文件示例：

     module.exports = {env: { browser: true, node: true, es2021: true },extends: ['eslint:recommended', 'plugin:vue/vue3-essential'],parser: 'vue-eslint-parser',parserOptions: {ecmaVersion: 'latest',sourceType: 'module',},plugins: ['vue', '@typescript-eslint'],rules: {'no-var': 'error', // 禁用 var'quotes': ['error', 'single'], // 強制單引號'semi': ['error', 'never'], // 禁用分號},
     };
     

二、配置規則與插件

1. 自定義規則：

   • 修改 .eslintrc.js 中的 rules：

     rules: {'indent': ['error', 2], // 縮進 2 空格'eqeqeq': 'error', // 強制全等'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', // 生產環境禁用 console
     }
     

2. 安裝插件：

   # 安裝 Vue 插件
   npm install eslint-plugin-vue --save-dev# 安裝 TypeScript 支持
   npm install @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev
   

三、運行 ESLint

1. 檢查代碼：

   npx eslint src/
   

   • 輸出示例：

     /src/test.js1:5   error  'a' is assigned a value but never used  no-unused-vars1:9   error  Strings must use singlequote            quotes1:14  error  Extra semicolon                         semi
     

2. 自動修復代碼：

   npx eslint src/ --fix
   

   • 修復后代碼（原代碼 var a = "哈哈哈";）：

     var a = '哈哈哈'
     

四、集成到開發工具

1. VSCode/WebStorm 集成：

   • 安裝 ESLint 插件。
   • 在 settings.json 中配置：

     {"editor.formatOnSave": true,"eslint.validate": ["javascript", "vue", "typescript"],"editor.codeActionsOnSave": { "source.fixAll.eslint": true }
     }
     

2. CI/CD 集成：

   • 在 package.json 中添加腳本：

     "scripts": {"lint": "eslint src/","lint-fix": "eslint src/ --fix"
     }
     

   • 在 CI 流程中執行 npm run lint，確保代碼質量達標。

五、高級場景

1. 臨時覆蓋規則：

   • 行內注釋禁用規則：

     console.log('Debug'); // eslint-disable-line no-console
     

   • 塊注釋禁用規則：

     /* eslint-disable no-alert */
     alert('Hello');
     /* eslint-enable no-alert */
     

2. 多配置文件合并：

   • 在不同目錄下放置不同配置文件（如 root: true 停止向上查找），ESLint 會合并有效配置。

3. 自定義格式化器：

   • 輸出 HTML 報告：

     npx eslint src/ -f html > report.html
     

---

總結

ESLint 通過靈活的配置、強大的插件生態和自動化修復能力，成為 JavaScript/TypeScript 開發中不可或缺的質量控制工具。通過合理配置規則、集成開發工具和 CI/CD 流程，可顯著提升代碼一致性和團隊協作效率。