上一篇文章《VSCode 常用快捷键大全》，我们了解到了 VSCode 中的常用快捷键。学会了快捷键可以让我们更高效和迅速的编写代码。但是没有 IDE 中的一些辅助功能，还是美中不足。

VSCode 没有安装插件，就等同于一把枪没有安装配件，打把的时候还是缺失精准度，开枪的时候也会有很重的后坐力。当然没有插件，也可以很好的编写代码，就是没有那么强而已。

所以这篇文章会给大家介绍 VSCode 中最常用的插件，让我们的编辑器加上一双翅膀，让我们在编写代码的过程中如虎添翼的感觉。

🌟 所有插件，只要搜索插件名就能找到哦！

「一」国人必备集合

这些插件都是我们作为中国人必备的，妈妈再也不怕我们看不懂英文了。

VSCode 中文简体包

插件名：Chinese (Simplified) Language Pack for Visual Studio Code

这个插件一键把整个 VSCode 的文字转换成中文。一个全中文化的 IDE 是我们特别需要的。而且这个是官方汉化包，理解无障碍。

代码翻译

插件名：翻译(英汉词典)

英语不是很好的童鞋，在写代码的时候经常会使用“某道翻译”，但是其实对于代码来说，很多时候我们会用驼峰、小驼峰、下划线等等写法来写变量名、属性名、类名和方法名的。这种写法想使用“某道翻译”在编辑器中悬浮翻译就是不可能了。

找了很久我为大家找到一个非常好用的一个插件可以解决这个问题！

本地 77 万词条英汉词典，不依赖任何在线翻译 API，无查询次数限制。可翻译驼峰和下划线命名，及对整个文件中的标识符批量翻译。

检测代码英文单词错误

插件名：Code Spell Checker

一个基本的拼写检查器，可以检测驼峰写法。这个拼写检查程序的目标是帮助捕获常见的拼写错误。在编写代码的时候，我们都是用英文单词，很多时候我们都会写错单词的可能性。用错了单词其实对于维护性是有一定的影响的。

使用有意义的单词做为方法名、类名和变量名会给自己代码更多的意义和含义。当自己或者别人去查看代码时更容易懂其中的用意。但是如果我们拼错了单词，有些时候就无法理解这个单词是什么意思了。

所以这个插件对我们来说非常实用，就算是老外都非常多人在使用它。（目前有 100 多万下载量）

「二」主题集合

一个程序员一天 8-12 个小时都是看着编辑器和代码。如果我们的编辑器不好看，没有一定的美观和吸引力，怎么可能耐看不厌呢？加上长期看代码，一个舒服的主题自然是必备之一。

这里介绍几款我最喜欢的主题给大家使用。有更多大家喜欢的主题欢迎在评论中提出，我会补充到这里哦！

Dracula Theme

主题名：Dracula Official

这款主题主调色是偏深紫色，我用了这个主题至少也有 2-3 年，一直都很喜欢。里面代码的高亮和颜色都很细致，很适合长期看。这个主题的颜色有根据不同的语言做了适配，无论我们是在开发什么语言都非常好看。

Material Theme

主题名：Material Theme

这款也是非常出名的主题，在非常多的 IDE/编辑器都有。用习惯这个主题的可以在 VSCode 中安装使用。使用量也是有 200 多万+。这款主题在我使用SublimeText的时候非常热爱。（也用了好几年）

Nebula Theme

主题名：Nebula Theme

这一款是我现在在用的小众主题。配色与 Dracula 非常相似，但是有更多的亮色，颜色的变化幅度也没有那么大，相比 Dracula 更为顺眼。当然这个也要看个人喜好哈。

Atom One Dark Theme

主题名：Atom One Dark Theme

我认识的一些小伙伴用过 Atom，也有这么一部分小伙伴特别喜欢这个主题。

One Monokai Theme

主题名：One Monokai Theme

对长期使用SublimeText的Monokai的童鞋们，对这款主题应该感兴趣。毕竟 Monokai 主题陪伴了我们挺长一段时间的。（不好了要暴露年龄了 😂）

在这里插入图片描述

GitHub Plus Theme

主题名：GitHub Plus Theme

对终于有一个白色的主题了，但是个人对白色的主题不怎么感冒。最近连微信都加入了黑暗世界，所以我已经习惯所有 UI 都是黑暗模式了。但是毕竟还是有童鞋特别喜爱白色的。

