一条规则三要素：手把手配 ESLint。强制团队写出统一风格的代码

痛点回顾

你是否在项目中遇到过：

• 同一个文件里缩进用 4 空格，另一文件却用 2 空格；
• 有人使用单引号，有人使用双引号；
• 有些地方漏了分号，而有些地方多加了；
• 代码审查时总是纠结格式，却忽略了业务逻辑。话说回来，

ESLint 就是为了解决这些痛点而生。

项目概览

Demo 名称：eslint-demo

• eslint.config.mjs – 配置文件
• index.mjs – 被检查的演示代码
• package.json – 依赖与 lint 脚本
• readme.md – 项目说明

关键技术点快速梳理表格

主要知识点这方面。先看懂配置文件长啥样

Eslint 的新配置文件名为eslint.config.mjs,内容如下：

import js from "@eslint/js";import globals from "globals";import tseslint from "typescript-eslint";import pluginReact from "eslint-plugin-react";import { defineConfig } from "eslint/config";
说起来，export default defineConfig(,plugins:{ js },extends:,languageOptions:{ globals: globals.node },rules:{
// 错误 => 报红色错误
// 警告 => 黄色警告
// off => 不检查
"no-var":。// 禁止 var
"no-console":,// 开发调试可允许，但上线前提醒
"quotes":,// 双引号统一
"semi"这方面，// 必须加分号
"indent": // 缩进四个空格
}
},tseslint.configs.recommended,pluginReact.configs.flat.recommended,]);按理说，

规则名即 ESLint 内置或插件提供的标识符。用来决定“检查什么”，再看常见例子，

• "no-var" – 禁止使用 var 声明变量。
• "no-console" – 禁止 console.log 等输出。
• "quotes" – 强制统一使用双/单引号。
• "semi" – 强制语句末尾添加分号。
• "indent" – 强制统一缩进空格数。按理说，

了解规则名后你就能知道 ESLint 会去检测哪些编码习惯。说起来，

级别决定违反规则时 ESLint 的反馈态度，可通过数字或字符串两种写法：

写法类型	含义 & 效果
数字写法	0 = off – 完全关闭该规则 1 = warn – 黄色警告。不阻止运行 2 = error – 红色错误，可阻止提交/运行
字符串写法	"off","warn","error"

不是所有规则都只需要开关，还可能需要进一步指定细节，如引号类型或缩进数。这时将 ruleName 与 level 包装成数组，并在后面添加参数：

"quotes":,// 双引号统一
"semi"这方面。// 必须有分号
"indent": // 四个空格缩进

Eslint 的真实项目往往不需要从基础开始写每条 rule，而是直接引用成熟的 preset，接下来再根据团队需求覆盖部分。再看例如，

export default defineConfig();

This file intentionally contains a few issues to illustrate how ESLint catches m:

let name = "dcx";function hello {
console.log;}
hello，After running `npm run lint`,you will see:


`console.log` → triggers `no-console` . The message reminds you of a debug statement that should be removed before release.

`let` is used instead of `var`,so `no-var` does not report. If you had added `prefer-const`,it would flag that `name` never changes.






{
"scripts":{
"lint"的观点是。"eslint . --fix"
},"devDependencies":{
"@eslint/js":"+","eslinter",...
}
}



Key points:


`--fix` automatically corrects all fixable issues .

The listed packages must exist in devDependencies or linting will fail.







`Flat Config` - 简洁明了的一层数组结构，让你一次性看到所有配置。

`Rule = name + level + options` - 三要素清晰划分，使你快速定位问题根源。

`Preset + Override` - 用现成套装省时再根据团队规范微调即可。

`--fix` - 一键自动修复，明显提高审查效率并减少人为疏漏。




P.S.



Solve it quickly:
bash
# 克隆仓库并进入子目录
git clone https://gitee.com/dcx2758/ai_doubao_dcx.git && cd ai_doubao_dcx/backend/eslint-demo
# 安装依赖
npm install
# 执行 lint 并自动修复
npm run lint