lint-staged 10个实战示例：ESLint、Prettier、Stylelint、Flow完美组合套路

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-staged

lint-staged 是一款流行的 Git 提交前检查工具：当你git add暂存文件后，它只对这些改动过的文件自动运行 ESLint、Prettier 等检查和格式任务，并把修复结果自动加回提交。全文通过 10 个由浅入深的实战示例，手把手教你把 lint-staged 与 ESLint、Prettier、Stylelint、Flow 组合成一套"提交即干净"的完美工作流，新手也能 10 分钟配好。

一、30 秒看懂 lint-staged 为什么好用 🚀

相比对整个项目跑一遍 lint，lint-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 个实战示例：从入门到完美组合 ✨

示例 1：ESLint pre-commit 基础检查

最基础的用法——提交前对暂存的 JS/JSX 文件做语法与规范检查，有问题直接拦截提交：

{ "*.{js,jsx}": "eslint" }

示例 2：ESLint --fix 自动修复可修复项

加上--fix后，分号、引号、未使用变量等问题会被自动修好，修复结果自动加入本次提交，你甚至感觉不到它的存在：

{ "*.js": "eslint --fix" }

示例 3：Prettier 全量格式化任意文件

--ignore-unknown让 Prettier 跳过自己不支持的文件，一行配置覆盖整个仓库的格式统一：

{ "*": "prettier --ignore-unknown --write" }

示例 4：Prettier 指定多语言文件

只想格式化代码和文档类文件？用花括号语法一次列出多扩展名：

{ "*.{js,jsx,ts,tsx,md,html,css}": "prettier --write" }

示例 5：ESLint + Prettier 黄金组合（数组顺序执行）⭐

同一 glob 下想跑多个命令，用数组表示"按顺序串行"：先eslint --fix修逻辑问题，再prettier --write统一格式，顺序保证不会互相打架：

{ "*.js": ["eslint --fix", "prettier --write"] }

这是最推荐的核心套路，官方文档中的 Examples 章节 也以此为例。

示例 6：Stylelint 检查 CSS 与 SCSS

CSS 有自己的"语法检查器" Stylelint，可按文件类型分别指定语法：

{ "*.css": "stylelint", "*.scss": "stylelint --syntax=scss" }

示例 7：PostCSS 属性排序 + Stylelint 复检

用数组把"排序"和"检查"串起来：先跑 PostCSS 的--replace原地排序，再让 Stylelint 确认通过：

{ "*.scss": ["postcss --replace", "stylelint"] }

示例 8：Flow 类型检查只跑改动文件

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" }

四、新手避坑速查表 📋

写在最后

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