刚开始学习编程时，我安装了几十个 VS Code 插件，觉得插件越多效率越高。

后来做了几个项目之后发现，插件并不是越多越好。

插件过多不仅会拖慢 VS Code 启动速度，还可能导致插件冲突、占用更多内存。

经过几年使用和不断精简，我最终保留了不到 10 个插件。这些插件几乎覆盖了日常开发的大部分场景，也是我现在每次重装电脑都会第一时间安装的。

本文分享的，就是这一套我目前仍然在使用的 VS Code 插件清单，希望能帮助你少踩一些坑。

Visual Studio Code（简称 VS Code）已经成为目前最受欢迎的代码编辑器之一，无论是前端开发、后端开发、Python、Go、Java 还是 Node.js，都拥有完善的插件生态。

不过，很多开发者安装 VS Code 后几乎保持默认配置，没有充分发挥它的优势。

我从 VS Code 发布初期开始使用，期间尝试过几十款插件。刚开始喜欢“装得越多越好”，后来发现插件越多，不仅启动速度会变慢，还可能出现兼容性问题。真正能够长期保留的，其实只有少数几款。

本文推荐的插件都是我长期使用并经过实际开发验证的，它们不仅稳定，而且真正能够提升开发效率。

建议原则：插件不在于多，而在于实用。 保持 15～30 个高质量插件，通常能够兼顾功能与性能。

---

本文将介绍哪些内容？

本文主要包括以下几个部分：

• VS Code 必装插件推荐
• 常用开发配置技巧
• 提升效率的快捷键
• 自定义代码片段（Snippets）
• 主题与图标推荐
• 常见问题 FAQ

---

一、VS Code 必装插件推荐

1. Remote – SSH（★★★★★）

适用场景：远程服务器开发、Linux VPS、云服务器、Docker 容器

如果你的项目部署在 Linux 服务器上，或者经常需要连接 VPS，那么 Remote – SSH 几乎是必装插件。

安装后，无需使用 FTP、SFTP 或其他文件同步工具，就可以直接在 VS Code 中编辑远程服务器上的代码，就像操作本地项目一样。

推荐理由

• 官方插件，稳定可靠
• 支持 Linux、macOS、Windows
• 支持 SSH 密钥登录
• 自动同步工作目录
• 与本地开发体验几乎一致

使用方法

安装插件后：

按下：

F1

输入：

Remote-SSH: Connect to Host

首次连接时添加服务器信息即可。

推荐指数：⭐⭐⭐⭐⭐

---

2. Prettier —— 自动格式化代码（★★★★★）

代码风格不统一，是团队开发中最常见的问题之一。

Prettier 可以自动统一：

• 缩进
• 引号
• 分号
• 换行
• 空格

建议开启：

Format On Save

这样每次保存都会自动格式化代码。

推荐配置

在项目根目录创建：

.prettierrc

内容如下：

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}

为什么推荐？

统一代码风格不仅让代码更易读，也能减少团队协作时无意义的格式修改。

推荐指数：⭐⭐⭐⭐⭐

---

3. GitLens —— Git 可视化神器（★★★★★）

GitLens 是 Git 用户几乎都会安装的一款插件。

安装后，在编辑器中就可以查看：

• 每一行代码是谁提交的
• 提交时间
• Commit Message
• 修改历史
• 文件历史记录

排查 Bug 时尤其方便。

例如，当你看到一段不熟悉的代码，只需要将鼠标悬停在对应行，就能立即查看是谁在什么时间修改了这段内容。

对于团队协作项目来说，这个功能可以节省大量排查时间。

推荐指数：⭐⭐⭐⭐⭐

---

4. GitHub Copilot / Codeium（★★★★★）

AI 编程已经成为开发者提升效率的重要工具。

如果预算充足，推荐使用 GitHub Copilot。

如果希望使用免费方案，可以选择 Codeium。

它们能够根据当前上下文自动补全：

• 函数
• 注释
• SQL
• HTML
• JavaScript
• Python
• Go
• Java

甚至可以根据注释直接生成代码。

例如：

// 实现一个快速排序

按下回车后，AI 就会自动生成完整函数。

对于重复性代码、接口封装、CRUD 页面开发来说，可以节省大量时间。

推荐指数：⭐⭐⭐⭐⭐

---

5. Error Lens（★★★★★）

VS Code 默认会在底部 Problems 面板显示错误信息。

而 Error Lens 会直接把错误提示显示在代码所在行的末尾。

优点：

• 不需要切换面板
• 一眼定位错误位置
• 红色高亮更加醒目

对于调试 TypeScript、Vue、React 项目来说，非常高效。

推荐指数：⭐⭐⭐⭐⭐

6. Todo Tree（★★★★☆）

在开发过程中，我们经常会写一些临时标记，例如：

// TODO: 优化这里的查询逻辑
// FIXME: 修复登录异常
// HACK: 临时解决方案
// NOTE: 后续需要重构

时间一长，这些注释很容易被遗忘。

Todo Tree 会自动扫描整个项目中的这些关键字，并在左侧生成一个待办列表，方便统一管理。

推荐理由

• 自动扫描整个项目
• 快速定位待办事项
• 支持自定义关键字
• 适合多人协作开发

推荐指数：★★★★☆

---

7. Better Comments（★★★★☆）

好的注释不仅是写给自己看的，也是写给团队成员看的。

Better Comments 会根据不同类型的注释显示不同颜色，让代码阅读体验更好。

例如：

// ! 重要提醒

// ? 这里为什么这样写？

// TODO 后续优化

// * 核心逻辑

// FIXME 已知 Bug

不同颜色代表不同含义，阅读代码时能够快速识别重点。

尤其是在大型项目中，这种视觉区分可以明显提升阅读效率。

推荐指数：★★★★☆

---

8. Path Intellisense（★★★★☆）

当项目越来越大之后，import 路径会越来越长。

例如：

import UserCard from "../../../../../components/UserCard";

Path Intellisense 可以自动提示路径。

输入：

../

即可自动补全当前目录下所有文件。

优点：

• 减少拼写错误
• 提高 import 速度
• 大型项目体验明显提升

推荐指数：★★★★☆

---

9. Code Spell Checker（★★★★☆）

很多程序员都会写错英文。

例如：

recieve

正确应该是：

receive

又或者：

enviroment

正确：

environment

代码虽然可以运行，但是：

• README
• Markdown
• API 文档
• 注释

都会显得不够专业。

Code Spell Checker 可以实时检查英文拼写。

如果你经常写：

• 开源项目
• 技术博客
• 接口文档

非常推荐安装。

推荐指数：★★★★☆

---

10. Live Server（★★★★☆）

如果你学习：

• HTML
• CSS
• JavaScript

Live Server 几乎属于必装插件。

安装以后：

点击：

Go Live

浏览器会自动打开页面。

以后每次保存：

Ctrl + S

浏览器都会自动刷新。

无需：

• F5
• 手动刷新
• 重复打开浏览器

对于静态页面开发来说，可以节省大量时间。

推荐指数：★★★★☆

---

11. Material Icon Theme（★★★★★）

严格来说，它不是功能插件，而是一个图标主题。

但是我依然建议安装。

安装以后：

不同文件都会显示不同图标，例如：

• HTML
• CSS
• JavaScript
• TypeScript
• Vue
• React
• Docker
• Git
• JSON

大型项目中，识别文件类型速度会快很多。

推荐指数：★★★★★

---

推荐插件一览

插件	推荐指数	是否免费	推荐理由
Remote – SSH	⭐⭐⭐⭐⭐	✔	远程开发
Prettier	⭐⭐⭐⭐⭐	✔	自动格式化
GitLens	⭐⭐⭐⭐⭐	✔	Git 历史查看
GitHub Copilot	⭐⭐⭐⭐⭐	✘	AI 编程
Codeium	⭐⭐⭐⭐⭐	✔	免费 AI 补全
Error Lens	⭐⭐⭐⭐⭐	✔	行内错误提示
Todo Tree	⭐⭐⭐⭐☆	✔	TODO 管理
Better Comments	⭐⭐⭐⭐☆	✔	注释高亮
Path Intellisense	⭐⭐⭐⭐☆	✔	路径补全
Code Spell Checker	⭐⭐⭐⭐☆	✔	拼写检查
Live Server	⭐⭐⭐⭐☆	✔	自动刷新
Material Icon Theme	⭐⭐⭐⭐⭐	✔	文件图标

