搞懂ESLint图文教程，你的前端之路会顺畅很多

搞懂 ESLint：从入门到项目实战

ESLint 是一个开源的 JavaScript/TypeScript 代码检查工具，能帮你自动发现代码中的问题并统一风格。掌握它之后，你的前端开发体验会顺畅很多。

为什么需要 ESLint

没有 ESLint 时，代码容易藏 bug、风格混乱，团队协作也很痛苦。有了 ESLint，代码会自动规范化，问题在编写阶段就被拦截，能大幅减少低级错误和风格争论。

安装与初始化

在项目中安装 ESLint：

bash

1npm install eslint --save-dev

然后运行初始化向导，它会自动生成配置文件：

bash

1npx eslint --init

向导会问你几个问题：如何使用 ESLint(检查语法、发现问题、强制风格)、项目模块类型、是否用框架(React/Vue)、是否用 TypeScript、运行环境(浏览器/Node)等。回答完后会自动生成 .eslintrc.js 或 eslint.config.js 配置文件。

以常见的 .eslintrc.js 为例：

javascript

1module.exports = {

2 env: {

3 browser: true,

4 es2021: true

5 },

6 extends: "eslint:recommended",

7 parserOptions: {

8 ecmaVersion: "latest",

9 sourceType: "module"

10 },

11 rules: {

12 "semi": ["error", "always"],

13 "quotes": ["error", "double"]

14 }

15}

各字段含义：

env：指定运行环境，如 browser、node，每个环境会预设一组全局变量

extends：继承推荐规则集，eslint:recommended 会启用所有标记为"推荐"的规则

parserOptions：解析器选项，ecmaVersion 指定 ECMAScript 版本

rules：自定义规则，值可以是 "off"(0，关闭)、"warn"(1，警告)、"error"(2，报错)

运行检查与自动修复

在 package.json 中添加脚本：

json

1{

2 "scripts": {

3 "lint": "eslint src"

4 }

5}

然后运行：

bash

1npm run lint

如果只是想自动修复一些简单的格式问题(如缩进、分号)，可以加 --fix 参数：

bash

1npx eslint src --fix

集成到开发流程

ESLint 可以在三个层面介入你的工作流：

编辑器层面：在 VSCode 中安装 ESLint 插件，写代码时实时标红问题

Git Hook 层面：配合 husky + lint-staged，提交代码前自动检查暂存区文件

CI/CD 层面：在流水线中全量扫描，确保合并到主分支的代码符合规范

常见问题排查

规则不生效：检查 extends 是否正确引入，或 rules 中规则名是否拼写正确

TypeScript 报错：需要安装 @typescript-eslint/parser 和 @typescript-eslint/eslint-plugin

与 Prettier 冲突：ESLint 负责逻辑检查，Prettier 负责格式化，可配合使用，也可只用 ESLint 的格式规则

掌握 ESLint 后，你的代码质量和团队协作效率会有明显提升。建议从 eslint:recommended 开始，逐步根据项目需求调整规则。