这5个插件精准解决格式统一、错误拦截、协作追溯、路径补全、标签同步五大高频痛点;需Pretterr+EditorConfig协同实现跨编辑器格式一致,Auto Rename Tag同步HTML/XML标签,GitLens提供行级Git追溯,Path Intellisense智能补全本地路径。
Prettier、ESLint、GitLens、Path Intellisense、Auto Rename Tag 这 5 个插件,覆盖了格式统一、错误拦截、协作追溯、路径补全和标签同步这五类高频痛点,装完就能明显减少“手抖写错”“找不到文件”“改了开头忘闭合”“提交前被队友吐槽空格不一致”这类低级但高频的问题。
保存就自动格式化?配对 Prettier + EditorConfig 才真省心
只装
很容易踩坑:它默认按自己规则格式化,但团队里有人用 WebStorm、有人用 Vim,缩进用 2 还是 4、换行符是 LF 还是 CRLF,
管不了。这时候必须加装
,并在项目根目录放一个
文件:
VSCode 会优先读这个文件,再让
在此基础上格式化。两者叠加,才能做到“保存即合规”,而不是“保存后还得手动调缩进”。
别依赖
单独配置
来统一风格——它只作用于当前编辑器,跨编辑器失效
插件本身不格式化代码,只是“告诉 VSCode 怎么设置编辑器行为”,必须配合
或其他 formatter 使用
如果项目已有
,确保
和
中的
一致,否则保存时可能来回打架
写 HTML/JSX 总是漏闭合或改错标签?Auto Rename Tag 是刚需
在 Vue 或 React 项目里改
并重命名,不仅慢,还容易漏掉嵌套里的同名标签。装了
后,光标停在开始标签任意位置,一改,对应闭合标签实时同步。
php版微信js-sdk支付接口类
php版微信js-sdk支付接口类
下载
它只处理成对的 HTML/XML 标签(
),对自闭合标签(
)或 JSX 中的 Fragment(
)无效
Vue 单文件组件中,它对
区域生效,但对
或
里的内容无反应
如果发现没反应,检查是否被其他插件干扰(比如
的某些版本会与之冲突),可临时禁用 Volar 测试
查 Git 历史还要切终端?GitLens 让每行代码自带“作者身份证”
遇到一段逻辑可疑的代码,想知道“谁写的?什么时候改的?为什么这么写?”,不用退出 VSCode、敲
、再切回浏览器看 commit。装
后,把鼠标悬停在任意一行左侧空白处,立刻弹出提交哈希、作者、时间、消息摘要;右键还能直接“Compare with Previous Version”或“Open on GitHub”。
默认开启的
信息有时太占空间,可在设置里关掉:
设为
大型单体仓库首次启用可能卡顿,建议打开
加速
它不替代
,但把最常查的“这一行从哪来”操作压缩到 0.5 秒内完成
import 路径总输错?Path Intellisense 补全比记忆快十倍
写
时,靠脑子回忆相对路径,输错一个字母就要报错。而
在你输入引号后(如
),自动列出当前项目下所有匹配的文件和文件夹,支持模糊搜索、Tab 切换、Enter 确认。
它默认只扫描工作区根目录下的文件,如果用了
的
或
别名(如
),需额外配置:
加入映射
对
语句也生效,但 Node.
js
的
内部路径默认不提示(避免列表爆炸),如需开启,设
为
和
不同:后者只补全已安装的
npm
包名,而 Path Intellisense 补全是本地文件路径
真正卡住效率的,往往不是功能缺失,而是“本该自动的事还在手动做”。这五个插件没有一个是万能的,但每个都精准切中一个每天发生几十次的操作断点。装完别急着开新项目,先拿一个现有小文件试:改个标签、输个 import、保存一下、hover 一行代码——确认它们真的在动,而不是躺在扩展列表里吃灰。
PrettierPrettierEditorConfig for VS Code.editorconfig[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = truePrettierPrettiertabWidthEditorConfigPrettier.prettierrctabWidth.editorconfigindent_size
为
时,手动去翻下面找
Auto Rename Tag...<>...>Volargit blameGitLensCurrent Line Blamegitlens.currentLine.blame.enabledfalsegitlens.advanced.caching.enabledgit logimport utils from '../utils/index.ts'Path Intellisenseimport ... from 'tsconfig.jsonbaseUrlpaths@/componentspath-intellisense.mappingsrequire()node_modulespath-intellisense.showHiddenFilestruenpm Intellisense