好用 VSCode 插件推荐
前言
VSCode 装了几十个插件,最后每天打开就用的其实就那么十几个。这篇文章筛选掉"看起来很酷但实际吃灰"的,只留真正提升生产力的。
插件不在多,在对。
一、写代码必备
1.1 中文语言包
Chinese (Simplified) Language Pack
如果你英文没那么溜,装一个,菜单变中文,大幅降低学习曲线。微软官方出品,放心用。
1.2 主题配色
我目前用 One Dark Pro,暗色调 + 高对比度,看久了不累眼。
备选:
- Material Theme(色彩丰富)
- GitHub Theme(模仿 GitHub 风格)
- Vitesse(小巧精致)
主题是玄学,选一个自己看着舒服的就行。
1.3 图标
Material Icon Theme
文件 / 文件夹前有小图标,视觉上一眼区分类型。装上之后代码目录不再是一堆灰色文字。
1.4 字体
推荐装 JetBrains Mono 或 Cascadia Code,等宽字体,写代码专用。
设置里改:
{
"editor.fontFamily": "JetBrains Mono, Consolas, monospace",
"editor.fontSize": 14,
"editor.lineHeight": 1.6
}
二、写 Markdown 必备
| 插件 | 作用 |
|---|---|
| Markdown All in One | 补全 / 预览 / TOC 生成,一个顶十个 |
| Markdown Preview Enhanced | 预览比官方漂亮 100 倍,支持 mermaid |
| markdownlint | 格式检查,养成规范习惯 |
| Paste Image | 截图直接粘贴成图片链接 |
| Markdown PDF | 一键导出 PDF / HTML |
三、Git 相关
3.1 GitLens
GitLens —— Git 增强,必备。
装上之后,每行代码后面自动显示:
- 最后修改时间
- 修改者
- commit message
还能 blame / log 视图,排查"谁动了我的代码"神器。
3.2 Git Graph
Git Graph —— 图形化显示 Git 分支历史。
Ctrl + Shift + P → "Git Graph: View Git Graph"
四、AI 辅助
| 插件 | 特点 |
|---|---|
| Continue | 开源,接自己的 API key,免费用 GPT-4 / Claude |
| Codeium | 免费,功能类似 Copilot |
| Tabnine | AI 补全,本地模型版本 |
我自己用 Continue + Claude API,写代码效率提升非常明显。
五、效率工具
5.1 Project Manager
Project Manager —— 多项目管理。
我同时维护好几个项目(博客 / 课设 / 个人项目),有了它可以一键切换:
Ctrl + Alt + P 打开项目列表 → 选中 → 回车,直接打开。
5.2 Path Intellisense
Path Intellisense —— 路径补全。
写 import / require / 图片路径时,自动补全文件夹下的文件名。写文档、写代码都离不开。
5.3 Auto Rename Tag
Auto Rename Tag —— HTML / JSX 编辑神器。
改开始标签,结束标签自动跟着改。写 React 必备。
5.4 Code Runner
Code Runner —— 一键运行代码片段。
支持 40+ 语言,选中代码 → Ctrl + Alt + N 直接跑,不用切到终端。
写算法题 / 测试小段代码的时候特别方便。
5.5 Todo Tree
Todo Tree —— TODO 注释聚合。
代码里的 // TODO / // FIXME 自动收集到一个侧边栏树,方便管理待办。
六、容器 / 远程开发
6.1 Remote - SSH
Remote - SSH —— 远程开发。
在本地 VSCode 直接编辑服务器上的代码,跟本地体验一致。
适合:
- 跑在服务器上的项目
- 嵌入式交叉编译(代码放服务器,编辑器连过去)
- 多人共用开发机
6.2 Docker
Docker —— 容器管理。
侧边栏可视化操作 container / image / volume,不用记 docker 命令。
七、前端 / React
7.1 ES7 + React Snippets
ES7+ React/Redux/React-Native snippets
输入 rfc + Tab,自动生成:
import React from 'react'
export default function MyComponent() {
return (
<div>MyComponent</div>
)
}
类似的还有
Vue 3 Snippets,写 Vue 也能用。
7.2 Tailwind CSS IntelliSense
如果用 Tailwind,装它,class 名字自动补全 + 悬浮预览。
7.3 styled-components
写 styled-components 的话,装它,语法高亮 + 跳转。
八、嵌入式 / 硬件
8.1 Cortex-Debug
Cortex-Debug —— ARM 调试。
支持 J-Link / OpenOCD / ST-Link,直接打断点、看寄存器、看变量。
我做嵌入式项目基本离不开它,比 Keil / IAR 好用太多。
8.2 PlatformIO IDE
PlatformIO IDE —— 嵌入式开发框架。
ESP32 / Arduino / STM32 都能用,库管理 + 编译 + 烧录一条龙。
8.3 Verilog HDL / SystemVerilog
写 FPGA 必备,语法高亮 + 简单的代码检查。
九、其他实用的
| 插件 | 作用 |
|---|---|
| Polacode | 一键生成漂亮的代码截图(发博客用) |
| Draw.io Integration | VSCode 里直接画流程图 |
| Rainbow Brackets | 彩虹括号,嵌套深了也不晕 |
| indent-rainbow | 缩进可视化,Python 友好 |
| Error Lens | 报错信息直接在行尾显示,不用悬停 |
| Bookmarks | 代码打标签,跨文件跳转 |
| Settings Sync | 配置云同步,换电脑不用重新配 |
十、不推荐的"看起来很酷"插件
| 插件 | 为什么不推荐 |
|---|---|
| Power Mode | 打字时屏幕疯狂抖动,看代码 5 分钟眼花了 |
| VSCode Pets | 养了个猫在编辑器里跑,可爱但吃 CPU |
| Spotify | 想听歌不如开个播放器 |
| Live Share | 协作场景少,自己用不上 |
十一、配置同步
重装系统 / 换电脑时,插件和设置要重新装一遍?用 Settings Sync:
- 用 GitHub 账号登录
Shift + Alt + U上传配置- 新机器上
Shift + Alt + D下载
10 分钟搞定,爽。
我的最终插件清单
按使用频率排序:
必装:
- Chinese Language Pack
- Material Icon Theme
- One Dark Pro 主题
- GitLens
- Markdown All in One
- Markdown Preview Enhanced
- Path Intellisense
高频使用:
- Continue (AI)
- Project Manager
- Remote - SSH
- ES7 React Snippets
- Todo Tree
按需:
- Cortex-Debug (嵌入式)
- PlatformIO (嵌入式)
- Docker (容器)
- Polacode (写博客)
装多了会卡,启动慢、内存大。建议保持 20 - 30 个 常用插件,够用了。
你们装了什么好插件?评论区交流~