VS Code 插件推荐

提升开发效率的Visual Studio Code插件推荐，打造最强代码编辑器。

🚀 必装插件

1. Chinese (Simplified) Language Pack

功能：中文语言包

特点：

界面汉化
菜单中文化
官方支持

发布者：Microsoft

安装命令：ext install MS-CEINTL.vscode-language-pack-zh-hans

2. Prettier - Code formatter

功能：代码格式化工具

特点：

支持多种语言
保存时自动格式化
团队代码风格统一
高度可配置

支持语言：JavaScript、TypeScript、CSS、HTML、JSON、Markdown等

配置示例：

json

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

3. ESLint

功能：JavaScript/TypeScript代码检查

特点：

实时代码检查
自动修复
自定义规则
团队规范统一

配置：需要项目中有.eslintrc配置文件

4. GitLens

功能：Git增强工具

特点：

显示代码作者
Git blame注解
提交历史查看
文件历史
分支对比

快捷功能：

行内显示最近提交
侧边栏Git视图
文件历史时间线

5. Path Intellisense

功能：路径自动补全

特点：

文件路径提示
智能补全
支持相对路径和绝对路径
减少拼写错误

📝 编辑增强类

6. Auto Rename Tag

功能：自动重命名配对的HTML/XML标签

特点：

同步修改开始和结束标签
支持JSX
支持Vue模板

使用场景：修改<div>为<section>时，自动修改闭合标签

7. Auto Close Tag

功能：自动闭合HTML/XML标签

特点：

自动添加闭合标签
支持自定义语言
JSX支持

8. Bracket Pair Colorizer 2 (已内置)

功能：括号配对着色

特点：

多层括号不同颜色
提高可读性
快速定位匹配括号

注意：VSCode 1.67+版本已内置此功能，配置：

json

{
  "editor.bracketPairColorization.enabled": true
}

9. indent-rainbow

功能：缩进着色

特点：

缩进层级着色
提高代码可读性
快速识别缩进错误

10. Better Comments

功能：增强注释显示

特点：

注释分类着色
TODO、FIXME高亮
自定义标签
提高注释可读性

效果：

javascript

// * 高亮信息
// ! 错误或警告
// ? 疑问
// TODO: 待办事项
// @param 参数说明

🎨 主题美化类

11. One Dark Pro

功能：流行的暗色主题

特点：

Atom风格
护眼配色
语法高亮丰富

12. Material Icon Theme

功能：Material Design图标

特点：

美化文件图标
文件夹图标
识别度高
多种配色

13. Dracula Official

功能：Dracula主题

特点：

经典配色
多编辑器统一
高对比度

14. GitHub Theme

功能：GitHub官方主题

特点：

亮色和暗色
GitHub风格
眼睛友好

🌐 Web开发类

15. Live Server

功能：本地开发服务器

特点：

实时重载
一键启动
支持热更新
移动端调试

快捷键：右键HTML文件 → Open with Live Server

16. HTML CSS Support

功能：HTML和CSS智能提示

特点：

CSS类名补全
ID选择器提示
属性提示
提升编写速度

17. CSS Peek

功能：快速查看CSS定义

特点：

在HTML中查看CSS样式
Ctrl+点击跳转
悬停预览
支持SCSS/LESS

18. Tailwind CSS IntelliSense

功能：Tailwind CSS智能提示

特点：

类名自动补全
颜色预览
文档悬停提示
语法高亮

19. PostCSS Language Support

功能：PostCSS语法支持

特点：

语法高亮
自动补全
错误检查

⚛️ React/Vue开发类

20. ES7+ React/Redux/React-Native snippets

功能：React代码片段

特点：

快速生成组件
Redux模板
React Hooks
PropTypes

常用代码片段：

rafce → React Arrow Function Component
useState → useState Hook
useEffect → useEffect Hook

21. Vetur (Vue 2) / Volar (Vue 3)

功能：Vue开发支持

特点：

语法高亮
智能补全
Emmet支持
代码格式化
TypeScript支持

