如何优化VSCode性能提高代码格式化执行速度

阿墨吖_5569

阿墨吖_5569

2026-09-23

784人浏览

原创

prettier-vscode格式化慢主因是执行环境低效而非插件本身卡顿:文件监听未排除node_modules/dist、多格式化扩展冲突、monorepo根目录误触发全量解析;应配置files.watcherexclude、禁用eslint等冲突扩展、启用prettier缓存并限制作用域。

如何优化vscode性能提高代码格式化执行速度

prettier-vscode 格式化慢,不是插件本身“卡”,而是它被拖进了一个低效的执行环境里。关掉几个配置、删掉几行监听、禁用一个扩展,速度常能提升 2–5 倍。

为什么 prettier-vscode 会变慢?

格式化触发后,VSCode 实际要干三件事:扫描文件变更 → 解析 AST → 调用 Prettier 核心重写代码。前两步最容易被拖累: - 文件监视器(files.watcherExclude 没配)持续监听 node_modulesdist,导致事件队列堆积,主线程卡住 - 多个格式化类扩展(如 ESLintBeautify)同时注册 onSave 钩子,互相竞争资源 - 工作区打开的是整个 monorepo 根目录,而不是具体子包,prettier-vscode 会尝试为所有语言文件加载解析器

files.watcherExclude 必须配,且优先级高于 search.exclude

这是最常被忽略、效果最立竿见影的一环。VSCode 底层用的是操作系统原生文件监听机制(inotify / fsevents),一旦监听路径里包含百万级文件的目录,编辑器就容易假死。

.vscode/settings.json 中加入:

{
  "files.watcherExclude": {
    "**/node_modules/**": true,
    "**/dist/**": true,
    "**/build/**": true,
    "**/.git/**": true,
    "**/logs/**": true,
    "**/coverage/**": true
  }
}
  • files.watcherExclude 是内核级过滤,生效在 VSCode 主线程之前;search.exclude 只影响搜索面板,对格式化无感
  • Windows 用户若仍卡顿,可加一行:"files.useExperimentalFileWatcher": false,回退到稳定版监听器
  • 别只信文档说的“排除 node_modules”——如果你项目里有 packages/*/distapps/*/public,也要手动加上

禁用冲突扩展比调参数更有效

prettier-vscodeESLint 插件默认都监听 onSave,但它们的执行没有顺序保证。你可能看到控制台报错:Failed to format: Error: Cannot find module 'prettier',其实是 ESLint 先抢跑了,把 Prettier 的模块缓存搞乱了。

建议操作:

VSCode
VSCode

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

下载
  • 运行命令 Extensions: Show Running Extensions,看哪些扩展占 CPU >10% —— 特别盯住带 “Auto Format”、“On Type”、“Live Preview” 字样的
  • 临时禁用 ESLint,改用 "editor.codeActionsOnSave": { "source.fixAll.eslint": true },让修复动作由 Prettier 触发后统一调度
  • 彻底卸载 JavaScript BoosterAuto Rename Tag 这类高频 DOM 监听型扩展,它们和格式化共享同一事件循环

启用 Prettier 缓存并限制作用域

Prettier 自带文件内容哈希缓存,但 VSCode 插件默认不开启。没缓存时,每次保存都重新 parse + print,哪怕文件一字未改。

在项目根目录加 .prettierrc,确保含以下字段:

{
  "cache": true,
  "cacheLocation": ".prettiercache"
}
  • 缓存文件 .prettiercache 会记录每个文件的最后修改时间与 AST 哈希,跳过未变更文件的格式化
  • 配合 "prettier.requireConfig": true 设置,避免插件在无配置时 fallback 到全局默认规则(那会强制加载全部解析器)
  • 如果只对 src 下的 TS/JS 文件格式化,直接在 .prettierignore 里写 **/*.test.ts**/types/**,比靠 VSCode 语言检测更可靠

prettier-vscode 的性能瓶颈从来不在“格式化逻辑”,而在它被塞进了太多不该监听的路径、不该协作的扩展、不该参与的文件。真正的优化,是做减法,不是堆配置。

相关文章

数码产品性能查询
数码产品性能查询

该软件包括了市面上所有手机CPU,手机跑分情况,电脑CPU,电脑产品信息等等,方便需要大家查阅数码产品最新情况,了解产品特性,能够进行对比选择最具性价比的商品。

下载

相关标签:

vscode性能优化 vscode

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

相关专题

更多
vscode是什么_vscode怎么安装配置
vscode是什么_vscode怎么安装配置

VS Code(Visual Studio Code)是一款免费、开源的跨平台代码编辑器,由微软开发和维护。它被广泛用于软件开发和编程,支持多种编程语言和框架。VS Code 同时提供了丰富的功能和扩展性,使开发者可以高效地编写、编辑和调试代码。

2023.06.30

1155

18

vscode怎么运行代码
vscode怎么运行代码

vscode是一个运行于MacOS X、Windows和Linux之上的,针对于编写现代Web和云应用的跨平台源代码编辑器;vscode免费而且功能强大,对JavaScript和NodeJS的支持非常好,自带很多功能,例如代码格式化,代码智能提示补全、Emmet插件等。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

2023.07.21

2312

3

vscode使用的框架介绍
vscode使用的框架介绍

VSCode是一款跨平台代码编辑器,它基于Electron框架和Monaco Editor构建。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.14

1809

12

vscode一般用来写什么语言
vscode一般用来写什么语言

VSCode是一款功能强大的代码编辑器,支持多种编程语言和文件格式。它内置对 JavaScript、Python、Java、C++、TypeScript、HTML/CSS、Go 等语言的支持。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.14

1607

8

vscode可以写什么语言
vscode可以写什么语言

vscode是一款强大的代码编辑器,支持多种编程语言的开发。通过安装扩展,可以为 JavaScript/TypeScript、Python、Java、C#、PHP、Go、Ruby、Rust、HTML/CSS 等语言提供智能代码补全、调试和格式化等功能。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.15

2487

12

vscode中文设置方法
vscode中文设置方法

方法一:在设置页面中,搜索“locale”,并选择“zh-cn”。方法二:按“Ctrl Shift P”快捷键,输入“Configure Display Language”,将语言修改为“zh-cn”。如果上述方法无效,可考虑安装中文插件。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.15

1778

14

vscode用途介绍
vscode用途介绍

Visual Studio Code(VSCode)是一款由 Microsoft 开发的多功能文本编辑器,适用于各种编程语言。作为一款开源软件,VSCode 拥有代码高亮、自动补全、调试、Git 集成等强大功能,成为程序员不可或缺的工具。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.15

1202

10

vscode和visualstudio的区别
vscode和visualstudio的区别

Visual Studio是一款功能强大的集成开发环境(IDE),适用于专业开发人员进行复杂项目的构建。而VSCode则是一款轻量级的代码编辑器,更适合各种规模的项目开发。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.15

1076

8

vscode设置中文界面不生效解决方法
vscode设置中文界面不生效解决方法

vscode设置中文界面不生效解决方法:安装中文语言包、通过命令面板设置语言、检查 locale.json 设置、重新安装中文语言包、检查 VSCode 版本和更新、排除插件冲突、检查系统语言设置、查看 VSCode 日志和错误消息、重置 VSCode 设置、查看官方文档和社区支持。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.15

414

5

热门下载

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

精品课程

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