说一说ESLint+Prettier生效的原理

面试中常见问法：

• 你们项目里 ESLint、Prettier 是怎么生效的？
• Husky 和 lint-staged 分别是做什么的？
• npm run prepare 做了什么？
• 为什么提交前只检查暂存文件，而不是全项目？
• ESLint 和 Prettier 有什么区别？
• 如果 git commit 被拦截了，你会怎么排查？
• eslint --fix 和 prettier --write 有什么区别？

项目里 ESLint 和 Prettier 主要通过两种方式生效：一种是手动执行 npm scripts，另一种是提交前通过 Git hooks 自动触发。

在控制台手动执行指令： 比如 npm run lint 实际执行的是 eslint .，ESLint 会读取项目根目录下的 eslint.config.js，加载对应规则，比如 Antfu 的 ESLint 配置，用来检查 Vue、TypeScript、JavaScript 等文件。

Prettier 类似，npm run format 实际执行的是 prettier . --write，它会读取 .prettierrc 和 .prettierignore，按照统一规则格式化文件

git commit 触发

提交前自动检查是通过 Husky 和 lint-staged 实现的。 Husky 负责接管 Git hook，比如 pre-commit；

lint-staged 负责读取本次已经 git add 到暂存区的文件， 在 package.json 中添加需要校验的文件类型：

{

"lint-staged": {

"*.{js,jsx,ts,tsx,vue}": "eslint --fix",

"*.{css,scss,less,html,json,jsonc,md,yml,yaml}": "prettier --write"

}

}