22. JavaScript (ES6) code snippets

功能：ES6+代码片段

特点：

快速生成ES6语法
Import/Export
Promise/Async
箭头函数

🔧 开发工具类

23. REST Client

功能：HTTP请求测试

特点：

在VSCode中测试API
保存请求历史
环境变量支持
比Postman更轻量

使用方式：创建.http或.rest文件

http

### 获取用户列表
GET https://api.example.com/users
Content-Type: application/json

### 创建用户
POST https://api.example.com/users
Content-Type: application/json

{
  "name": "张三",
  "email": "zhangsan@example.com"
}

24. Thunder Client

功能：轻量级API测试工具

特点：

类似Postman界面
集成在VSCode中
支持环境变量
集合管理

推荐理由：比REST Client更直观，比Postman更轻量

25. Docker

功能：Docker集成

特点：

Dockerfile语法高亮
镜像管理
容器管理
Docker Compose支持

发布者：Microsoft

26. Remote - SSH

功能：远程SSH开发

特点：

SSH连接远程服务器
远程文件编辑
远程调试
终端集成

发布者：Microsoft

27. Remote - Containers

功能：容器内开发

特点：

在Docker容器中开发
隔离开发环境
一致性环境
devcontainer.json配置

28. Database Client

功能：数据库管理工具

特点：

支持MySQL、PostgreSQL、Redis等
SQL执行
数据查看编辑
导入导出

📊 数据可视化类

29. vscode-icons

功能：文件图标主题

特点：

丰富的文件图标
识别更多文件类型
提升视觉体验

30. Peacock

功能：工作区颜色区分

特点：

不同项目不同颜色
快速识别工作区
多窗口开发必备

使用场景：同时打开多个VSCode窗口时，通过颜色区分项目

🔍 搜索增强类

31. Search node_modules

功能：搜索node_modules

特点：

快速搜索依赖包代码
查看第三方库实现
学习优秀代码

32. Todo Tree

功能：TODO高亮和管理

特点：

扫描所有TODO注释
树形视图展示
快速跳转
自定义标签

支持标签：TODO、FIXME、BUG、HACK、NOTE等

📝 Markdown类

33. Markdown All in One

功能：Markdown全功能支持

特点：

实时预览
快捷键支持
目录生成
表格格式化
数学公式
导出HTML/PDF

快捷键：

预览：Ctrl + Shift + V
侧边预览：Ctrl + K V
粗体：Ctrl + B
斜体：Ctrl + I

34. Markdown Preview Enhanced

功能：增强的Markdown预览

特点：

强大的预览功能
代码块执行
导入外部文件
自定义CSS
幻灯片制作

35. markdownlint

功能：Markdown规范检查

特点：

语法规范检查
实时提示
自动修复
自定义规则

🎯 代码智能提示类

36. Tabnine AI Autocomplete

功能：AI代码补全

特点：

基于机器学习
支持多种语言
上下文感知
整行补全

免费版本：基础补全功能

37. GitHub Copilot

功能：AI编程助手

特点：

GitHub官方AI助手
代码建议
注释生成代码
测试用例生成

注意：需要付费订阅（学生和开源贡献者免费）

38. IntelliCode

功能：AI辅助编程

特点：

智能代码补全
基于团队代码
上下文感知
Microsoft官方

发布者：Microsoft

🧪 测试类

39. Jest

功能：Jest测试支持

特点：

测试运行
覆盖率显示
调试测试
实时反馈

40. Test Explorer UI

功能：测试资源管理器

特点：

统一测试界面
运行测试
查看结果
支持多种测试框架

📱 移动开发类

41. React Native Tools

功能：React Native开发

特点：

调试支持
命令面板
IntelliSense
代码片段

42. Flutter

功能：Flutter开发支持

特点：

Dart语法支持
热重载
Widget预览
调试工具

🔐 代码安全类

43. SonarLint

功能：代码质量检测

特点：

实时代码分析
安全漏洞检测
代码异味
Bug检测

