如何安装 ESLint 以及运行，全面详细讲解
🎯 引言
学会安装和运行 ESLint，你将能够轻松检测 JavaScript 代码中的潜在错误和风格问题，提升代码质量，使团队协作更高效。本文会带你一步步完成 ESLint 的安装和基本使用，不跳步，适合刚入门的前端小白。
🔧 ESLint 安装准备工作
首先，确保你已经安装好 Node.js 环境。你可以在终端输入：
node -v
npm -v
如果能看到版本号，说明 Node.js 和 npm 已经安装成功。
如果未安装，可以去 Node.js 官网 下载并安装最新的稳定版本。
🛠 ESLint 安装步骤详解
1. 创建项目文件夹（可选）
如果你已经有项目，可以跳过这步。新建项目示例：
mkdir my-eslint-project
cd my-eslint-project
2. 初始化项目（生成 package.json）
npm init -y
这条命令会生成一个默认配置的 package.json 文件，用来管理项目依赖。
3. 安装 ESLint
ESLint 推荐作为项目的开发依赖安装，执行：
npm install eslint --save-dev
--save-dev 参数，表示 ESLint 只在开发环境需要，避免发布时带上无关包。4. 初始化 ESLint 配置
安装完成后，使用以下命令生成 ESLint 配置文件：
npx eslint --init
你会依次看到几个问题，以下是推荐选择（✅ 表示你选择的内容）：
- 你想要检查哪些文件的代码质量？
? What do you want to lint? …
✔ JavaScript
JSON
JSON with comments
JSON5
Markdown
CSS
- 你希望 ESLint 做什么？
? How would you like to use ESLint? …
To check syntax only
✔ To check syntax and find problems
- 项目使用的模块标准？
? What type of modules does your project use? …
✔ JavaScript modules (import/export)
CommonJS (require/exports)
None of these
- 你的项目使用哪个框架？
? Which framework does your project use? …
React
Vue.js
✔ None of these
- 项目是否使用 TypeScript？
? Does your project use TypeScript? › No
- 你的代码运行在哪些环境？
? Where does your code run? … (Press <space> to select, <a> to toggle all, <i> to invert selection)
✔ Browser
Node
- 是否立即安装所需依赖？
The config that you've selected requires the following dependencies:
eslint, @eslint/js, globals
? Would you like to install them now? › No
根据你的项目需求选择即可。
配置完成后，项目根目录会生成 eslint.config.mjs 文件。
5. ESLint 配置文件示例
eslint.config.mjs 示例：
// eslint.config.js (扁平结构, 自 ESLint v9 推荐)
import js from '@eslint/js';
import globals from 'globals';
import { defineConfig } from 'eslint/config';
export default defineConfig([
{
// 匹配所有 JavaScript 文件（包括 .js, .mjs, .cjs），表示以下规则只适用于这些文件。
files: ['**/*.{js,mjs,cjs}'],
// 引入了官方提供的 @eslint/js 插件，提供了内建的 JavaScript 语法规则支持。
plugins: { js },
// 这是 @eslint/js 提供的一组 推荐规则，包括常见的代码风格、最佳实践、潜在错误检测等
extends: ['js/recommended'],
// 它会自动启用浏览器全局变量（如 window, document, console 等），防止 ESLint 报错说这些变量未定义。
languageOptions: { globals: globals.browser },
// rules（规则）是 ESLint 用来控制代码检查行为的配置项。例如设置了禁止使用分号。
rules: {
semi: ['error', 'never'],
},
},
]);
▶️ ESLint 如何运行？
1. 在命令行运行 ESLint
假设你有一个 src 文件夹，里面有代码文件。运行：
npx eslint src
ESLint 会检查 src 里所有支持的文件，输出错误和警告。
2. 运行示例解释
假设 src/index.js 代码是：
const name = '张三';
console.log(nam);
运行 ESLint 后，输出类似：
src/index.js
1:7 error 'name' is assigned a value but never used no-unused-vars
3:13 error 'nam' is not defined no-undef
✖ 2 problems (2 errors, 0 warnings)
告诉你第 1 行的 name 定义了，但是未使用，是个错误。
告诉你第 3 行的 nam 未定义，是个错误。
3. 自动修复
ESLint 提供自动修复功能，可以用参数 --fix 让它修正一些格式问题：
npx eslint src --fix
它会自动加上漏掉的分号，调整缩进等。
4. 配合 package.json 脚本
为了方便运行，可以在 package.json 添加脚本：
"scripts": {
"lint": "eslint src",
"lint:fix": "eslint src --fix"
}
以后只需运行：
npm run lint
或
npm run lint:fix
即可完成相应操作。
🔌 编辑器集成 ESLint
为在编码时实时发现潜在问题，建议为所使用的编辑器安装 ESLint 插件。
以 Cursor 为例，安装 “ESLint” 插件后，编辑器将在编码过程中自动检查代码，并在保存文件时进一步提示错误，帮助你及时修正问题、保持代码规范。
🧾 小节总结
- ESLint 是前端代码质量利器，能帮助自动检查 JavaScript 代码。
- 安装 ESLint 需要先有 Node.js 环境，然后用 npm 安装。
- 通过
eslint --init可以快速生成配置，方便定制规则。 - 可以命令行运行，也能集成于编辑器里，提升开发体验。
❓ 知识问答（Q&A）
Q： ESLint 安装后，为什么要运行 eslint --init？
A： 这是用来生成配置文件 .eslintrc，告诉 ESLint 你想用什么规则和环境。
Q： 什么场景下用 ESLint 的 --fix 参数？
A： 当你想自动修正代码格式和部分简单问题时使用，可以节省手动修改时间。
🧪 小练习
请在下面模板基础上，完成 ESLint 的安装、初始化和运行，体验检测效果。
mkdir demo-eslint
cd demo-eslint
npm init -y
npm install eslint --save-dev
npx eslint --init
然后创建 src/test.js 文件，写入：
let a = 10
console.log(a)
运行 ESLint，观察是否有缺失分号的警告，尝试用 --fix 自动修复。
🎉 恭喜你已经掌握 ESLint 安装、初始化和运行技能啦！现在你可以开始用 ESLint 帮助你写出更规范和更健康的 JavaScript 代码了。