说一说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 中添加需要校验的文件类型:

json 复制代码
{

"lint-staged": {

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

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

}

}
相关推荐
何何____18 分钟前
Vue 全局事件总线详解
前端·javascript·vue.js
程序员清风38 分钟前
企业级 AI 中台架构:模型、知识库、Agent 与业务系统
人工智能·架构
幽络源小助理40 分钟前
WordPress REST API 深度实战:从自定义端点到 Headless CMS 架构全拆解
架构·状态模式
微三云生态系统架构师-彭丹1 小时前
消费返物业费系统商家让利归因引擎:多渠道核销与自动对账架构
架构·系统架构·智慧社区·消费返物业费系统·分账引擎·物业金·多渠道归因
涉密IT资质笔记1 小时前
涉密人员脱密期管理规范:期限分级模型、就业限制边界与违规认定标准
java·服务器·前端·网络·数据库
u0111026751 小时前
工具页案例图如何编写 alt让图片说明与处理场景对应
java·前端·javascript·图像处理·人工智能·算法·ai作画
事圆则缓1 小时前
Flutter 状态管理框架对比(五):GetX 的响应式、依赖注册与生命周期
前端·javascript·flutter
海宇服务1 小时前
零信任架构实战:基于海宇车辆出险记录核验构建自动化车险流转网关
运维·人工智能·架构·自动化
AI_Auto2 小时前
数字化转型实践方法⑦|DX阶段二:课题分级,分清改善、战略转型还是商业模式重构
人工智能·架构·制造
找了一圈尾巴2 小时前
Agent 运行时架构发展
人工智能·架构