Prettier保存自动格式化需设editor.defaultFormatter为esbenp.prettier-vscode、开启editor.formatOnSave，并用eslint-config-prettier避免与ESLint冲突。
保存就自动格式化，别再手动调空格缩进
代码风格统一不是靠人盯，而是靠 Prettier 在保存瞬间完成。它不检查语法错误，只管“怎么写好看”：单引号还是双引号、是否加分号、对象属性换行位置、一行最多多少字符……这些全由几个配置项控制。
常见错误现象：装了 Prettier 却没生效，或和 ESLint 冲突报红；多人协作时有人用 2 空格、有人用 4 空格，Git 提交全是格式差异。
- 必须在
settings.json中设"editor.defaultFormatter": "esbenp.prettier-vscode"和"editor.formatOnSave": true - 若同时用
ESLint，务必加eslint-config-prettier关闭其格式类规则，否则两者打架 -
prettier.singleQuote设为true，prettier.tabWidth设为2，是目前主流团队的保守选择
路径一按 Ctrl 就跳转，别再手输 ../../..
大型项目里 @/components 或 ~/utils 这类别名路径，靠人脑记层级极易出错。插件 Path Intellisense 和 Alias Navigator 能实时补全并支持 Ctrl+Click 跳转，本质是读取项目中的 jsconfig.json 或 tsconfig.json 的 baseUrl 和 paths 配置。
容易踩的坑：新建项目没配 tsconfig.json，或配了但没重启 VSCode；Vue 项目用了 Volar，却忘了关 Vetur，导致路径提示失效。
立即学习“前端免费学习笔记（深入）”；
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 确保
tsconfig.json中有合法的"compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] } } - Vue 3 项目优先用
Volar，禁用Vetur（二者冲突） - React + TypeScript 项目需确认
jsconfig.json或tsconfig.json存在且被 VSCode 正确识别
括号颜色一目了然，嵌套 jsx 不再头晕
写 React 或 Vue 模板时，{} 里套 {}、map 里嵌 filter，光靠缩进很难快速定位匹配对。插件 Bracket Pair Colorizer（新版已集成进 VSCode 1.69+，只需开启设置）给不同层级括号上色，配合 "editor.guides.bracketPairs": true 更直观。
注意：旧版插件名是 Bracket Pair Colorizer 2，新版本直接用内置功能即可，避免重复安装。
- VSCode 1.69+ 用户，在设置中搜
bracket pair，勾选Bracket Pair Guides - 若颜色太淡，可自定义主题色：在
settings.json加"workbench.colorCustomizations": { "editorBracketMatch.background": "#ff000033" } - 不要同时启用第三方括号着色插件和内置引导线，否则视觉干扰严重
HTML 标签改一个，另一个自动同步
手改 <div class="card"></div> 里的 div 成 section 却漏掉闭合标签，是低级但高频错误。Auto Rename Tag 插件会在你修改开始标签时，自动更新对应结束标签，连带处理自闭合标签（如 <img alt="那些让前端开发更顺手的VSCode插件" > 不会动）。
它只作用于 HTML/XML 类文件，默认不处理 JSX，但可在设置里加 "auto-rename-tag.activationOnLanguage": ["html", "xml", "javascriptreact", "typescriptreact"] 开启 JSX 支持。
- JSX 中若用大写字母开头的组件名（如
<mycomponent></mycomponent>），该插件默认不处理——这是设计使然，避免误改组件名 - 若在 Vue 的
.vue文件中使用，需确认语言模式是vue-html而非html，否则不生效 - 与
Auto Close Tag可共存，但后者只管“自动补全”，前者管“自动重命名”，功能不重叠
