VSCode 好用插件推荐

VSCode 插件清单

一、插件导入

VSCode 开发插件完整汇总文档

文档说明

本文档汇总当前已安装全部VSCode插件,包含插件名称、官方ID、功能用途、分类标签;

支持一键批量安装命令,方便新环境快速复现开发配置。

批量安装总命令

Windows PowerShell / Mac / Linux 终端执行

bash 复制代码
code --install-extension junhanle.code-runner, sergii-ilenko.color-highlight, mikestead.dotenv, jakkapri.env, mhutchie.git-graph, redjue.git-commit-plugin, redhat.java, adamcaviness.monokai-dark-soda, nespinozacr.mysql-autocomplete, highagency.pencil, hoovercj.vscode-power-mode, esbenp.prettier-vscode, alibabacloud.tongyi-lingma, shaldie.background, ms-ceintl.vscode-language-pack-zh-hans, anthropic.claude-code, vscjava.vscode-java-debug, dbaeumer.vscode-eslint, vscjava.vscode-java-pack, waderyan.gitblame, donjayamanne.githistory, vscjava.vscode-gradle, ritwickdey.liveserver, yzane.markdown-pdf, yiyi.wang-markdown-preview-enhanced, philippkief.material-icon-theme, vscjava.vscode-maven, enoyao.open-browser-preview, rvest.prettier-eslint, vscjava.vscode-project-manager, ctri.srd-codefree, tencent-cloud.codebuddy, vue.volar, vscjava.vscode-test-runner

二、插件分类明细

1. Java 后端开发套件(核心)

插件名称 插件ID 功能描述
Language Support for Java(TM) by Red Hat redhat.java Java语法提示、重构、代码检查,基础Java开发依赖
Debugger for Java vscjava.vscode-java-debug Java断点调试、变量监控、堆栈查看
Extension Pack for Java vscjava.vscode-java-pack Java开发合集包,集成全套基础开发工具
Gradle for Java vscjava.vscode-gradle Gradle项目管理,执行task、构建脚本提示
Maven for Java vscjava.vscode-maven Maven项目管理,骨架生成、生命周期命令执行
Project Manager for Java vscjava.vscode-project-manager 多Java工程快速切换、项目统一管理
Test Runner for Java vscjava.vscode-test-runner JUnit/TestNG单元测试运行、调试、结果展示

2. Git 版本控制工具集

插件名称 插件ID 功能描述
Git Graph mhutchie.git-graph 可视化Git提交图谱,分支切换、合并操作
git-commit-plugin redjue.git-commit-plugin 标准化Git提交注释自动生成
Git Blame waderyan.gitblame 行级展示代码最后修改人、提交时间
Git History donjayamanne.githistory 查看完整提交日志、单文件历史、版本对比

3. 前端开发 & Vue 框架

插件名称 插件ID 功能描述
Vue (Official) vue.volar Vue官方.vue文件语法支持,Vue2/Vue3提示、格式化
Live Server ritwickdey.liveserver 前端本地热更新服务器,静态页面实时刷新
Open Browser Preview enoyao.open-browser-preview 一键调用默认浏览器预览页面

4. 代码格式化 & 规范校验

插件名称 插件ID 功能描述
Prettier - Code formatter esbenp.prettier-vscode 通用代码格式化,统一JS/HTML/CSS/Vue排版
ESLint dbaeumer.vscode-eslint JS/TS代码语法、规范实时校验
Prettier ESLint rvest.prettier-eslint 整合Prettier格式化+ESLint规范修复一体化

5. AI 编程助手(多厂商)

插件名称 插件ID 功能描述
Qoder CN (通义灵码) alibabacloud.tongyi-lingma 阿里云AI编码,代码补全、生成、重构、注释
Claude Code for VS Code anthropic.claude-code Anthropic Claude大模型IDE插件,代码解析优化
SRD CodeFree ctri.srd-codefree 中国电信研究院国产AI编程助手
Tencent Cloud CodeBuddy tencent-cloud.codebuddy 腾讯云AI结对编程,Bug修复、代码优化

6. Markdown 文档工具

插件名称 插件ID 功能描述
Markdown PDF yzane.markdown-pdf Markdown文档一键导出PDF文件
Markdown Preview Enhanced yiyi.wang-markdown-preview-enhanced 增强预览,支持流程图、公式、多格式导出

7. 美化、主题、界面增强

插件名称 插件ID 功能描述
Monokai Dark Soda adamcaviness.monokai-dark-soda 深色代码主题,高对比度高亮配色
Material Icon Theme philippkief.material-icon-theme 文件/文件夹彩色图标美化
background shaldie.background 自定义VSCode编辑器背景图片
Color Highlight sergii-ilenko.color-highlight 代码内颜色值实时色块预览
Power Mode hoovercj.vscode-power-mode 敲代码火花、抖动特效,提升编码氛围感

8. 环境配置 & 数据库工具

插件名称 插件ID 功能描述
DotENV mikestead.dotenv .env环境变量文件语法高亮
ENV jakkapri.env env文件格式化、语法校验增强
MySQL Autocomplete nespinozacr.mysql-autocomplete SQL语句自动补全,MySQL语法提示

9. 通用运行、辅助工具

