10个必装的 VS Code 扩展
Source: Dev.to
1. Prettier – 代码格式化工具
Prettier 是一个有主观风格的代码格式化工具，支持多种语言，包括 JavaScript、TypeScript、CSS、HTML 等等。它通过在保存时自动格式化代码，消除了关于代码风格的争论。
为什么需要它
在整个团队中实现一致的代码格式，无需任何额外工作。它可以无缝集成到大多数流行的框架和库中。
小技巧
在 VS Code 设置中启用 “Format on Save”，并在项目根目录创建 .prettierrc 配置文件，以确保所有人遵循相同的格式化规则。
2. ESLint
ESLint 是 JavaScript 和 TypeScript 的首选 lint 工具。它能够识别有问题的代码模式，帮助你遵循最佳实践，并在代码进入生产环境前捕获潜在的 bug。它高度可配置，并支持自定义规则。
为什么需要它
提前发现错误，强制执行编码规范，保持代码库的质量。
小技巧
使用 eslint-config-prettier 将 ESLint 与 Prettier 结合，防止规则冲突，并启用 “Auto Fix on Save”，在你编码时自动清理代码。
3. GitLens
GitLens 为 VS Code 内置的 Git 功能注入强大动力。它通过 blame 注释可视化代码作者信息，帮助你浏览仓库，并提供丰富的 Git 历史可视化。
为什么需要它
轻松了解谁在何时为何修改了代码，使 Git 成为强大的协作平台。
小技巧
使用 Commit Graph 视图来可视化分支和合并。如果行内 blame 注释太嘈杂，可以关闭它们，改用悬停提示。
4. Live Server
Live Server 为静态和动态页面启动本地开发服务器，并具备实时刷新功能。对 HTML、CSS 或 JavaScript 的更改会立即在浏览器中反映出来。
为什么需要它
即时反馈加速工作流，尤其是前端项目。
小技巧
在资源管理器中右键任意 HTML 文件，选择 “Open with Live Server”，或使用快捷键 Alt+L, Alt+O（Windows/Linux）/Cmd+L, Cmd+O（Mac）。
5. Auto Rename Tag
自动重命名配对的 HTML/XML 标签。当你修改一个标签时，其对应的开始或结束标签会同步更新。
为什么需要它
看似简单，却在编写标记语言时极大节省时间，再也不用手动寻找不匹配的标签。
小技巧
通过检查 VS Code 配置中的 activationOnLanguage 设置，确保在 JSX 和 TSX 文件中也能激活该扩展。
6. Path Intellisense
为项目中的文件路径提供智能自动补全。输入路径时，它会建议并完成文件名。
为什么需要它
消除路径拼写错误，更高效地在大型代码库中导航。
小技巧
保持项目结构有序，使用清晰且一致的命名约定——该扩展在逻辑文件夹层次结构下表现最佳。
7. Bracket Pair Colorizer 2
为匹配的括号着色，帮助在嵌套代码中快速识别配对。VS Code 现在已经内置了括号配对着色功能，但此扩展提供了更多自定义选项。
为什么需要它
瞬间了解代码结构，减少匹配括号的时间。
注意
在设置中添加以下内容以启用原生着色：
{
"editor.bracketPairColorization.enabled": true
}8. REST Client
允许你在 VS Code 内直接发送 HTTP 请求并查看响应。创建 .http 或 .rest 文件来组织请求。
为什么需要它
无需切换到 Postman 等外部工具即可测试 API。将请求文档与代码放在一起，便于维护。
小技巧
使用变量和环境来管理不同的配置（开发、预发布、生产）。
9. Better Comments
通过不同颜色对注释进行分类（警告、疑问、TODO、重点），帮助你编写更易读的注释。
为什么需要它
让注释更有条理、视觉上更醒目，提升文档质量和团队沟通效率。
小技巧
在 settings.json 中自定义注释样式，并在默认标签（!, ?, TODO, *）之外添加自己的标签。
10. Error Lens
通过高亮整行并在行内显示信息，增强错误、警告和诊断信息的展示。
为什么需要它
立即发现错误而不中断工作流；行内显示节省时间，减少上下文切换。
小技巧
如果行内信息过于干扰，可调整设置仅显示错误，或修改背景高亮的强度。
安装扩展的技巧
- 在安装前阅读评论和评分。
- 检查最近的更新日期，确保扩展仍在积极维护。
- 审查每个扩展请求的权限。
- 禁用不使用的扩展，保持 VS Code 的性能。
- 使用 VS Code 的 Settings Sync 功能，在多台设备间同步扩展。
- 先从必备工具入手（Prettier、ESLint、GitLens、Live Server），再根据需求添加专业工具。
这些扩展仅是 VS Code Marketplace 中的一小部分，但它们为任何开发者提供了坚实的基础。