讲师中心 微信公众号

工具推荐

视频效率加速
立刻MV
立刻MV

低成本歌曲 MV、视频生成

Laper
Laper

剧本策划到成片协作

剧云
剧云

中文短剧剧本制作平台

updream

一键生成高质量推广成片

VSCode如何配置lint-staged暂存检查_VSCode lint-staged暂存检查配置策略

落丽姑娘_5559

落丽姑娘_5559

发布时间:2026-04-01 15:33:54

|

816人浏览过

|

来源于php中文网

原创

lint-staged 不自动触发是因 Git pre-commit 钩子未正确安装;需确认 husky 是否初始化、.git/hooks/pre-commit 是否存在且可执行,并确保文件匹配路径以项目根为基准、glob 使用正斜杠、避免 VSCode 与 lint-staged 重复格式化。

vscode如何配置lint-staged暂存检查_vscode lint-staged暂存检查配置策略

lint-staged 在 VSCode 里不自动触发?检查 pre-commit 钩子是否真在运行

VSCode 本身不执行 lint-staged,它只负责调用 Git 命令;真正触发检查的是 Git 的 pre-commit 钩子。如果你点 VSCode 右下角“提交”按钮没反应,或终端里 git commit 也没跑检查,大概率是钩子根本没装上。

  • 运行 npx lint-staged --version 确认已安装(通常随 husky 或 simple-git-hooks 引入)
  • 检查 .git/hooks/pre-commit 文件是否存在且可执行(不是空文件、不是 Windows 的 .cmd 后缀残留)
  • 如果用 husky@8+,确保已执行过 npx husky install,且 package.json 里有 "prepare": "husky install" 并运行过 npm run prepare
  • VSCode 默认走系统 shell 提交,但某些终端配置(如 zsh 插件覆盖 PATH)可能导致找不到 npx,可在 VSCode 设置里加 "git.terminalAuthentication": false 强制走 GUI 提交流程(需配合 husky 正常工作)

配置 lint-staged 规则时文件匹配不到?注意 glob 模式作用域和路径基准

lint-staged 匹配的是 Git 暂存区中的相对路径(以项目根为基准),不是你当前编辑器打开的文件路径,也不是 src/ 子目录下的相对路径。常见现象:改了 src/utils/index.ts,但 "src/**/*.{ts,tsx}" 没生效。

  • 所有 glob 必须写成相对于项目根的路径,例如 "**/*.{js,jsx,ts,tsx}",而不是 "src/**/*"(除非你明确只想处理 src 下的暂存文件)
  • Windows 用户要注意反斜杠问题:"src\**\*.ts" 是错的,统一用正斜杠 "src/**/*.ts"
  • 若使用 eslint + prettier 组合,别把 prettier --write 放在 eslint --fix 前面——eslint 可能会覆盖 prettier 格式化结果,建议顺序为 eslint --fix → prettier --write
  • 示例正确配置片段:
    "lint-staged": {
      "**/*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"],
      "**/*.{json,md,yml}": ["prettier --write"]
    }

VSCode 保存时就格式化,但提交又跑一遍?避免重复操作和冲突

VSCode 的 editor.formatOnSave 和 lint-staged 都调 prettier,容易造成两次格式化、甚至因 ESLint 自动修复插入分号而与 Prettier 冲突。

VSCode
VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载
  • 推荐关闭 VSCode 的自动保存格式化(设 "editor.formatOnSave": false),把格式化权完全交给 lint-staged —— 它只处理你真正要提交的文件,更精准
  • 如果坚持保留保存时格式化,请确保 VSCode 使用的 formatter(如 esbenp.prettier-vscode)配置与 lint-staged 中一致,尤其是 prettier.printWidth、semi、singleQuote 等关键项
  • 检查 .prettierrc 和 .eslintrc.cjs 是否存在规则冲突,比如 eslint-config-prettier 没关掉 semi 规则,而 prettier 设了 semi: false,就会在提交时反复增删分号

修改后 git add . 但 lint-staged 没跑?确认暂存文件类型和 hook 执行时机

lint-staged 只对「已加入暂存区」的文件运行,且只在 git commit 这一刻触发。常见误操作:改完代码直接点 VSCode 提交按钮,但忘了先 git add。

  • VSCode 提交面板默认只提交已暂存文件(Staged Changes),如果右侧面板里没看到文件,说明还没 git add,此时点击提交不会触发 lint-staged
  • 检查 lint-staged 配置中是否漏写了目标后缀,比如改了 .vue 文件,但配置里只有 "*.js",自然跳过
  • 某些 IDE 插件(如 GitLens)可能绕过标准 Git CLI,导致钩子失效;遇到异常可尝试在终端手动运行 git add . && git commit -m "test" 验证基础流程
  • Mac 上如果用 zsh,偶尔会因 shell 函数覆盖 npx 导致钩子报 command not found: npx,可在 .husky/pre-commit 开头加 #!/usr/bin/env bash 并显式指定 /opt/homebrew/bin/npx(或你的实际路径)

最常被忽略的一点:lint-staged 不处理未被 Git 跟踪的新文件(untracked files),哪怕你 git add -N 告诉 Git “我知道这文件”,它也不会进 lint 流程——必须先 git add 再 git commit,且文件已在 .gitignore 之外。

热门AI工具

更多
Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

函子Zion

一款支持AI搭建、可视化编辑和多端发布的全栈无代码开发平台。

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

2335

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

3842

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

1276

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

4459

2025.09.10

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

4996

2023.06.20

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

1455

2023.07.28

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

1938

2023.08.03

js是什么意思
js是什么意思

JS是JavaScript的缩写,它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言,通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果,如表单验证、页面元素操作、动画效果、数据交互等。

10543

2023.08.17

Go-Zero API开发使用教程
Go-Zero API开发使用教程

本专题聚焦Go-Zero的API开发,拆解.api描述文件的语法结构、路由与分组定义、参数绑定与校验规则,说明统一响应体、JWT鉴权、跨域与接口文档生成的落地方式,并给出网关聚合与接口测试的实践建议。

20

2026.11.12

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn