打造你的“开发战斗机”：VS Code 扩展推荐指南（从入门到入土版）
这是为你准备的一篇纯文字版 VS Code 扩展推荐指南，去掉了花哨的表情和图表，只有干货和私货，适合收藏在笔记里随时查阅。
打造你的“开发战斗机”：VS Code 扩展推荐指南（从入门到入土版）
Visual Studio Code（简称 VS Code）之所以能称霸编辑器江湖，原因很简单：它本体是个“素颜美女”，虽然底子好，但全靠“妆”（扩展）才能惊艳全场。
如果不装扩展，它就是个稍微好看点的记事本；装好了扩展，它就是这世界上最丝滑的 IDE。但这里有个坑：扩展装多了，编辑器会比老太太过马路还慢。
所以，这篇指南不搞大杂烩，只按“场景”给你推荐最硬核的那些神兵利器。
一、 基础必装：如果没装这些，你的 VS Code 是“裸奔”
不管你是写前端、后端，还是写诗，下面这几个扩展属于“穿衣吃饭”的级别。
1. Chinese (Simplified) Language Pack for Visual Studio Code
如果你不想每天对着英文菜单猜谜语，这是你装的第一个扩展。它能把界面汉化成中文。不过说句实话，作为程序员，早点适应英文界面对你没坏处，毕竟报错信息可没人给你翻译。
2. Error Lens
这货是强迫症福音。以前代码报错，你得把鼠标移到那个红波浪线上才能看到报错原因。装了它之后，错误信息会直接以行内文字的形式显示在代码后面。那种“这行代码怎么红了？”的焦虑感瞬间消失，Bug 无处遁形。
3. Path Intellisense
如果你受够了手写相对路径，这个扩展能救命。当你敲 ./ 的时候，它会像补全代码一样把路径里的文件名列出来。再也不用担心因为把 ../images/logo.png 写成 ./images/logo.png 而找半天图为什么不显示。
4. Auto Close Tag 和 Auto Rename Tag
这两个通常是一对双胞胎。前者能在你敲完 <div> 的瞬间，自动帮你补上 </div>；后者更神，当你修改外层标签名字时，闭合标签会自动跟着改。省下的这些敲键盘的时间，累积起来够你多喝几杯咖啡。
二、 颜值正义：谁说程序员不能看脸
代码写得好不好另说，编辑器必须得帅。毕竟，对着一个漂亮的界面写 Bug，心情都会好一点。
1. One Dark Pro
这是经典中的经典，Atom 编辑器的标志性主题。色彩饱和度刚刚好，看久了眼睛不累。如果你有“主题选择困难症”，装它准没错，就像买衣服里的黑白灰，永不过时。
2. Material Icon Theme
默认的文件图标丑得像上古时代的产物。这个扩展会给你的文件列表换上一套 Google Material Design 风格的图标。JS 文件是黄色的 JS，JSON 文件是齿轮，一眼就能分辨出文件类型。虽然不提升功能，但极大地提升了“找文件”的幸福感。
3. Carbon Product Icons
如果你觉得界面左侧活动栏的图标太丑，这个扩展能把那些图标换成更现代的圆角风格。属于微整容级别的美化。
三、 前端专用：切图仔的自我修养
如果你是前端开发，不管是 Vue 还是 React，这几样东西是你的饭碗。
1. ESLint
它是代码界的“教导主任”。它不仅检查语法错误，还能规范你的代码风格。比如你忘了加分号、缩进用了空格而不是 Tab、定义了变量却没用过……它都会在那唠叨个不停。虽然有时候很烦，但听它的话，你的代码质量会直线上升。
2. Prettier - Code formatter
它是代码界的“整理师”。ESLint 负责挑刺，Prettier 负责动手。按下保存键的那一刻，它会自动把你的乱糟糟的代码重新排版，缩进、空格、引号瞬间变得整整齐齐。那种“一键还原”的快感，谁用谁知道。
3. Live Server
这是前端神器。以前改个 CSS，得切到浏览器刷新一下看效果。装了它，在 HTML 文件里右键选择“Open with Live Server”，它会起一个本地服务器。以后你只要一改代码，保存，浏览器那边不用刷新，页面自己就变了。这才是真正的所见即所得。
4. Vue - Official (以前叫 Volar)
写 Vue 必装。它能让 VS Code 认识 .vue 文件，提供语法高亮、智能提示，还能在模板里直接点击跳转到组件定义。如果你还在用旧版的 Vetur，赶紧扔了换这个，Vue 3 项目必须用它。
写 React 的偷懒神器。比如你想写 console.log，只要敲 cl 然后回车，它自动展开。写一个复杂的组件结构，只要敲几个缩写，瞬间生成一大段模板代码。这省下的键盘敲击次数，能延长你键盘一年的寿命。
四、 后端与通用开发：为了更高效地搬砖
不管你是写 Java、Python 还是 Go，这些工具能让你搬砖姿势更帅。
1. GitLens — Git supercharged
它是 Git 的“透视眼”。装上之后，每一行代码后面都会显示是谁写的、什么时候写的。当你看到一行莫名其妙的代码想骂人时，它能帮你精准定位到是哪个前同事留下的坑。此外，它还能对比分支、查看文件历史，功能强大到离谱。
2. Thunder Client
如果你嫌 Postman 太臃肿、启动太慢，直接装这个。它直接嵌在 VS Code 侧
边栏里，发请求、测接口就在编辑器里搞定。轻量、快速，不用再切屏了。
3. Docker
如果你玩容器化，这个必装。不用切到终端敲命令，直接在 VS Code 里就能管理镜像、启动容器、查看日志。图形化界面操作 Docker，对新手极其友好。
4. Remote - SSH
远程开发神器。如果你经常需要连服务器改代码，以前可能是用 Xshell 连上去用 Vim 改。装了这个，你可以在本地 VS Code 里直接打开服务器上的文件夹，改代码就像改本地文件一样丝滑，还能用本地的 Git 插件，体验完全是降维打击。
五、 辅助与效率：那些不起眼但好用的工具
1. Code Spell Checker
专治“英语不好”和“手滑”。它会检查你的变量名、注释里的单词拼写。如果你把 background 写成了 backgroud，它会给你画个波浪线提示你改。避免你因为拼错单词导致的低级 Bug，同时还能顺便背单词。
2. Better Comments
它能让你的注释变得五彩斑斓。TODO 是红色的，FIXME 是黄色的，重点高亮是绿色的。这让代码里的待办事项一目了然，再也不怕忘了删临时代码了。
3. Bookmarks
代码文件动辄几千行，有时候改两处地方得来回滚屏。这个扩展能让你给关键行打个书签，按快捷键瞬间跳转。就像看实体书折角一样，极大地减少了盲目找代码的时间。
4. Translation (Comment Translate)
看源码或者写注释的时候，遇到生词不用切到浏览器查字典了。选中单词，旁边直接出翻译。对于英文不好的同学，这是阅读源码的得力助手。
六、 最后的忠告
扩展虽好，可不要贪杯。
VS Code 毕竟是基于 Electron（也就是浏览器内核）跑的，开多了插件，内存占用蹭蹭往上涨。如果你发现编辑器风扇狂转、打字有延迟，那肯定是你装的“垃圾”太多了。
我的建议是：
只装你每天都会用到的，那种“也许以后有用”的，一律不装。每隔两个月，审视一下自己的扩展列表，把不常用的卸载了。保持编辑器的清爽，也是在保持你头脑的清爽。