这里推荐一款与 GitHub 一样色系的白色主题（我可以说是我唯一可以考虑使用白色的一款，有童鞋有自己喜欢的白色主题可以在评论中留言给我哦！）

🌟 小总结
VSCode 中还有非常多的主题可以选择，如果我推荐的主题中没有你们喜欢的，可以在插件搜索框中输入theme，就会出来很多的主题供大家自由选择哦！

在这里插入图片描述

「三」图标主题集合

安装了编辑器主题，不安装图标主题就等同于 💐 鲜花插在了 💩 牛粪上。这里推荐两款我自己使用过的图标主题。

Material Icon Theme

主题名：Material Icon Theme

占了大部分人都是用这个图标主题，内含非常齐全的图标，基本你能想到的文件都在内了。非常推荐使用！

VSCode Icons

主题名：vscode-icons

这一款是 VSCode 官方的图标主题包，有超过 500 万+下载量。可以说是和 Material Icon 一样占了另外一大部分人在使用的一款主题。看个人喜好选择使用。个人觉得两款最大的区别在于文件夹。但是觉得 Material Icon 做的图标相对更加协调一些。

「四」实用插件集合

这里给小伙伴们介绍一些在其他 IDE 都有可能用过的超级实用插件和功能。这些插件主要是强化编辑器的功能，让我们在开发过程中得到非常大的帮助。

代码书签

插件名：Bookmarks

它是代码中导航，在重要位置之间轻松快速地移动。不再需要搜索代码。它还支持一组选择命令，允许我们选择书签行和书签行之间的区域。它对于日志文件分析非常有用。

以下是书签提供的一些功能:

在代码中标记/取消标记位置
在代码中标记位置并给出名称
在书签之间来回跳转
查看一个文件中所有书签的列表
查看项目中所有书签的列表
专用侧杆
带有书签的行
选择书签之间的区域

这里附上我经常使用的几个这个插件的命令：

Bookmarks: List 列出当前文件中的所有书签
Bookmarks: List from All Files 列出当前项目下所有书签
Bookmarks: Clear 删除当前文件中的所有书签
Bookmarks: Clear from All Files 删除当前项目下的所有书签

我们还可以通过打开侧边栏中的书签 tab 查看所有标签：

括号对彩色化

插件名：Bracket Pair Colorizer 2

这个扩展使用颜色来标识匹配的括号。用户可以定义要如何匹配，以及要使用哪些颜色。在代码量比较多的情况下，括号也会变得非常的多，有了颜色的标识会给开发者带来更好的识别能力。

增强 Git 功能

插件名：GitLens

增强 VSCode 中内置的 Git 功能——通过 Git blame 注释和代码透镜，一眼就能看到代码作者的身份，无缝导航和探索 Git 存储库，通过强大的比较命令获得有价值的见解，等等。使用Git代码管理的开发者们，这个是一个必装插件之一！

Git 历史记录

插件名：Git History

对于一些开发者习惯使用编辑器中的 Git 管理工具的，不太喜欢要打开另外一个 Git UI 工具的同学，这一款插件满足你查询所有 Git 记录的需求。

查看和搜索 git 日志中的图形和详细信息。
查看文件以前的副本。
查看和搜索历史
比较分支/提交记录/文件
更多～

实时协作编辑

插件名：Live Share

Visual Studio Live Share 允许我们与他人实时协作编辑和调试，不管我们使用的是哪种编程语言或正在构建的应用程序类型。它允许我们立即(并且安全地)共享我们当前的项目，然后根据需要共享调试会话、终端实例、本地主机 web 应用程序、语音呼叫等等！加入我们的会话的开发人员从我们的环境中接收所有的编辑器上下文(例如，语言服务、调试)，这确保了他们可以立即开始有效地协作，而不需要克隆任何代码或安装任何 sdk。

此外，与传统的结对编程不同，Visual Studio Live Share 允许开发人员一起工作，同时保留他们的个人编辑器首选项(例如主题、键绑定)，以及拥有自己的游标。这允许我们在跟随他人和自己探索想法/任务之间无缝过渡。在实践中，这种协作和独立工作的能力为许多常见用例提供了一种更自然的协作体验。

要使用这个协同软件，首先我们需要登陆（推荐使用 GitHub 登陆）。登陆后点击下方的Live Share:

