VS Code 扩展推荐指南
Visual Studio Code(简称 VS Code)之所以能称霸编辑器江湖,原因在于其本体轻量,但通过扩展(Extensions)可以变身功能强大的 IDE。不过,扩展装多了会导致性能下降,因此本文按场景推荐最实用的插件。
一、基础必装
如果没装这些,你的 VS Code 配置是不完整的。
1. Chinese (Simplified) Language Pack for Visual Studio Code
将界面汉化成中文,方便快速上手。建议程序员尽早适应英文界面,因为报错信息通常也是英文。
2. Error Lens
强迫症福音。错误信息会直接以行内文字的形式显示在代码后面,无需鼠标悬停即可看到报错原因。
3. Path Intellisense
自动补全文件路径。当你输入 ./ 时,它会列出路径里的文件名,避免写错相对路径导致图片不显示等问题。
4. Auto Close Tag 和 Auto Rename Tag
前者自动闭合标签,后者修改外层标签名时自动同步修改闭合标签,节省敲键盘时间。
二、界面美化
编辑器颜值影响心情。
1. One Dark Pro
经典主题,色彩饱和度适中,长时间使用不累眼。
2. Material Icon Theme
为文件列表换上 Google Material Design 风格的图标,一眼分辨文件类型。
3. Carbon Product Icons
美化左侧活动栏图标,采用更现代的圆角风格。
三、前端专用
如果你是前端开发,这几样是你的饭碗。
1. ESLint
代码检查工具。检查语法错误并规范代码风格,如分号、缩进、未使用变量等。
2. Prettier - Code formatter
代码格式化工具。保存时自动重新排版,统一缩进、空格和引号。
3. Live Server
本地服务器神器。右键 HTML 文件打开后,代码修改保存,浏览器自动刷新,实现所见即所得。
4. Vue - Official (以前叫 Volar)
Vue 开发必装。提供语法高亮、智能提示及组件跳转。Vue 3 项目推荐使用此版本。
此外,React 开发推荐使用代码片段插件,例如输入 cl 回车可自动生成 console.log,或生成复杂的组件结构模板。
四、后端与通用开发
1. GitLens — Git supercharged
Git 增强工具。显示每行代码的作者、提交时间等信息,辅助定位历史遗留问题,支持分支对比和历史查看。
2. Thunder Client
轻量级 API 测试工具。嵌在侧边栏,发请求、测接口无需切换应用,比 Postman 更快捷。
3. Docker
容器化管理。直接在 VS Code 里管理镜像、启动容器、查看日志,图形化操作对新手友好。
4. Remote - SSH
远程开发神器。在本地 VS Code 中直接打开服务器文件夹,像编辑本地文件一样修改远程代码,支持本地 Git 插件。
五、辅助与效率
1. Code Spell Checker
拼写检查。检查变量名、注释中的单词拼写,避免低级 Bug。
让注释五彩斑斓。TODO 红色,FIXME 黄色,重点高亮绿色,待办事项一目了然。
3. Bookmarks
书签功能。给关键行打标记,快捷键跳转,减少盲目找代码的时间。
翻译助手。选中单词直接显示翻译,阅读源码或写注释时查词更方便。
六、注意事项
扩展虽好,不要贪杯。VS Code 基于 Electron 运行,插件过多会导致内存占用高、打字延迟。
建议:
只安装每天用到的插件,卸载不常用的。每隔两个月审视扩展列表,保持编辑器清爽,也是在保持头脑清爽。