VSCode插件大全｜VSCode高级玩家之第二篇

时间 2020-07-20

标签 vscode 插件大全高级玩家第二繁體版

原文原文链接

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

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

因此这篇文章会给你们介绍VSCode中最经常使用的插件，让咱们的编辑器加上一双翅膀，让咱们在编写代码的过程当中如虎添翼的感受。html

🌟全部插件，只要搜索插件名就能找到哦！前端

「一」国人必备集合

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

VSCode中文简体包

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

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

代码翻译

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

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

找了好久我为你们找到一个很是好用的一个插件能够解决这个问题！npm

本地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高级玩家宝典之第一篇》 --- 因此对于个好的程序员，一个好的代码编辑器能够起到很大的做用，在开发的过程当中能够给咱们带来不少便利、帮助、效率和影响。甚至一个好的编辑器能够给开发者平常编程中带来更高的喜悦感。
🔥 《前端必看的8个HTML+CSS技巧》 --- CSS是一个很独特的语言。看起来很是简单，可是某种特殊效果看似简单，实现起来就很有难度。这篇文章主要是给在学习前端的童鞋分享一些新的CSS技巧，一些在前端教程和培训课堂中不会讲到的知识。第二就是让还在前端开发这条道路上的童鞋们，从新燃起对前端排版和特效的热爱和热情！🔥
🔥 《写给想学和在学编程的大家，学习编程的7个好处》 --- 其实选择学编程是能改变人生的。可能起初不少人学编程，报了一个编程培训班，为了就是能拿到更高的工资或者有更好的工做环境。最后坚持着坚持着，最后会发现编程还会给咱们带来不少我的能力和技能上的提高。
🔥 《5大法则助你成为更出色的开发者》 --- 这篇文章传授5大法则助咱们成为更出色的开发者，在众多开发者中脱颖而出的诀窍，也会在咱们的技术职业生涯中给咱们不少的帮助。

本文使用 mdnice 排版