说一说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"

}

}
相关推荐
Sayai2 分钟前
不重新打包,vim 直接改 jar 包内的前端文件:原理、步骤与避坑
前端·vim·jar
IT_陈寒6 分钟前
SpringBoot自动配置失效时我差点把电脑扔了
前端·人工智能·后端
天空之城--21 分钟前
Compose Multiplatform 如何做到跨平台
架构
何何____21 分钟前
web方向js考核题解
开发语言·前端·javascript
风骏时光牛马22 分钟前
AI面试复盘:沉淀经验,找准求职短板
前端
liangshanbo121522 分钟前
面试题终极整理:手写 Promise.all / Promise.allSettled
前端·javascript·promise
心易行者22 分钟前
用HTML在线运行搭后台管理系统:5个核心模块+0服务器,3天跑通完整业务
大数据·前端·网络·人工智能·python
单线程1213833 分钟前
从案例分析 Vue3 Tokenizer+Parser 源码五
前端·javascript·vue.js
神奇的程序员42 分钟前
Apple Watch S12,送一台
前端
moonsims2 小时前
Voliro 无人机-Aerial Mobile Robot(空中移动机器人):把无人机从“飞过去拍摄”,升级成“飞过去并与目标物理接触、测量甚至操作”
前端·人工智能·安全·无人机·量子计算