然后编辑器就会弹出以下提示，具体意思就是说，我们的实时共享会话已经开启，邀请连接已经被复制，可以发给你的协助开发者。

这个时候我们可以把连接发给我们的协助者，这里对方必须安装了Live Share的插件并且必须是登陆状态。

这个时候对方只需要点击侧边栏的Live Share图标，然后在会话详细信息中找到并且点击加入协作会话...。

点击后编辑器上方会出现一个输入框，对方只需要输入我们提供的邀请连接然后按回车即可。

协助完毕后，我们可以点击下方的图中的图标

点击图标后，上方会出现一个选择弹窗，选择Stop Collaboration Session就可以停止协助会话了。

路径智能提示

插件名：Path Intellisense

加入此插件让我们在应用文件（例如图片）时，有智能的路径提示。

「五」前端开发插件集合

这里提供给各位童鞋世上最全的前端开发插件集合，没有“之一”。（当然要做到最强还需要大家给我多提意见，欢迎小伙伴们给我补充一些我也还没有使用过的实用前端插件哦！可以在评论区留言哈！）

程序员最好的朋友无非就是编辑器中的插件，有插件和没有使用插件在开发中简直就是天差地别。这里让我想到自己一开始学习编程的时候，使用notepad++，一行一行代码纯手敲的经历。现在有了各式各样的 IDE，估计已经差不多没有人还在用文本编辑器手敲代码了。

自动关闭标签

插件名：Auto Close Tag

自动添加HTML/XML关闭标签，与 Visual Studio IDE 或 SublimeText 相同。当我们填写了开始标签，结束标签就会被自动加上。这个非常实用，减少很多我们写html和xml的时间。

如果是使用SublimeText过来的或者习惯SublimeText的童鞋，可以开启Sublime Text 3模式，在settings.json文件里面加入这个配置：

{
  "auto-close-tag.SublimeText3Mode": true
}

自动同步标签名

插件名：Auto Rename Tag

自动重命名成对的 HTML/XML 标记，与 Visual Studio IDE 相同。用这个插件可以告别每次改变标签的时候要重复修改头部和尾部标签。特别是标签内内容非常多的时候，要改确实很费劲的。

CSS 颜色高亮

插件名：Color Highlight

这个插件会对页面上所有的 CSS/web 的颜色编码进行高亮，高亮的颜色就是编码对应的颜色。在写 CSS 的时候非常实用。

高亮匹对标签

插件名：VSCode Highlight Matching Tag

此插件高亮显示匹对的开始和/或结束标签。还可以在状态栏中显示标签的路径。这个插件将尝试在任何地方匹配标记: 从标记属性、字符串内部、任何文件，同时还提供广泛的样式选项来定制标记的高亮显示方式。

官方支持的标签: HTML 和 JSX。其他风格 (XML、Vue、Angular、PHP) 也可以。

HTML CSS 支持

插件名：HTML CSS Support

补充了 VSCode 中缺少的 CSS 支持。类属性补全、ID 属性补全和全文件搜索 CSS 和 SCSS 提示等。

小程序支持

插件名：minapp-vscode

微信小程序标签、属性的智能补全（同时支持原生小程序、mpvue 和 wepy 框架，并提供 snippets）

Vue 支持

插件名：Vetur

开发 Vue 的童鞋必装插件之一。支持标签、属性的智能补全等等。

经常用 Vue 开发的童鞋，我这个里另外推荐一个插件给你们。就是Vue 2 Snippets，这个插件加入了 Vue2 的代码块，让我们开发的过程中可以快速生成 Vue2 的代模版。

在这里插入图片描述

React 支持

插件名：ES7 React/Redux/GraphQL/React-Native snippets

这个扩展为你提供了 JavaScript 和 ES7 中的 React/Redux 代码片段，以及 VSCode 的 Babel 插件特性。编写 React 的童鞋，这个插件是必备之一。
在这里插入图片描述

NPM 支持

插件名：npm

这个扩展支持运行包中定义的 npm 脚本。并根据包中定义的依赖项验证已安装的模块。最喜欢这个插件的功能就是可以自动检测依赖是否安装，还可以提示依赖的版本和具体项目地址。使用 npm 的童鞋必备插件之一。

NPM 智能提示

插件名：npm Intellisense

加入此插件可以让我们在编写 JavaScript 的时候有 npm 依赖包的提示。特别是引用的过程中会有丰富的提示。

