VSCode怎么配置Prettier忽略指定文件_VSCode如何设置prettierignore排除文件不格式化【详解】

轻雪姑娘_7508

轻雪姑娘_7508

2026-04-02

976人浏览

原创

vscode中prettier不生效主因是未正确加载.prettierrcignore:需将文件置于工作区根目录,设置prettier.ignorepath为.prettierrcignore,插件版本≥10.0.0,重启窗口,并确认默认格式化工具为esbenp.prettier-vscode。

vscode怎么配置prettier忽略指定文件_vscode如何设置prettierignore排除文件不格式化【详解】

VSCode 里 Prettier 不生效,其实是没读到 .prettierignore

VSCode 默认不会自动加载项目根目录的 .prettierignore,除非你明确告诉它“这个文件存在且要被尊重”。常见现象是:你在终端里跑 prettier --write . 能正常跳过 node_modules 或 dist,但在 VSCode 里保存时这些文件仍被格式化——根本原因是 VSCode 的 Prettier 插件默认只认自己配置项,不主动查 .prettierignore。

实操建议:

  • 确保 .prettierignore 文件放在**工作区根目录**(不是用户主目录,也不是子文件夹)
  • 在 VSCode 设置里搜索 prettier.ignorePath,把它设为 .prettierignore(字符串值,不带引号)
  • 如果项目用的是 Prettier v3+,还要确认插件版本 ≥ 10.0.0,老版本对 .prettierignore 支持不完整
  • 重启 VSCode 窗口(不是重载窗口),否则改动不生效

想忽略某类文件但写错了路径,.prettierignore 语法很关键

.prettierignore 不是正则,是类似 .gitignore 的 glob 模式,路径匹配逻辑容易误解。比如写 src/*.ts 并不能忽略所有 TS 文件,因为 Prettier 匹配的是“相对于当前工作区的完整路径”,不是相对当前 ignore 文件的位置。

常见错误和写法:

  • dist/ ✅ 忽略整个 dist 目录(结尾斜杠表示目录)
  • **/*.d.ts ✅ 忽略所有声明文件(** 表示任意层级)
  • src/**/test-*.js ✅ 忽略 src 下任意子目录里以 test- 开头的 JS 文件
  • node_modules ❌ 不加斜杠可能只忽略同名文件,不是目录;应写成 node_modules/
  • ./src/index.js ❌ 开头的 ./ 会被忽略,Prettier 不支持这种写法

VSCode 保存时仍格式化被 ignore 的文件?检查是否被其他插件劫持

Prettier 插件不是唯一能触发格式化的工具。如果你装了 ESLint、TypeScript 自带格式化,或者设置了 "editor.formatOnSave": true 但没指定 defaultFormatter,VSCode 可能调用了别的 formatter,完全绕过 Prettier 和它的 ignore 规则。

VSCode
VSCode

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

下载

排查步骤:

  • 右键编辑器 → “Format Document With…” → 看当前默认 formatter 是不是 esbenp.prettier-vscode
  • 在设置里搜 editor.defaultFormatter,确保它是 esbenp.prettier-vscode,而不是 vscode.typescript-language-features
  • 关掉 ESLint 的 auto-fix-on-save(设置项:eslint.autoFixOnSave),或改用 eslint.codeAction.onSave.fixAll 配合 prettier 规则
  • 打开命令面板(Ctrl+Shift+P),运行 Developer: Toggle Developer Tools,看控制台有没有报 Failed to resolve prettier configuration 类错误

多根工作区下 .prettierignore 失效?每个文件夹得有独立配置

VSCode 的多根工作区(workspace with multiple folders)里,Prettier 插件默认只读取第一个文件夹下的 .prettierignore。如果你在第二个文件夹里编辑文件,即使它自己目录下也有 .prettierignore,也不会被识别。

解决方式有限但有效:

  • 把所有子项目的 ignore 规则合并到工作区根目录的 .prettierignore 中(推荐)
  • 或者,在 VSCode 设置里为每个文件夹单独指定 prettier.ignorePath,用绝对路径或 workspace-relative 路径(如 project-a/.prettierignore)
  • 注意:路径必须存在,否则插件静默失败,不会报错也不会提示

Prettier 的 ignore 机制本身简单,但 VSCode 的插件加载顺序、多级配置覆盖、路径解析差异,会让问题看起来像“随机失效”。最常被忽略的是:改完 .prettierignore 后没重启窗口,以及没确认当前文档的默认 formatter 真的是 Prettier。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

vscode

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
TypeScript工程化开发与Vite构建优化实践
TypeScript工程化开发与Vite构建优化实践

本专题面向前端开发者,深入讲解 TypeScript 类型系统与大型项目结构设计方法,并结合 Vite 构建工具优化前端工程化流程。内容包括模块化设计、类型声明管理、代码分割、热更新原理以及构建性能调优。通过完整项目示例,帮助开发者提升代码可维护性与开发效率。

2026.02.13

292

17

TypeScript全栈项目架构与接口规范设计
TypeScript全栈项目架构与接口规范设计

本专题面向全栈开发者,系统讲解基于 TypeScript 构建前后端统一技术栈的工程化实践。内容涵盖项目分层设计、接口协议规范、类型共享机制、错误码体系设计、接口自动化生成与文档维护方案。通过完整项目示例,帮助开发者构建结构清晰、类型安全、易维护的现代全栈应用架构。

2026.02.25

500

17

TypeScript类型系统进阶与大型前端项目实践
TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开,深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析,帮助开发者构建类型安全、结构清晰、易维护的前端工程体系,提高团队协作效率与代码质量。

2026.03.13

351

19

TypeScript 全栈开发进阶指南
TypeScript 全栈开发进阶指南

面向有 JavaScript 基础的开发者,深入讲解 TypeScript 的类型系统与全栈开发实践。

2026.06.03

266

29

TypeScript Node.js 全栈工程化与Monorepo架构实践
TypeScript Node.js 全栈工程化与Monorepo架构实践

本专题围绕 TypeScript 在 Node.js 全栈开发中的工程化实践展开,系统讲解 Monorepo 架构设计、包管理策略、模块复用机制以及服务端与前端统一类型系统的构建方法。通过真实项目案例,帮助开发者提升大型全栈项目的可维护性与协作效率。

2026.06.16

558

8

format在python中的用法
format在python中的用法

Python中的format是一种字符串格式化方法,用于将变量或值插入到字符串中的占位符位置。通过format方法,我们可以动态地构建字符串,使其包含不同值。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

2023.07.31

1689

3

python中的format是什么意思
python中的format是什么意思

python中的format是一种字符串格式化方法,用于将变量或值插入到字符串中的占位符位置。通过format方法,我们可以动态地构建字符串,使其包含不同值。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2024.06.27

1211

7

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

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

2023.08.03

1678

5

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

2023.09.04

2524

5

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程