VSCode插件推荐有哪些_高效开发必备插件清单

这5个插件精准解决格式统一、错误拦截、协作追溯、路径补全、标签同步五大高频痛点；需Pretterr+EditorConfig协同实现跨编辑器格式一致，Auto Rename Tag同步HTML/XML标签，GitLens提供行级Git追溯，Path Intellisense智能补全本地路径。

保存就自动格式化？配对 Prettier + EditorConfig 才真省心

只装 Prettier 很容易踩坑：它默认按自己规则格式化，但团队里有人用 WebStorm、有人用 Vim，缩进用 2 还是 4、换行符是 LF 还是 CRLF，Prettier 管不了。这时候必须加装 EditorConfig for VS Code，并在项目根目录放一个 .editorconfig 文件：

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

VSCode 会优先读这个文件，再让 Prettier 在此基础上格式化。两者叠加，才能做到“保存即合规”，而不是“保存后还得手动调缩进”。

• 别依赖 Prettier 单独配置 tabWidth 来统一风格——它只作用于当前编辑器，跨编辑器失效
• EditorConfig 插件本身不格式化代码，只是“告诉 VSCode 怎么设置编辑器行为”，必须配合 Prettier 或其他 formatter 使用
• 如果项目已有 .prettierrc，确保 tabWidth 和 .editorconfig 中的 indent_size 一致，否则保存时可能来回打架

写 HTML/JSX 总是漏闭合或改错标签？Auto Rename Tag 是刚需

在 Vue 或 React 项目里改

• 它只处理成对的 HTML/XML 标签（
  ...
  ），对自闭合标签（）或 JSX 中的 Fragment（...>）无效
• Vue 单文件组件中，它对 区域生效，但对 或 里的内容无反应
• 如果发现没反应，检查是否被其他插件干扰（比如 Volar 的某些版本会与之冲突），可临时禁用 Volar 测试

查 Git 历史还要切终端？GitLens 让每行代码自带“作者身份证”

遇到一段逻辑可疑的代码，想知道“谁写的？什么时候改的？为什么这么写？”，不用退出 VSCode、敲 git blame、再切回浏览器看 commit。装 GitLens 后，把鼠标悬停在任意一行左侧空白处，立刻弹出提交哈希、作者、时间、消息摘要；右键还能直接“Compare with Previous Version”或“Open on GitHub”。

Action Figure AI

借助Action Figure AI的先进技术，瞬间将照片转化为定制动作人偶。

下载

• 默认开启的 Current Line Blame 信息有时太占空间，可在设置里关掉：gitlens.currentLine.blame.enabled 设为 false
• 大型单体仓库首次启用可能卡顿，建议打开 gitlens.advanced.caching.enabled 加速
• 它不替代 git log，但把最常查的“这一行从哪来”操作压缩到 0.5 秒内完成

import 路径总输错？Path Intellisense 补全比记忆快十倍

写 import utils from '../utils/index.ts' 时，靠脑子回忆相对路径，输错一个字母就要报错。而 Path Intellisense 在你输入引号后（如 import ... from '），自动列出当前项目下所有匹配的文件和文件夹，支持模糊搜索、Tab 切换、Enter 确认。

• 它默认只扫描工作区根目录下的文件，如果用了 tsconfig.json 的 baseUrl 或 paths 别名（如 @/components），需额外配置：path-intellisense.mappings 加入映射
• 对 require() 语句也生效，但 Node.js 的 node_modules 内部路径默认不提示（避免列表爆炸），如需开启，设 path-intellisense.showHiddenFiles 为 true
• 和 npm Intellisense 不同：后者只补全已安装的 npm 包名，而 Path Intellisense 补全是本地文件路径