说一说ESLint+Prettier生效的原理

面试中常见问法:

  • 你们项目里 ESLint、Prettier 是怎么生效的?
  • Husky 和 lint-staged 分别是做什么的?
  • npm run prepare 做了什么?
  • 为什么提交前只检查暂存文件,而不是全项目?
  • ESLint 和 Prettier 有什么区别?
  • 如果 git commit 被拦截了,你会怎么排查?
  • eslint --fixprettier --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 中添加需要校验的文件类型:

json 复制代码
{

"lint-staged": {

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

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

}

}
相关推荐
FII工业富联科技服务1 小时前
工业设备运维如何Agentic化?拆解Factory Brain的设备运维架构
大数据·运维·人工智能·架构·制造
石小石Orz2 小时前
我发现了开发者AI产品营收的新方向
前端·虚拟现实
老马识途2.02 小时前
关于跨域问题的总结
java·前端
qq29532 小时前
2026 财搭子决策模拟器:多智能体投研架构能力拆解
大数据·人工智能·架构
别惊醒渔人4 小时前
Vue3 Diff 优化:最长递增子序列 LIS
前端·javascript·vue.js
颜酱4 小时前
07 | 把字段与指标同步到 Qdrant(生成阶段)
前端·人工智能·后端
用户059540174464 小时前
把AI长期记忆测试从手动验证换成pytest,2天揪出11个隐藏Bug
前端·css
lichenyang4535 小时前
从 Vite 空项目到 AIGC 图片工作台:我如何打通生图、任务轮询、生成库与 Canvas 动态特效
前端·人工智能
泡沫冰@6 小时前
上章节中文件的讲解
前端·网络·nginx
进击的丸子6 小时前
APP人脸识别增值版Harmony Demo实操与关键代码解析
前端·程序员·harmonyos