强大的代码格式化

插件名：Prettier - Code formatter

Prettier 是一个代码格式化程序。它通过解析代码并使用它自己的规则重新打印代码来强制实现一致的样式，这些规则考虑到最大行长度，在必要时包装代码。

在一个多人协同开发的团队中，统一的代码编写规范非常重要。一套规范可以让我们编写的代码达到一致的风格，提高代码的可读性和统一性。自然维护性也会有所提高。

🌟 小技巧
我们可以通过在settings.json中强制让一些特定语言用这个格式化工具。在settings.json中添加以下配置。

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

🌟 小技巧
个人还建议设置编辑器在保存时自动格式化。在settings.json中添加以下配置。

// 全局配置
"editor.formatOnSave": false,
// 按语言配置
"[javascript]": {
    "editor.formatOnSave": true
}

编辑器中的实时预览

插件名：Browser Preview

VSCode 的浏览器预览插件让我们能够在编辑器中打开一个可以真正的浏览器预览。浏览器预览是由 Chrome Headless 提供的，它的工作原理是在一个新进程中启动一个 Headless Chrome 实例。提供了一种安全的方法在 VSCode 中呈现 web 内容，并支持一些有趣的特性，如编辑器内调试等! 再也不用在浏览器和编辑器中来回切换而觉得麻烦了！

在这里插入图片描述

这个插件需要另外一个插件的支持Debugger for Chrome，安装了这个插件后只要按下面配置格式配置即可（配置要根据我们的项目而定，需要微小的修改一下）

{
  "version": "0.1.0",
  "configurations": [
    {
      "type": "browser-preview",
      "request": "attach",
      "name": "Browser Preview: Attach"
    },
    {
      "type": "browser-preview",
      "request": "launch",
      "name": "Browser Preview: Launch",
      "url": "http://localhost:3000" // 把这里改为你本地项目的地址
    }
  ]
}

实时预览

插件名：Live Server

如果我们是在做一个静态页排版，这个插件可以提供给我们一个本地实时预览服务器，预览会在谷歌浏览器打开。相对于上面讲到的插件来说，这个比较轻量级。

浏览器打开

插件名：open in browser

在开发本地文件的时候，可以安装这个插件，然后用默认浏览器打开。当然可以设置我们喜爱的浏览器打开哦。

「六」PHP 开发插件

VSCode 作为前端开发编辑器确实很强大了，但是这个编辑器不仅限于前端，作为一个后端编辑器也不差于其他 IDE 很多。

我有很长一段时间一直使用 PHPStorm，但是发现用再高配置的电脑还是逃不过这些重量级 IDE 对电脑的 CPU 和内存的无限吞噬。

随着几款轻量级编辑器的发展，包括SublimeText、Atom和VSCode。这些轻量级的编辑器加上活跃的插件开发社区，很多在 IDE 里面拥有的功能在轻量级的编辑器中都可以拥有了。所以最后我又回归到了轻量级编辑器中。

最后我开始研究怎么用 VSCode 作为 PHP 开发的 IDE。这里分享一些非常实用的 PHP 开发用的 VSCode 必装插件集合：

PHP 强化插件

插件名：PHP Intelephense

PHP Intelephense 是一个高性能的 PHP 语言服务器，它为高效的 PHP 开发提供了大量的基本特性。安装了这个插件基本拥有了 70-80%重量级 IDE 的辅助功能。

它的功能包含以下：

