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

}

}
相关推荐
曹牧9 小时前
C#:空合并运算符
java·前端·数据库
吴建旭 智宅焕9 小时前
智能家居交付计价模型的设计与实现:按时间计费与交付确定性架构
架构·智能家居
小羊没烦恼!9 小时前
铁道部新客票系统设计(二)
开发语言·前端·数据库·python·oracle·c#·php
智能直播12 小时前
RK3518:1.5G 内存 + 8G 存储,如何跑起硬件编解码、Web、AI 识别、绿幕特效
前端·人工智能·5g
掘金酱13 小时前
【10.24 特别活动】AI 时代,程序员的新饭碗在哪里?
前端·人工智能·后端
excel13 小时前
多进程环境下使用 PM2 部署 Socket.IO:需要注意什么
前端
这个DBA有点耶14 小时前
深入 OLTP 锁与并发:从行锁到分布式事务的一致性权衡
数据库·架构·产品
IT_陈寒14 小时前
Redis的原子性竟然失效了?记一次分布式锁翻车实录
前端·人工智能·后端
MobotStone14 小时前
AI 写代码越来越爽,但程序员可能越来越废了
人工智能·设计模式
墨子夕15 小时前
设计模式——Java × Python 双语言精讲 · 23 个经典模式 + 现代演进(前言篇)
java·开发语言·设计模式