插件名称 插件ID 功能描述
Code Runner junhanle.code-runner 多语言代码片段一键运行,支持Python/Shell/Java等
Chinese (Simplified) 简体中文语言包 ms-ceintl.vscode-language-pack-zh-hans VSCode官方界面汉化包
Pencil highagency.pencil Pencil设计文件查看支持

三、使用说明

  1. 批量安装

    • 复制本文档「批量安装总命令」
    • 打开终端(VSCode内置终端/系统终端),粘贴执行
    • 等待全部插件自动下载安装完成,重启VSCode生效
  2. 单独安装某一个插件

    bash 复制代码
    # 格式 code --install-extension 插件ID
    code --install-extension vue.volar
  3. 图形化安装方式

    • Ctrl+Shift+P 打开命令面板,输入 Extensions: Install Extensions
    • 搜索框粘贴插件ID,点击安装
bash 复制代码
## 使用方法
1. 新建空白文本文档,将上方全部内容完整复制进去
2. 文件另存为 `vscode插件.md`,编码选择 UTF-8
3. 打开VSCode可直接预览、复制安装命令,新电脑一键部署全套开发环境

code方式安装无效

code --install-extension 插件id 这种方式执行安装无效。

bash 复制代码
code --install-extension ms-ceintl.vscode-language-pack-zh-hans
code --install-extension ms-ceintl.vscode-language-pack-zh-hans

正确安装方式

打开 VSCode 软件,进入扩展面板(Ctrl+Shift+X),在搜索框粘贴下方插件 ID ,点击安装即可。可参照「二、插件分类明细」了解各插件用途。

序号 插件 ID 插件名称 分类
1 junhanle.code-runner Code Runner 通用运行、辅助工具
2 sergii-ilenko.color-highlight Color Highlight 美化、主题、界面增强
3 mikestead.dotenv DotENV 环境配置、数据库工具
4 jakkapri.env ENV 环境配置、数据库工具
5 mhutchie.git-graph Git Graph Git 版本控制工具集
6 redjue.git-commit-plugin git-commit-plugin Git 版本控制工具集
7 redhat.java Language Support for Java(TM) by Red Hat Java 后端开发套件
8 adamcaviness.monokai-dark-soda Monokai Dark Soda 美化、主题、界面增强
9 nespinozacr.mysql-autocomplete MySQL Autocomplete 环境配置、数据库工具
10 highagency.pencil Pencil 通用运行、辅助工具
11 hoovercj.vscode-power-mode Power Mode 美化、主题、界面增强
12 esbenp.prettier-vscode Prettier - Code formatter 代码格式化、规范校验
13 alibabacloud.tongyi-lingma Qoder CN (通义灵码) AI 编程助手
14 shaldie.background background 美化、主题、界面增强
15 ms-ceintl.vscode-language-pack-zh-hans Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code 通用运行、辅助工具
16 anthropic.claude-code Claude Code for VS Code AI 编程助手
17 vscjava.vscode-java-debug Debugger for Java Java 后端开发套件
18 dbaeumer.vscode-eslint ESLint 代码格式化、规范校验
19 vscjava.vscode-java-pack Extension Pack for Java Java 后端开发套件
20 waderyan.gitblame Git Blame Git 版本控制工具集
21 donjayamanne.githistory Git History Git 版本控制工具集
22 vscjava.vscode-gradle Gradle for Java Java 后端开发套件
23 ritwickdey.liveserver Live Server 前端开发、Vue 框架
24 yzane.markdown-pdf Markdown PDF Markdown 文档工具
25 yiyi.wang-markdown-preview-enhanced Markdown Preview Enhanced Markdown 文档工具
26 philippkief.material-icon-theme Material Icon Theme 美化、主题、界面增强
27 vscjava.vscode-maven Maven for Java Java 后端开发套件
28 enoyao.open-browser-preview Open Browser Preview 前端开发、Vue 框架
29 rvest.prettier-eslint Prettier ESLint 代码格式化、规范校验
30 vscjava.vscode-project-manager Project Manager for Java Java 后端开发套件
31 ctri.srd-codefree SRD CodeFree AI 编程助手
32 tencent-cloud.codebuddy Tencent Cloud CodeBuddy AI 编程助手
33 vue.volar Vue (Official) 前端开发、Vue 框架
34 vscjava.vscode-test-runner Test Runner for Java Java 后端开发套件
相关推荐
慢功夫1 天前
💡第五篇:VSCode插件是如何与主进程通信的?
前端·visual studio code
凉凉的知识库1 天前
用 GPT-5.6 SOL 写了个 VS Code 插件,效果出乎意料
api·测试·visual studio code
土土哥tutuge3 天前
开源项目 Claude Code Notifier Plus:让 Claude Code 真正需要你时再提醒你
ai编程·visual studio code
慢功夫4 天前
💡第四篇:编辑器内核, Monaco model、URI、dirty 状态和 tabs 是怎么协作的?
前端·visual studio code
annekqiu5 天前
VS code 部署agent
github·visual studio code
RequieMa5 天前
再见了,所有的 VS Code 预览窗
visual studio code
mCell8 天前
从 VS Code 学系统架构:回到当时,理解它为什么这样演进
架构·源码阅读·visual studio code
你脑门上的脚印8 天前
VSCode 更新后 Cmd(Ctrl)+点击终端地址在编辑器内部打开?一个设置帮你搞定
visual studio code
慢功夫10 天前
开篇:VS Code 为什么不是一个普通 React App
前端·visual studio code