快速驼峰/下划线大小写**代码完成(智能感知)**。提供文档、项目和内置符号和关键字的详细提示。自动添加使用声明。
项目和内置的构造函数，方法和函数都有详细签名(参数)帮助辅助。
快速项目中的跳转定义支持。
项目内查找所有引用。
项目内快速搜索“驼峰/下划线”的符号
完整文档符号搜索，也支持breadcrumb **和outline** UI。
通过一个容错解析器和强大的静态分析引擎诊断打开的文件。
兼容 PSR-12文档/范围格式。格式化也适用于 HTML/PHP/JS/CSS 文件。
HTML 请求转发到 HTML 语言服务器完成HTML/JS/CSS/PHP 代码智能提示。
鼠标悬停显示详细链接到官方 PHP 文档。
智能高亮参考资料和关键字。
读取PHPStorm metadata以获得更高级的类型分析和提示。
智能重命名符号。在适当的时候，文件/文件夹也会自动重命名。(高级版)(https://intelephense.com)
能精确的折叠代码定义，块，使用声明，heredoc，注释，和自定义区域。(高级版)(https://intelephense.com)
快速找到和跳转接口和抽象类以及相关方法。(高级版)(https://intelephense.com)
快速转到类型定义的变量和参数。(高级版)(https://intelephense.com)
快速去声明实现接口或抽象方法声明的方法。(高级版)(https://intelephense.com)
可配置自动 phpdoc创建，推断返回类型并识别抛出的异常。(高级版)(https://intelephense.com)

提到的高级版功能需要另外购买，可以到https://intelephense.com实用支付宝购买。一次性购买价格是 70 元人名币（个人觉得相比其他 IDE 是年费的，这个还是很划算的）。

这个插件基本上所有其他 IDE 又的功能它都给你提供了，有了这个插件我们的 VSCode 瞬间编程了一个全能的 IDE 编辑器。重点它还是比较轻量级的。

PHP 规范检测

插件名：phpcs

这个 linter 插件为 Visual Studio 代码提供了一个到 phpc 的接口。它将与具有“PHP”语言模式的文件一起使用。

如果小伙伴们一直都有用 linter，那这个插件装上，可以配合我们项目中的 phpCS 设置的 linter 一起用，就可以自动格式化代码或者在 VSCode 中也会提示格式错误了。

「七」Java 开发插件

个人没有做过多的 JAVA 开发，所以也没有深入研究，但是 VSCode 也有很多 Java 开发者在使用。所以也有对应的支持。

用来支持 Java 的插件有好几个，但是官方有做了一个 Java 插件全家桶，一键安装好所有 Java 支持的插件。

插件名：Java Extension Pack

Java Extension Pack (Java 插件全家桶) 是一组流行的插件，可以帮助在 Visual Studio Code 中编写、测试和调试 Java 应用程序。

这个全家桶包含了以下插件：

📦 Java 语言支持（Red Hat 提供）
- 代码导航
- 自动完成
- 重构
- 代码片段
📦 Java 调试器
📦 Java 测试运行器
- 项目脚手架
- 自定义目标
📦 Java 依赖查看器
- 查看 Java 项目、引用库、资源文件、包、类和类成员
Visual Studio IntelliCode
- 开发辅助
- 完整的代码填充

其他语言支持

使用 VSCode 开发其他语言也是完全可以的，只要在插件搜索栏输入我们想用的语言，就可以找到那个语言的相关插件和支持。

「待续」总结

对于一个个性化的编辑器，一箱好用的插件是必备的，没有插件的 VSCode 就等于没有了灵魂。这文章介绍了一大箱不同分类的超级实用、好用和常用的插件。

但是这么多插件，一个一个安装，是不是想想都想放弃？还有一部分童鞋会说“IDE 的插件基本上都是安装好的，这个太麻烦了”。说实话确实很麻烦，特别是公司一台电脑，家里又一台手提电脑，两台电脑都需要安装这些插件，想想都崩溃了。

当然每一个问题都有解决办法，VSCode 也有插件专门解决这种问题。VSCode 的Setting Syn可以帮助我们同步自己的插件，编辑器配置和自定义快捷键。让我们在新的环境或者电脑上，马上拉取以往的所有配置，再也不需要一个一个重新配置。

下一篇文章我会详细讲说怎么配置和怎么使用配置同步插件。敬请期待哦！

留言

VSCode插件大全

VSCode插件大全

「一」国人必备集合

VSCode 中文简体包

代码翻译

检测代码英文单词错误

「二」主题集合

Dracula Theme

Material Theme

Nebula Theme

Atom One Dark Theme

One Monokai Theme

GitHub Plus Theme

「三」图标主题集合

Material Icon Theme

VSCode Icons

「四」实用插件集合

代码书签

括号对彩色化

增强 Git 功能

Git 历史记录

实时协作编辑

路径智能提示

「五」前端开发插件集合

自动关闭标签

自动同步标签名

CSS 颜色高亮

高亮匹对标签

HTML CSS 支持

小程序支持

Vue 支持

React 支持

NPM 支持

NPM 智能提示

强大的代码格式化

编辑器中的实时预览

实时预览

浏览器打开

「六」PHP 开发插件

PHP 强化插件

PHP 规范检测

「七」Java 开发插件

其他语言支持

「待续」总结

目录