bracket pair colorizer 2 是 vs code 中专为解决多层嵌套括号匹配难题的高亮插件,支持 {}、[]、() 等括号对按层级或自定义规则着色,选中时自动连线匹配项,并兼容 js/ts/vue/html 等多语言,需关闭原生 bracketpaircolorization 以避免冲突。

直接装这 7 个插件,就能覆盖 90% 的日常编码痛点——括号配对混乱、注释看不见、路径跳不进去、代码写一半卡住、错误要翻控制台、文件图标一团黑、保存总忘记。
Bracket Pair Colorizer 2:解决多层嵌套括号找不着另一半
JavaScript 或 Vue 模板里写个 v-if 套 v-for 再套三重对象解构,光靠肉眼数括号基本靠猜。这个插件给每对 {}、[]、() 分配颜色,选中任一括号时还会画线连到匹配项。
- 别装旧版
Bracket Pair Colorizer,它已停更,新版Bracket Pair Colorizer 2兼容性更好、性能更稳 - 默认配置够用,如果颜色太浅,可在设置里搜
bracket pair colorizer 2调整dark theme下的配色方案 - 和
Highlight Matching Tag配合用效果更佳——前者管 JS/TS 里的括号,后者专治 HTML/XML 标签配对
ESLint + Error Lens:错误不用切终端,行尾直接标红
写完 console.log(foo.bar) 忘了判空,等运行才报 Cannot read property 'bar' of undefined?太晚了。ESLint 在编辑时就检查语法和潜在问题,Error Lens 把提示压在代码行右边,一眼就能定位。
- 必须同时装
ESLint和Error Lens,单装一个效果打折——前者生成错误,后者负责“贴脸显示” - 项目根目录要有
.eslintrc.js或.eslintrc.json,否则ESLint不会启动校验 -
Error Lens默认只显示 error/warning,如需看到 info 级提示(比如 TODO),需在设置里开errorLens.showInfo
Path Intellisense +别名路径跳转:Ctrl+左键终于能跳进 @/utils/request
Vue 或 React 项目里满屏 @/、#/、 别名,原生 VS Code 点不动。这两个插件分工明确:<code>Path Intellisense 补全路径,别名路径跳转(如 vue-alias-skip)负责解析并跳转。
-
Path Intellisense安装即用,但遇到 Webpack 别名要手动配path-intellisense.mappings,例如:"@": "${workspaceFolder}/src" -
vue-alias-skip这类插件只认特定配置格式,必须按它要求写进jsconfig.json或tsconfig.json的compilerOptions.baseUrl和paths字段 - 两者冲突时优先级是:插件自身配置 >
jsconfig.json>tsconfig.json,别把映射写错位置
TODO Highlight:别让 // TODO 沉在几百行代码里
写到一半加个 // TODO: 后续支持 SSR,结果发版前完全没想起来。这个插件不是简单高亮,而是把所有 TODO、FIXME、XXX 当成可交互标记——点击直接跳转,还能用命令 TODO: List 汇总当前文件所有待办。
- 默认只识别大写
TODO,若项目习惯用小写// todo,得在设置里改todo.highlight.regex正则 - 它不扫描 node_modules,但会扫 .gitignore 里没排除的目录,如果某工具生成的临时文件里全是 TODO,记得加进
todo.ignorePaths - 和
Better Comments可共存,但后者只改注释样式,不提供跳转或汇总功能
真正难的不是插件数量,而是每个插件背后都依赖项目配置、语言服务、甚至 TypeScript 版本。比如 ESLint 报错但没提示,大概率是 eslint-plugin-vue 没装或 parserOptions.parser 指向了错误的解析器;别名路径跳转 失效,往往是因为 tsconfig.json 的 baseUrl 写成了相对路径而非 ./。插件只是开关,底下的工程配置才是命门。