🎨 CSS工具类

44. Color Highlight

功能：颜色高亮显示

特点：

显示颜色值
颜色预览
多种格式支持
提升视觉效果

45. CSS Modules

功能：CSS Modules支持

特点：

类名补全
跳转定义
重命名支持

💡 实用工具类

46. Code Spell Checker

功能：拼写检查

特点：

英文拼写检查
自定义词典
支持驼峰命名
减少拼写错误

47. Import Cost

功能：显示导入包的大小

特点：

实时显示包大小
优化打包体积
性能优化
webpack分析

48. Version Lens

功能：显示包版本信息

特点：

package.json版本提示
显示最新版本
一键更新
依赖管理

49. Error Lens

功能：错误信息增强显示

特点：

行内显示错误
更直观的错误提示
警告高亮
提升调试效率

50. Bookmarks

功能：代码书签

特点：

标记重要代码
快速跳转
书签列表
项目间同步

📦 项目管理类

51. Project Manager

功能：项目管理

特点：

快速切换项目
项目收藏
自动检测Git项目
快捷打开

快捷键：Ctrl + Alt + P (自定义)

52. Settings Sync

功能：设置同步

特点：

同步VSCode配置
插件同步
快捷键同步
跨设备使用

注意：VSCode已内置设置同步功能（Settings Sync）

🎬 演示录制类

53. CodeSnap

功能：代码截图工具

特点：

漂亮的代码截图
自动语法高亮
自定义主题
分享代码片段

使用方式：选中代码 → 右键 → CodeSnap

54. Polacode

功能：代码截图（类似Polaroid相机）

特点：

拍立得风格
代码分享
美观的截图

💻 终端增强类

55. Terminal

功能：增强终端

特点：

多终端管理
快速切换
自定义Shell
终端历史

56. Output Colorizer

功能：输出日志着色

特点：

日志高亮
提升可读性
快速定位错误

🚀 性能优化建议

插件使用建议

不要安装太多：插件越多，启动越慢
按需启用：为特定工作区启用特定插件
定期清理：卸载不用的插件
检查性能：Help → Show Running Extensions

性能优化配置

json

{
  "extensions.autoUpdate": false,
  "extensions.autoCheckUpdates": false,
  "files.watcherExclude": {
    "**/.git/objects/**": true,
    "**/.git/subtree-cache/**": true,
    "**/node_modules/**": true,
    "**/.hg/store/**": true
  }
}

工作区推荐插件配置

在项目根目录创建.vscode/extensions.json：

json

{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "eamodio.gitlens"
  ]
}

📚 快捷键推荐

常用快捷键

功能	Windows/Linux	Mac
命令面板	`Ctrl + Shift + P`	`Cmd + Shift + P`
快速打开文件	`Ctrl + P`	`Cmd + P`
查找文件内容	`Ctrl + Shift + F`	`Cmd + Shift + F`
多光标选择	`Ctrl + Alt + ↓`	`Cmd + Option + ↓`
跳转定义	`F12`	`F12`
格式化文档	`Shift + Alt + F`	`Shift + Option + F`
显示悬停提示	`Ctrl + K Ctrl + I`	`Cmd + K Cmd + I`

🔒 安全提醒

只从VSCode Marketplace安装插件
检查插件的发布者和评分
注意插件请求的权限
定期更新插件
对于需要联网的插件要注意隐私

VS Code 插件推荐 ​

🚀 必装插件 ​

1. Chinese (Simplified) Language Pack ​

2. Prettier - Code formatter ​

3. ESLint ​

4. GitLens ​

5. Path Intellisense ​

📝 编辑增强类 ​

6. Auto Rename Tag ​

7. Auto Close Tag ​

8. Bracket Pair Colorizer 2 (已内置) ​

9. indent-rainbow ​

10. Better Comments ​

🎨 主题美化类 ​

11. One Dark Pro ​

12. Material Icon Theme ​

13. Dracula Official ​

14. GitHub Theme ​

