VS Code 插件推荐 - 提升开发效率必备工具

Visual Studio Code 是目前最受欢迎的代码编辑器之一，丰富的插件生态是其核心优势。本文推荐一些实用的 VS Code 插件。

通用插件

中文语言包

• 插件名：Chinese (Simplified) Language Pack
• 用途：将 VS Code 界面汉化
• 安装：扩展商店搜索 “Chinese” 安装

主题美化

插件名	说明
One Dark Pro	经典暗色主题
Dracula Official	流行的暗色主题
Material Theme	Material 风格主题
GitHub Theme	GitHub 官方主题
Nord	北欧风格主题

图标主题

插件名	说明
Material Icon Theme	Material 风格图标
vscode-icons	VS Code 官方图标
Material Theme Icons	配合 Material Theme

字体推荐

推荐安装编程字体：

• Fira Code：支持连字符
• JetBrains Mono：JetBrains 出品
• Source Code Pro：Adobe 出品
• Cascadia Code：微软出品

代码编辑

自动补全

Tabnine AI Autocomplete

• AI 智能代码补全
• 支持多种语言
• 免费版功能已足够

GitHub Copilot

• GitHub AI 编程助手
• 需要订阅

Codeium

• 免费 AI 代码补全
• 支持多种语言

代码片段

JavaScript (ES6) code snippets

• ES6 语法代码片段
• 快速生成常用代码

Simple React Snippets

• React 代码片段
• 快速创建组件

Vue 3 Snippets

• Vue 3 代码片段
• Composition API 支持

括号增强

Bracket Pair Colorizer 2

• 括号配对着色
• 已内置，可启用

"editor.bracketPairColorization.enabled": true

Rainbow Brackets

• 彩虹括号
• 多种颜色区分

代码格式化

Prettier

• 代码格式化工具
• 支持多种语言

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

ESLint

• JavaScript/TypeScript 代码检查
• 配合 Prettier 使用

代码检查

Error Lens

• 行内显示错误信息
• 无需悬停查看

Code Spell Checker

• 拼写检查
• 支持多种语言

Git 工具

Git 增强

GitLens

• Git 超级插件
• 显示代码作者
• 提交历史查看

主要功能：

• 行级 blame 信息
• 文件历史
• 对比视图
• 悬停显示提交

Git Graph

• Git 分支图形化
• 可视化提交历史
• 方便的分支操作

Git History

• 查看文件历史
• 对比版本差异
• 查看提交详情

GitHub 集成

GitHub Pull Requests and Issues

• PR 和 Issue 管理
• 代码审查
• 在线操作

GitHub Copilot

• AI 代码建议
• 需要订阅

前端开发

HTML/CSS

Auto Rename Tag

• 自动重命名配对标签
• 提高编写效率

HTML CSS Support

• CSS 类名补全
• 支持 class 和 id

IntelliSense for CSS class names

• CSS 类名智能提示
• 自动扫描样式文件

CSS Peek

• 快速查看 CSS 定义
• Ctrl+点击跳转

JavaScript/TypeScript

ES7+ React/Redux/React-Native snippets

• React 代码片段
• 支持 Hooks

TypeScript Importer

• 自动导入 TypeScript 模块

Import Cost

• 显示导入包大小
• 优化包体积

Vue 开发

Vue - Official

• Vue 官方插件
• 语法高亮
• 智能提示
• 类型检查

Vue 3 Snippets

• Vue 3 代码片段
• 快速生成代码

React 开发

ES7+ React/Redux/React-Native snippets

• React 代码片段
• 快速创建组件

React Native Tools

• React Native 开发支持
• 调试功能

小程序开发

WXML - Language Services

• 微信小程序语法支持

minapp

• 小程序开发工具
• 多平台支持

后端开发

Python

Python

• 微软官方 Python 插件
• 智能提示
• 调试支持

Pylance

• 快速 Python 语言服务器
• 类型检查
• 自动导入

Python Indent

