lint-staged 10个实战示例ESLint、Prettier、Stylelint、Flow完美组合套路【免费下载链接】lint-staged — Run tasks like formatters and linters against staged git files项目地址: https://gitcode.com/gh_mirrors/li/lint-stagedlint-staged 是一款流行的 Git 提交前检查工具当你git add暂存文件后它只对这些改动过的文件自动运行 ESLint、Prettier 等检查和格式任务并把修复结果自动加回提交。全文通过 10 个由浅入深的实战示例手把手教你把 lint-staged 与 ESLint、Prettier、Stylelint、Flow 组合成一套提交即干净的完美工作流新手也能 10 分钟配好。一、30 秒看懂 lint-staged 为什么好用 相比对整个项目跑一遍 lintlint-staged 只盯着要提交的改动带来四个直接好处快文件少任务秒级完成提交不再卡稳任务修改后的文件会自动重新暂存不会丢改动安全默认先创建 git stash 备份出错自动恢复原状灵活用 glob 匹配文件可以挂任意命令lint、format、甚至跑测试更多背景介绍见官方文档 README.md。二、一次性安装与配置最快上手 4 步 ⚙️npm install --save-dev lint-staged npx husky init然后在.husky/pre-commit里写入一行npx lint-staged最后在package.json中添加lint-staged配置对象注意不要传文件路径参数它会自动帮你拼接{ lint-staged: { *.{js,jsx}: eslint --fix } }至此每次git commit都会先跑检查不通过就自动拦截。项目自己的配置就长这样可以参考 lint-staged.config.js。三、10 个实战示例从入门到完美组合 ✨示例 1ESLint pre-commit 基础检查最基础的用法——提交前对暂存的 JS/JSX 文件做语法与规范检查有问题直接拦截提交{ *.{js,jsx}: eslint }示例 2ESLint --fix 自动修复可修复项加上--fix后分号、引号、未使用变量等问题会被自动修好修复结果自动加入本次提交你甚至感觉不到它的存在{ *.js: eslint --fix }示例 3Prettier 全量格式化任意文件--ignore-unknown让 Prettier 跳过自己不支持的文件一行配置覆盖整个仓库的格式统一{ *: prettier --ignore-unknown --write }示例 4Prettier 指定多语言文件只想格式化代码和文档类文件用花括号语法一次列出多扩展名{ *.{js,jsx,ts,tsx,md,html,css}: prettier --write }示例 5ESLint Prettier 黄金组合数组顺序执行⭐同一 glob 下想跑多个命令用数组表示按顺序串行先eslint --fix修逻辑问题再prettier --write统一格式顺序保证不会互相打架{ *.js: [eslint --fix, prettier --write] }这是最推荐的核心套路官方文档中的 Examples 章节 也以此为例。示例 6Stylelint 检查 CSS 与 SCSSCSS 有自己的语法检查器 Stylelint可按文件类型分别指定语法{ *.css: stylelint, *.scss: stylelint --syntaxscss }示例 7PostCSS 属性排序 Stylelint 复检用数组把排序和检查串起来先跑 PostCSS 的--replace原地排序再让 Stylelint 确认通过{ *.scss: [postcss --replace, stylelint] }示例 8Flow 类型检查只跑改动文件Flow 的focus-check命令天然适合 lint-staged——只检查你改动的文件速度远快于全量 check{ *.{js,jsx}: flow focus-check }示例 9函数式配置tsc 全量类型检查不传文件参数TypeScript 有个坑直接传文件名会让tsc忽略tsconfig.json。lint-staged 支持在函数里自定义命令——直接返回不带文件参数的命令即可// lint-staged.config.js export default { *.{ts,tsx}: () tsc --noEmit, }函数的完整类型定义可查 lib/config.d.ts。示例 10并行任务与 glob 冲突的终极解法 两个 glob 都写文件时会发生竞态如*跑 prettier、*.ts跑 eslint --fix 同时改一个文件。官方推荐用取反 glob 数组顺序彻底解决想提速时把命令再套一层数组即可并行执行{ !(*.ts): prettier --write, *.ts: [eslint --fix, prettier --write] }{ *.ts: [[prettier --write, eslint]], *.md: prettier --write }四、新手避坑速查表 场景建议想看全部任务的报错加--continue-on-error跑完再汇总失败调试我的文件为什么没被匹配加--debug查看文件列表与执行的命令monorepo 多包项目每个包放独立配置文件自动匹配最近的配置命令参数过长常见于 Windows用--max-arg-length控制分片升级大版本遇到不兼容查阅迁移指南 MIGRATION.md写在最后lint-staged 的价值不在于再装一个工具而是把ESLint 查规范、Prettier 管格式、Stylelint 管样式、Flow 管类型这四件事按正确的顺序编排到提交环节。从示例 1 开始逐步叠加你的仓库将在不知不觉中保持干净——不让任何代码便便溜进提交历史 。【免费下载链接】lint-staged — Run tasks like formatters and linters against staged git files项目地址: https://gitcode.com/gh_mirrors/li/lint-staged创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考