---

二、VS Code 高效配置

很多人安装好插件之后就结束了，其实 VS Code 自身还有不少值得开启的设置。

1、自动保存

搜索：

Auto Save

建议设置：

afterDelay

这样停止输入几百毫秒后会自动保存。

---

2、保存时自动格式化

搜索：

Format On Save

开启即可。

推荐与 Prettier 搭配使用。

---

3、开启 Sticky Scroll

新版 VS Code 自带。

搜索：

Sticky Scroll

开启后：

滚动代码时，当前函数名称会固定显示在顶部。

阅读大型项目特别方便。

---

4、关闭 Minimap（按需）

很多开发者喜欢关闭右侧代码缩略图。

搜索：

Minimap

关闭即可。

可以节省一些显示空间。

---

5、开启 Breadcrumb

搜索：

Breadcrumbs

顶部会显示：

src
>
components
>
UserCard
>
render()

定位当前文件非常方便。

---

三、开发效率快捷键

下面这些快捷键，我每天都会使用。

快捷键	功能
Ctrl + P	快速打开文件
Ctrl + Shift + P	命令面板
Ctrl + D	选中下一个相同单词
Ctrl + Shift + L	全部选中相同内容
Ctrl + /	注释代码
Alt + ↑ / ↓	上下移动当前行
Ctrl + `	打开终端
Ctrl + B	显示/隐藏侧边栏
Ctrl + Shift + E	文件管理器
Ctrl + Shift + F	全局搜索
F2	重命名变量
F12	跳转定义

如果能够熟练使用这些快捷键，开发效率会有明显提升。

---

四、自定义代码片段（Snippets）

VS Code 支持创建自己的代码模板。

按下：

Ctrl + Shift + P

搜索：

Configure User Snippets

例如：

{
  "Console Log": {
    "prefix": "cl",
    "body": [
      "console.log('$1:', $1);"
    ],
    "description": "快速输出变量"
  }
}

以后输入：

cl

按下 Tab：

自动展开：

console.log('user:', user);

长期使用可以节省大量重复输入。

---

五、推荐主题

我一直保持比较简洁的配置。

推荐两个主题即可。

One Dark Pro

经典暗色主题。

颜色舒服。

适合长时间编码。

---

Material Icon Theme

不是代码主题，而是文件图标。

建议长期使用。

---

常见问题（FAQ）

VS Code 插件是不是越多越好？

不是。

插件越多：

• 启动越慢
• 占用内存越高
• 容易出现插件冲突

建议保持在 15～30 个高质量插件 即可。

---

VS Code 和 Cursor 怎么选择？

如果主要进行传统开发，VS Code 已经足够。

如果每天都会大量使用 AI 编程，可以尝试 Cursor。

很多开发者目前会同时使用：

• VS Code（日常开发）
• Cursor（AI 辅助）

根据项目需求选择即可。

---

为什么 VS Code 会变卡？

通常不是编辑器本身的问题，而是：

• 插件安装过多
• 项目体积过大
• node_modules 文件过多
• TypeScript 索引时间较长

定期清理不用的插件，通常就能恢复流畅。

---

总结

VS Code 的强大之处，不仅仅在于编辑器本身，更在于完善的插件生态。

如果你刚开始配置开发环境，我建议优先安装下面这几款：

1. Remote – SSH
2. Prettier
3. GitLens
4. Error Lens
5. GitHub Copilot（或 Codeium）
6. Material Icon Theme

等熟悉之后，再根据自己的开发方向逐步增加其他插件。

记住一句话：

插件的目的不是让编辑器更复杂，而是减少重复操作，把时间留给真正重要的开发工作。