• Python 缩进增强
• 自动缩进

Jupyter

• Jupyter Notebook 支持
• 交互式编程

Node.js

Node.js Tools

• Node.js 开发支持
• 智能提示

npm Intellisense

• npm 包自动补全
• 导入提示

Node.js Modules Intellisense

• Node.js 模块补全

Go

Go

• Go 官方插件
• 智能提示
• 调试支持

Java

Extension Pack for Java

• Java 开发包
• 包含多个插件

Language Support for Java

• Java 语言支持
• 智能提示

PHP

PHP Intelephense

• PHP 语言服务器
• 高性能

PHP Debug

• PHP 调试支持

Rust

rust-analyzer

• Rust 语言服务器
• 智能提示

C/C++

C/C++

• 微软官方插件
• 智能提示
• 调试支持

数据库工具

SQLTools

• 数据库管理工具
• 支持多种数据库

MySQL

• MySQL 支持
• 配合 SQLTools

PostgreSQL

• PostgreSQL 支持

远程开发

Remote - SSH

• SSH 远程开发
• 编辑远程文件

Remote - Containers

• 容器内开发
• Docker 集成

Remote - WSL

• WSL 开发支持
• Windows Linux 子系统

Live Share

• 实时协作编程
• 多人编辑

效率工具

快速导航

Path Intellisense

• 路径自动补全
• 图片预览

Auto Import

• 自动导入
• 支持 TypeScript

Project Manager

• 项目管理
• 快速切换项目

搜索增强

Everything

• Windows 快速搜索
• 需要安装 Everything

Fuzzy Search

• 模糊搜索
• 快速查找文件

代码生成

CodeSnap

• 代码截图
• 美化分享

Carbon-now-sh

• 代码转图片
• 美化展示

Markdown

Markdown All in One

• Markdown 增强
• 快捷键支持
• 实时预览

Markdown Preview Enhanced

• 增强预览
• 支持数学公式
• 支持流程图

Markdownlint

• Markdown 格式检查
• 规范写作

文档工具

Docs-y

• 文档生成
• 注释转文档

REST Client

• HTTP 请求测试
• 类似 Postman

终端工具

Terminal

• 终端增强
• 多终端支持

Code Runner

• 代码运行
• 支持多种语言

其他推荐

Docker

Docker

• Docker 管理
• 容器操作

Docker Explorer

• Docker 资源浏览

翻译工具

Comment Translate

• 注释翻译
• 悬停翻译

Google Translate

• 谷歌翻译
• 快捷翻译

TODO 管理

Todo Tree

• TODO 高亮
• 树形展示

Todo List

• TODO 列表管理

环境变量

DotENV

• .env 文件支持
• 语法高亮

日志查看

Log File Highlighter

• 日志文件高亮
• 多种格式支持

配置优化

settings.json 推荐

{
  "editor.fontSize": 14,
  "editor.fontFamily": "'Fira Code', Consolas, monospace",
  "editor.fontLigatures": true,
  "editor.formatOnSave": true,
  "editor.minimap.enabled": false,
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": true,
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,
  "workbench.iconTheme": "material-icon-theme",
  "workbench.colorTheme": "One Dark Pro",
  "terminal.integrated.fontSize": 13,
  "git.autofetch": true,
  "git.confirmSync": false
}

快捷键推荐

快捷键	功能
Ctrl + P	快速打开文件
Ctrl + Shift + P	命令面板
Ctrl + D	选择下一个相同词
Ctrl + Shift + K	删除整行
Alt + ↑/↓	移动行
Shift + Alt + ↑/↓	复制行
Ctrl + /	注释/取消注释
Ctrl + B	切换侧边栏
Ctrl + `	打开终端

总结

VS Code 插件丰富，但不宜安装过多。建议：

1. 根据开发需求选择
2. 定期清理不用的插件
3. 关注插件性能影响
4. 保持插件更新

合理使用插件可以大幅提升开发效率，但也需要注意不要过度依赖。