ESLint 是前端开发中必备的代码质量工具,它像一位严格的"代码质检员",自动检查你的 JavaScript/TypeScript 代码是否符合规范,帮你养成良好编码习惯、避免低级错误、统一团队风格。下面是面向小白的超详细解析:
🧠 一、ESLint 是什么?核心作用
功能 | 解决的问题 | 实际效果 |
---|---|---|
语法错误检测 | const 写成 cosnt 、缺少分号等笔误 |
运行前揪出低级错误,省去调试时间 |
代码风格统一 | 团队中有人用双引号有人用单引号 | 自动格式化,让所有代码像一人写的 ✅ |
潜在 Bug 预防 | 使用未声明变量、修改 const 常量等风险操作 |
提前预警,减少运行时崩溃💥 |
最佳实践推荐 | 避免过时的 var 、推荐 === 替代 == |
逼你写出更健壮、更现代的代码 🚀 |
✅ 一句话总结 :ESLint 让代码更规范、更安全、更易维护!
🔧 二、安装 & 配置 ESLint(5分钟上手)
第一步:安装(用 npm 或 yarn)
bash
# 在项目根目录执行:
npm install eslint --save-dev # 本地安装(推荐)
# 或
yarn add eslint --dev
第二步:初始化配置文件
bash
npx eslint --init # 会弹出引导问答
按提示选择:
-
✅ How would you like to use ESLint?
→ 选
To check syntax and find problems
(基础功能)👉 进阶可选
...enforce code style
(包含风格检查) -
✅ What type of modules?
→ 选
JavaScript modules (import/export)
(React/Vue项目常用) -
✅ Which framework?
→ 按需选 React/Vue/None
-
✅ Does your project use TypeScript?
→ 用 TS 就选 Yes
-
✅ Where does your code run?
→ Browser (前端项目) | Node (后端)
-
Choose a code style → 选流行规范:
→ 🔷
Airbnb
(业界最严格)→ 🔶
Standard
(零配置)→ 🔹
Google
→ 或自定义
第三步:生成关键配置文件 📁.eslintrc.js
(示例)
js
module.exports = {
"env": {
"browser": true,
"es2021": true
},
"extends": "airbnb", // 继承 Airbnb 规则
"rules": {
"no-console": "warn", // 自定义:console.log 只警告不报错
"quotes": ["error", "double"] // 强制双引号
}
};
🚀 三、日常开发中如何使用 ESLint?
场景1:命令行手动检查文件
bash
npx eslint src/index.js # 检查单个文件
npx eslint src/**/*.js # 检查 src 下所有 JS 文件
场景2:自动修复可修复的问题(超实用!)
bash
npx eslint src/**/*.js --fix # 自动修复(如引号、分号等格式问题)
场景3:VS Code 实时提示(必装!)
-
安装插件 ESLint 作者发布
-
保存时自动修复配置(VS Code 设置中搜索):
json"editor.codeActionsOnSave": { "source.fixAll.eslint": true }
👉 效果:保存文件时自动修复格式化问题,错误标红提示 ⚠️

🛠 四、ESLint 配置文件详解(新手必会)
配置文件通常为 .eslintrc.js
或 .eslintrc.json
,核心字段:
js
module.exports = {
// 1️⃣ 指定环境(如浏览器、Node)
env: { browser: true, node: true },
// 2️⃣ 继承流行预设规则(避免重复造轮子)
extends: ["eslint:recommended", "plugin:react/recommended"],
// 3️⃣ 配置解析器(如支持TS、新语法)
parser: "@typescript-eslint/parser",
// 4️⃣ 插件扩展规则(如Vue、React特殊规则)
plugins: ["react", "@typescript-eslint"],
// 5️⃣ 自定义规则 (核心!)
rules: {
semi: ["error", "always"], // 必须分号
"no-var": "error", // 禁用 var
"react/prop-types": "off" // 关闭React prop类型检查
}
};
❓ 五、常见问题 & 技巧
问题1:ESLint 和 Prettier 冲突了?
👉 解决方案:
-
安装
eslint-config-prettier
关闭 ESLint 中与 Prettier 冲突的规则 -
在
.eslintrc
中添加:jsextends: ["airbnb", "prettier"]
问题2:如何忽略某些文件/代码?
-
忽略文件 :创建
.eslintignore
(类似 .gitignore)build/*.js **/vendor/**
-
忽略代码块 :
js// eslint-disable-next-line alert('跳过这一行检查'); /* eslint-disable */ console.log('整个块都不检查'); /* eslint-enable */
问题3:ESLint 报错看不懂?
- 复制错误规则名(如
no-unused-vars
) - 查官方文档:ESLint Rules
👉 规则后带 🔧 图标的表示可自动修复!!
⚡ 六、最佳实践建议
- 项目初始化必装 ESLint (和 Git 同级重要!)
- 团队统一规则 :用
extends
继承 Airbnb/Standard 避免争论 - VS Code 插件 + 保存自动修复:每天省 30 分钟
- CI/CD 集成 :提交代码自动跑
eslint
,不合格阻断合并 - 定期审查规则 :根据团队习惯通过
rules
微调
🌟 小白进阶关键 :遇到报错别慌,先理解规则设计意图(如为啥禁用
==
),这是提升代码意识的捷径!
🎯 终极配置示例(React + TS 项目)
js
// .eslintrc.js
module.exports = {
env: { browser: true, es2021: true },
extends: [
"airbnb",
"airbnb-typescript", // TS支持
"airbnb/hooks", // React Hooks 规则
"plugin:react/recommended",
"prettier" // 避免和Prettier冲突
],
parser: "@typescript-eslint/parser",
parserOptions: {
project: "./tsconfig.json" // 关联TS配置
},
plugins: ["react", "@typescript-eslint"],
rules: {
"react/react-in-jsx-scope": "off", // Next.js等不需import React
"import/prefer-default-export": "off",
"react/jsx-props-no-spreading": "warn"
}
};
立即动手配置一次,你的代码将告别野路子风格! 🚀