ESLint 是什么？——編程獅帶你輕松入門

編程獅（w3cschool.cn） 2025-08-15 14:57:03 瀏覽數(shù) (967)

反饋

什么是 ESLint？

ESLint 是一個開源的 JavaScript/TypeScript 靜態(tài)代碼分析工具，用于檢測代碼中的潛在錯誤、統(tǒng)一編碼風格并推行最佳實踐。它通過解析代碼生成抽象語法樹（AST），結(jié)合配置的規(guī)則集進行模式匹配，最終輸出問題報告或自動修復。以下是其核心要點：

?? 1、核心作用

①. 錯誤檢測
發(fā)現(xiàn)語法錯誤、未定義變量、錯誤比較等常見問題，例如：

   console.log(a); // ESLint 報錯：'a' is not defined

②. 代碼風格統(tǒng)一
強制團隊遵守一致的縮進、引號、分號等規(guī)則，例如配置單引號：

   "rules": { "quotes": ["error", "single"] } // 強制使用單引號

③. 推行最佳實踐
禁止使用高危操作（如 eval()），推薦現(xiàn)代語法（如用 const/let 替代 var）。

④. 自動修復
通過 eslint --fix 自動修復可糾正的問題（如縮進調(diào)整、分號補全）。

?? 2、技術(shù)特性

①. 高度可配置

支持配置文件（.eslintrc.js、package.json）定義規(guī)則。
規(guī)則等級可設(shè)為 off、warn 或 error。

②. 擴展性強

插件系統(tǒng)：支持 React（eslint-plugin-react）、Vue（eslint-plugin-vue）等框架。
共享配置：直接繼承社區(qū)規(guī)范（如 eslint-config-airbnb）。

③. 多環(huán)境適配
通過 env 配置指定運行環(huán)境（如瀏覽器、Node.js）：

   "env": { "browser": true, "node": true }

④. 支持現(xiàn)代語法
配合解析器（如 @typescript-eslint/parser）可檢查 TypeScript、JSX 等代碼。

??? 3、工作原理

①. 解析代碼
使用 Espree 解析器將代碼轉(zhuǎn)換為 AST（抽象語法樹）。
②. 遍歷 AST
根據(jù)規(guī)則集掃描 AST 節(jié)點，識別不符合規(guī)則的代碼模式。
③. 報告與修復
輸出問題列表，并自動修復部分問題（如添加分號）。

?? 3、使用場景

場景	說明
團隊協(xié)作	統(tǒng)一代碼風格，減少 Review 成本
框架開發(fā)	通過插件支持 React/Vue 的特定規(guī)則
結(jié)合 Prettier	ESLint 負責質(zhì)量檢查，Prettier 負責格式化，二者互補
CI/CD 集成	在流水線中運行檢查，確保代碼合規(guī)才部署

?? 5、對比同類工具

特性	ESLint	Prettier
核心功能	代碼質(zhì)量檢查	代碼格式化
規(guī)則靈活性	高度可配置	有限配置
自動修復	支持部分修復	完全重寫格式
擴展性	豐富的插件生態(tài)	較少擴展

二、為什么要認識 ESLint？

很多零基礎(chǔ)小白寫完第一段 JavaScript 都會遇到尷尬：

代碼能跑，但縮進亂成“麻花”；
變量名拼錯，瀏覽器控制臺才告訴你“xxx is not defined”；
團隊里 3 個人 4 種風格，合并代碼全是沖突。

ESLint 就是解決這些痛點的“代碼體檢中心”。它會靜態(tài)掃描你的 JS/TS 文件，在敲代碼階段就把錯誤、風格問題、最佳實踐一次性指出來，讓 bug 在運行前就現(xiàn)形。

三、ESLint 核心概念（一句話記）

規(guī)則（Rule）：一條條“代碼規(guī)范”，如“必須使用 2 個空格縮進”。
配置（Config）：把規(guī)則打包成“套餐”，官方推薦套餐叫 eslint:recommended。
插件（Plugin）：社區(qū)貢獻的額外規(guī)則包，比如檢查 Vue/React 的特殊語法。

四、5 分鐘極速上手（含中文注釋示例）

本例演示在TRAE編程 AI IDE 里從零跑通 ESLint，步驟通用， VS Code 同理。

步驟 1：準備項目

# 在編程獅終端輸入
npm init -y               # 生成 package.json
npm install -D eslint     # 安裝到開發(fā)依賴

步驟 2：一鍵生成配置

npx eslint --init

按提示選擇：

使用 ESLint 哪些語法？→ 選 JavaScript modules (import/export)
運行環(huán)境？→ 瀏覽器 + Node
是否使用官方推薦規(guī)則？→ 是
完成后自動生成 eslint.config.js，內(nèi)容如下（已加中文注釋）：

// eslint.config.js
import js from '@eslint/js';


export default [
  js.configs.recommended,          // 官方推薦規(guī)則套餐
  {
    rules: {
      'no-unused-vars': 'warn',    // 未使用變量 → 黃色警告
      'indent': ['error', 2],      // 縮進必須為 2 空格 → 紅色報錯
      'quotes': ['error', 'single'] // 字符串必須用單引號
    }
  }
];

步驟 3：寫一段有問題的代碼
新建 demo.js：

const name = '編程獅';
function sayHi() {
    console.log("Hi," + name);   // 雙引號 + 4 空格縮進
}
sayHi();

步驟 4：運行檢查

npx eslint demo.js

終端輸出：

demo.js
  3:1  error  Expected indentation of 2 spaces but found 4  indent
  4:16 warning  Strings must use singlequote                    quotes
? 2 problems (1 error, 1 warning)

每條提示都給出“行號:列號 + 規(guī)則名”，小白一眼定位。

步驟 5：自動修復

npx eslint demo.js --fix

ESLint 會把雙引號改為單引號、縮進改為 2 空格，無需手動改。

五、常見問題 & 小白錦囊

“紅色波浪線”沒出現(xiàn)？
在 VS Code 裝插件 “ESLint”，并確認右下角 ESLint 狀態(tài)為 ?。
與 Prettier 沖突？
安裝 eslint-config-prettier 把格式規(guī)則交給 Prettier，ESLint 只管邏輯。
中文注釋被誤報？
在規(guī)則里加 'no-irregular-whitespace': 'off' 即可。