VSCode 插件推荐
约 1938 字大约 6 分钟
2025-01-15
收集整理的 VSCode 实用插件，帮助提升开发效率。
中文化 / 本地化
| 名称 | 功能说明 |
|---|---|
| Chinese (Simplified) Language Pack | 官方中文包，将 VSCode 界面转为中文 |
| i18n Ally | 多语言管理工具，支持 JSON / YAML / CSV 等格式，方便国际化项目 |
变量命名 / 大小写转换
| 名称 | 功能说明 |
|---|---|
| 驼峰翻译助手 ⭐ | 中文一键翻译转换成常用大小驼峰等格式 |
| change-case | 快速转换命名格式（驼峰、下划线、标题等） |
| Codelf | 变量命名神器，搜索 GitHub 等平台查找实际使用的变量名 |
代码编辑增强
| 名称 | 功能说明 |
|---|---|
| Surround | 在代码块周围快速添加包装代码片段 |
| Duplicate Action | 一键复制并创建文件或文件夹 |
| Turbo Console Log ⭐ | 一键生成有意义的 console.log 消息 |
| indent-rainbow | 代码缩进可视化，通过颜色区分缩进层级 |
| Regex Previewer | 实时预览正则表达式匹配结果 |
实时预览 / 开发辅助
| 名称 | 功能说明 |
|---|---|
| Live Server ⭐ | 本地启动 HTTP 服务，实时预览 HTML/CSS/JS 修改 |
| Browser Preview | 在 VSCode 内嵌浏览器，实时查看网页效果 |
| Quokka.js | JS/TS 快速调试，边写边显示计算结果 |
| Markdown Preview Enhanced | Markdown 文件增强预览，支持数学公式、图表、幻灯片等 |
前端开发 / 代码增强
| 名称 | 功能说明 |
|---|---|
| Vetur / Volar ⭐ | Vue 文件支持（Volar 推荐 Vue 3） |
| ES7+ React/Redux/React-Native snippets | 常用 React/JS 代码片段 |
| Prettier - Code formatter ⭐ | 代码格式化，支持多语言 |
| ESLint ⭐ | 语法检查和代码规范 |
| Tailwind CSS IntelliSense | Tailwind CSS 智能提示、自动完成 |
| Auto Rename Tag ⭐ | HTML/JSX 标签自动成对重命名 |
| Path Intellisense ⭐ | 文件路径自动补全 |
| CSS Peek | 从 HTML 快速跳转到 CSS 定义，支持预览功能 |
| Bracket Pair Colorizer | 括号配对着色，提高代码可读性 |
| Typescript React Code Snippets | TypeScript React 代码片段集合 |
Git / 版本控制
| 名称 | 功能说明 |
|---|---|
| GitLens ⭐ | Git 历史、代码责任人、分支信息可视化 |
| Git Graph | Git 可视化图表操作 |
| Git History | 查看 Git 日志、文件历史、分支比较 |
AI 编程助手
| 名称 | 功能说明 |
|---|---|
| GitHub Copilot | GitHub AI 编程助手，自动补全代码 |
| Tabnine | AI 代码补全工具，支持多种语言 |
| Codeium | 免费的 AI 代码补全工具，支持70+种语言 |
| CodeGPT | 在 VSCode 中使用 ChatGPT |
| TONGYI Lingma | 通义灵码，阿里云智能编码助手 |
| CodeGeeX | 基于大模型的智能编程助手 |
主题 / 图标
| 名称 | 功能说明 |
|---|---|
| One Dark Pro ⭐ | 最受欢迎的暗色主题之一 |
| Dracula Official | Dracula 官方主题 |
| Material Icon Theme ⭐ | Material Design 风格文件图标 |
| Catppuccin | 柔和的配色主题 |
| Tokyo Night | 东京夜色主题 |
| GitHub Theme | GitHub 风格主题 |
| Winter Is Coming Theme | 冬季风格主题 |
| Ayu | 简洁优雅的主题 |
| vscode-icons | VSCode 官方图标库 |
代码片段 / 模板
| 名称 | 功能说明 |
|---|---|
| JavaScript (ES6) code snippets | ES6 代码片段 |
| Vue VSCode Snippets | Vue 代码片段 |
| Vue 3 Snippets | Vue 3 代码片段 |
| React snippets | React 代码片段 |
| HTML Snippets | HTML 代码片段 |
| React Native Tools | React Native 开发工具 |
数据库 / API 工具
| 名称 | 功能说明 |
|---|---|
| Thunder Client | 轻量级 REST API 客户端 |
| REST Client | 直接在 VSCode 发送 HTTP 请求 |
| MongoDB for VS Code | MongoDB 官方插件 |
| SQLite Viewer | 查看 SQLite 数据库文件 |
其他效率工具
| 名称 | 功能说明 |
|---|---|
| Markdown All in One ⭐ | Markdown 编辑增强，实时预览、目录生成 |
| Polacode | 生成高质量代码截图 |
| CodeSnap | 对代码进行截图和共享 |
| Peacock | 给 VSCode 窗口着色，方便区分多个工作区 |
| Code Spell Checker ⭐ | 代码拼写检查，遵循驼峰命名法 |
| Todo Tree ⭐ | 显示项目中的 TODO、FIXME 等注释 |
| TODO Highlight | 高亮显示 TODO、FIXME 等标记 |
| Better Comments ⭐ | 高亮不同类型的注释 |
| Bookmarks | 代码书签，快速跳转 |
| Project Manager | 项目管理，快速切换项目 |
| Settings Sync | 同步 VSCode 设置（新版已内置） |
| WakaTime | 编程时间统计 |
| Time Master | 编程活动指标和时间跟踪 |
远程开发
| 名称 | 功能说明 |
|---|---|
| Remote - SSH | 通过 SSH 连接远程服务器开发 |
| Remote - Containers | 在 Docker 容器中开发 |
| Remote - WSL | 在 Windows 子系统 Linux 中开发 |
| Live Share | 实时协作编程 |
文件管理
| 名称 | 功能说明 |
|---|---|
| File Utils | 文件操作增强（复制、移动、重命名等） |
| Advanced New File | 快速创建文件和文件夹 |
| File Nesting Updater | 文件嵌套管理 |
| GitHub Repositories | 快速打开 GitHub 仓库，无需克隆到本地 |
代码美化 / 错误提示
| 名称 | 功能说明 |
|---|---|
| Highlight Matching Tag | 高亮显示匹配的 HTML/XML 标签对 |
| Colorize | 可视化 CSS 颜色代码，显示颜色背景 |
| Image preview | 鼠标悬浮预览图片，显示尺寸和分辨率 |
| Error Lens ⭐ | 突出显示错误、警告和语法问题 |
| Pretty TypeScript Errors | 美化 TypeScript 错误信息，更易读 |
图片处理 / 优化
| 名称 | 功能说明 |
|---|---|
| TinyPNG Plus ⭐ | 在 VSCode 中直接压缩 PNG/JPG 图片，无损压缩 |
| Image Optimizer | 批量优化图片大小和质量 |
性能分析
| 名称 | 功能说明 |
|---|---|
| Import Cost | 显示导入包的大小 |
| VS Code Counter | 统计项目代码行数 |
特效插件
| 名称 | 功能说明 |
|---|---|
| Power Mode | 添加打字特效（粒子、烟火等） |
注：标记 ⭐ 的为个人常用插件
安装方法
通过 VSCode 内置商店：
- 打开 VSCode
- 点击左侧活动栏的扩展图标（或按
Ctrl+Shift+X） - 搜索插件名称
- 点击安装
通过命令行：
code --install-extension 插件ID批量安装常用插件：
# 创建一个脚本文件 install-extensions.sh code --install-extension ms-ceintl.vscode-language-pack-zh-hans code --install-extension ritwickdey.LiveServer code --install-extension esbenp.prettier-vscode code --install-extension dbaeumer.vscode-eslint code --install-extension eamodio.gitlens # ... 添加更多插件
推荐配置
在 VSCode 的 settings.json 中添加以下配置以优化开发体验：
{
// 自动保存
"files.autoSave": "afterDelay",
"files.autoSaveDelay": 1000,
// 格式化
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
// 代码提示
"editor.suggestSelection": "first",
"editor.snippetSuggestions": "top",
// 终端
"terminal.integrated.fontSize": 14,
"terminal.integrated.cursorStyle": "line"
}