🌐 Web开发类 ​

15. Live Server ​

16. HTML CSS Support ​

17. CSS Peek ​

18. Tailwind CSS IntelliSense ​

19. PostCSS Language Support ​

⚛️ React/Vue开发类 ​

20. ES7+ React/Redux/React-Native snippets ​

21. Vetur (Vue 2) / Volar (Vue 3) ​

22. JavaScript (ES6) code snippets ​

🔧 开发工具类 ​

23. REST Client ​

24. Thunder Client ​

25. Docker ​

26. Remote - SSH ​

27. Remote - Containers ​

28. Database Client ​

📊 数据可视化类 ​

29. vscode-icons ​

30. Peacock ​

🔍 搜索增强类 ​

31. Search node_modules ​

32. Todo Tree ​

📝 Markdown类 ​

33. Markdown All in One ​

34. Markdown Preview Enhanced ​

35. markdownlint ​

🎯 代码智能提示类 ​

36. Tabnine AI Autocomplete ​

37. GitHub Copilot ​

38. IntelliCode ​

🧪 测试类 ​

39. Jest ​

40. Test Explorer UI ​

📱 移动开发类 ​

41. React Native Tools ​

42. Flutter ​

🔐 代码安全类 ​

43. SonarLint ​

🎨 CSS工具类 ​

44. Color Highlight ​

45. CSS Modules ​

💡 实用工具类 ​

46. Code Spell Checker ​

47. Import Cost ​

48. Version Lens ​

49. Error Lens ​

50. Bookmarks ​

📦 项目管理类 ​

51. Project Manager ​

52. Settings Sync ​

🎬 演示录制类 ​

53. CodeSnap ​

54. Polacode ​

💻 终端增强类 ​

55. Terminal ​

56. Output Colorizer ​

🚀 性能优化建议 ​

插件使用建议 ​

性能优化配置 ​

工作区推荐插件配置 ​

📚 快捷键推荐 ​

VS Code 插件推荐

🚀 必装插件

1. Chinese (Simplified) Language Pack

2. Prettier - Code formatter

3. ESLint

4. GitLens

5. Path Intellisense

📝 编辑增强类

6. Auto Rename Tag

7. Auto Close Tag

8. Bracket Pair Colorizer 2 (已内置)

9. indent-rainbow

10. Better Comments

🎨 主题美化类

11. One Dark Pro

12. Material Icon Theme

13. Dracula Official

14. GitHub Theme

🌐 Web开发类

15. Live Server

16. HTML CSS Support

17. CSS Peek

18. Tailwind CSS IntelliSense

19. PostCSS Language Support

⚛️ React/Vue开发类

20. ES7+ React/Redux/React-Native snippets

21. Vetur (Vue 2) / Volar (Vue 3)

22. JavaScript (ES6) code snippets

🔧 开发工具类

23. REST Client

24. Thunder Client

25. Docker

26. Remote - SSH

27. Remote - Containers

28. Database Client

📊 数据可视化类

29. vscode-icons

30. Peacock

🔍 搜索增强类

31. Search node_modules

32. Todo Tree

📝 Markdown类

33. Markdown All in One

34. Markdown Preview Enhanced

35. markdownlint

🎯 代码智能提示类

36. Tabnine AI Autocomplete

37. GitHub Copilot

38. IntelliCode

🧪 测试类

39. Jest

40. Test Explorer UI

📱 移动开发类

41. React Native Tools

42. Flutter

🔐 代码安全类

43. SonarLint

🎨 CSS工具类

44. Color Highlight

45. CSS Modules

💡 实用工具类

46. Code Spell Checker

47. Import Cost

48. Version Lens

49. Error Lens

50. Bookmarks

📦 项目管理类

51. Project Manager

52. Settings Sync

🎬 演示录制类

53. CodeSnap

54. Polacode

💻 终端增强类

55. Terminal

56. Output Colorizer

🚀 性能优化建议

插件使用建议

性能优化配置

工作区推荐插件配置

📚 快捷键推荐