VSCode 必装的 10 个高效开发插件

本文介绍了目前前端开发最受欢迎的开发工具 VSCode 必装的 10 个开发插件，用于大大提高软件开发的效率。VSCode 的基本使用可以参考我的原创视频教程「VSCode 高效开发必装插件」。

VSCode（Visual Studio Code）是由微软研发的一款免费、开源的跨平台文本（代码）编辑器，算是目前前端开发几乎完美的软件开发工具。

官网为：https://code.visualstudio.com/

1. VSCode 的基本使用视频教程

在我们的知识星球社区中给大家分享过我原创的 10 集视频教程「VSCode 高效开发必装插件」。

此课程为 VSCode 编辑器系列课程。VSCode 强大的插件库使得其在提升开发效率方面更加的无敌，系列课程给大家分享了必装插件的安装、配置与使用技巧相关的知识。

视频教程课程大纲

001 - 课程简介002 - 如何让你的文件类型一目了然003 - 如何更加高效地管理项目004 - 自动格式化你的代码005 - 如何一键搭建各类语言的学习测试环境006 - 如何和 Chrome 联动调试007 - 如何实时自动检测你的代码规范与代码中的错误008 - 如何提升 React 等前端开发的效率009 - 如何集成并美化你的终端到 VSCode 中010 - Visual Studio 重度使用者如何迁移到 VSCode

视频教程地址：https://devopen.club/course/vscode。

2. 10 个必装的编辑器插件

相当于视频教程的补充更新，这里再次给大家整理出 10 个必装的 VSCode 编辑器插件。编辑器的基本使用与插件的安装可以直接参考上面的视频教程。

2.1 文件图标 vscode-icons

插件名称：vscode-icons插件地址：https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons

首先为了我们在编码时有一个高效、易用的界面，我们需要对一些不明了的组件做一些美化。

vscode-icons 插件可以实现对各种文件类型的文件前的图标进行优化显示，这样我们在查看长长的文件列表的时候，可以直接通过文件的图标就可以快速知道文件的类型，而不是去看文件的后缀。

2.2 暗色主题 One Dark Pro

插件名称：One Dark Pro插件地址：https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme

长时间的编码，暗色调的编码环境更不容易让视力疲劳，而且也可以让自己更加专注。

安装了 One Dark Pro 插件后，可以一键将 VSCode 编辑器的颜色调整成暗色系，编码起来更加舒适。

2.3 代码美化 Beautify

插件名称：Beautify插件地址：https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify

Beautify 插件可以快速格式化你的代码格式，让你在编写代码时杂乱的代码结构瞬间变得非常规整，代码强迫症必备，较好的代码格式在后期维护以及他人阅读时都会有很多的便利。

插件支持的语言非常多，基本堵盖了目前所有的语言，而且你还可以自定义代码格式化的结构。

2.4 代码检查工具 ESLint

插件名称：ESLint插件地址：https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

ESLint 是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。

而 VSCode 中的 ESLint 插件就直接将 ESLint 的功能集成好，安装后即可使用，对于代码格式与规范的细节还可以自定义，并且一个团队可以共享同一个配置文件，这样一个团队所有人写出的代码就可以使用同一个代码规范，在代码签入前每个人可以完成自己的代码规范检查。

2.5 必备调试工具 Debugger for Chrome

插件名称：Debugger for Chrome插件地址：https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

此工具简直就是前端开发必备，将大大地改变你的开发与调试模式。

以往的前端调试，主要是 JavaScript 调试，你需要在 Chrome 的控制台中找到对应代码的部分，添加上断点，然后在 Chrome 的控制台中单步调试并在其中查看值的变化。

而在使用了 Debugger for Chrome 后，当代码在 Chrome 中运行后，你可以直接在 VSCode 中加上断点，点击运行后，Chrome 中的页面继续运行，执行到你在 VSCode 中添加的断点后，你可以直接在 VSCode 中进行单步调试。

关于 Chrome 调试工具的使用，你可以参考我在我们的知识星球中分享的原创视频教程「50 个 Chrome Developer Tools 必备技巧」，课程分享了前端开发中必备的浏览器调试工具 Chrome Developer Tools 使用过程中必备的 50 个使用与调试技巧，这些知识是你成为合格的前端开发人员必备技能。

2.6 万能语言运行环境 Code Runner

插件名称：Code Runner插件地址：https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner

如果你需要学习或者接触各种各样的开发语言，那么 Code Runner 插件可以让你不用搭建各种语言的开发环境，直接通过此插件就可以直接运行对应语言的代码，非常适合学习或测试各种开发语言。

支持的语言有：C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C# Script, C# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust, Racket, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D, 以及一些自定义的命令。

2.7 快速注释 Document This

插件名称：Document This插件地址：https://marketplace.visualstudio.com/items?itemName=joelday.docthis

优秀的代码除了优秀的性能、规范的格式，注释也是不可或缺的，而且注释也应该有一套标准的注释方法，特别对于 JavaScript 这种语言。

Document This 可以快速地帮你生成注释，如一些函数的注释还能帮你抽取出参数的定义等，是你编写规范代码必备的工具。

2.8 CSS 类名智能提示

插件名称：IntelliSense for CSS class names in HTML插件地址：https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion

在 HTML 中调用定义好的样式名时，有时需要经常在 HTML 与 CSS 文件之间切换，来回地查看你已定义好的 CSS 类名。

而有了 IntelliSense for CSS class names in HTML 插件后，你可以在 HTML 中需要调用 CSS 类名的地方，此插件会智能地给你已定义 CSS 类名的提示。

2.9 代码拼写检查 Code Spell Checker

插件名称：Code Spell Checker插件地址：https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

此插件安装后就不用管就好了，在你代码中有单词拼写错误时，你就会发现它的好处，因为我们写代码毕竟都是大量的英文单词变量定义，插件还可以给出错误拼写单词的建议。

2.10 备忘插件 TODO Highlight

插件名称：TODO Highlight插件地址：https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight

在很多的其他代码编辑器中都有 TODO 标注功能的，如你写到某一部分的代码时，其中部分的功能需要稍后再来实现，这是就可以在对应的代码处添加一个 TODO 类型的注释，那么后期就可以快速地跳转到这部分继续写，而且当项目很大的时候，TODO 就变得更加有用，因为有时候 TODO 可能有几十个，帮助你标注那些功能需要继续实现或优化。

3. 总结

当然，这里介绍的插件只是必备插件中的 10 个，其实根据你开发的语言，还有很多非常能提高开发效率的工具需要安装，你可以自行在 VSCode 的插件中心查询下载安装。

我们的知识星球社区中也会经常给大家推荐最新的必备插件与开发技巧，而关于其他的开发问题都可以在社区中进行提问与交流，同时也有创业的项目在孵化，大家可以在你们找到志同道合的朋友一起来做一点事情。

欢迎关注课程：

快速上手Ionic3多平台开发企业级问答社区

React.js入门基础与案例开发

作者：ParryKK

链接：http://www.imooc.com/article/details/id/254255

来源：慕课网

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

精选！15个必备的VSCode插件

Visual Studio Code 是由微软开发的一款免费、跨平台的文本编辑器。由于其卓越的性能和丰富的功能，它很快就受到了大家的喜爱。

就像大多数 IDE 一样，VSCode 也有一个扩展和主题市场，包含了数以千计质量不同的插件。为了帮助大家挑选出值得下载的插件，我们针对性的收集了一些实用、有趣的插件与大家分享。

1. Open-In-Browser

由于 VSCode 没有提供直接在浏览器中打开文件的内置界面，所以此插件在快捷菜单中添加了在默认浏览器查看文件选项，以及在客户端（Firefox，Chrome，IE）中打开命令面板选项。

插件地址：

https://marketplace.visualstudio.com/items?itemName=coderfee.open-html-in-browser

2. Quokka

Quokka 是一个调试工具插件，能够根据你正在编写的代码提供实时反馈。它易于配置，并能够预览变量的函数和计算值结果。另外，在使用 JSX 或 TypeScript 项目中，它能够开箱即用。

插件地址：https://quokkajs.com/

3. Faker

使用流行的 JavaScript 库 – Faker，能够帮你快速的插入用例数据。Faker 可以随机生成姓名、地址、图像、电话号码，或者经典的乱数假文段落，并且每个类别还包含了各种子类别，你可以根据自身的需求来使用这些数据。

插件地址：

https://marketplace.visualstudio.com/items?itemName=deerawan.vscode-faker

4. CSS Peek

使用此插件，你可以追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时，选择“ Go to Definition 和 Peek definition ”选项，它便会给你发送样式设置的 CSS 代码。

插件地址：

https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek

5. HTML Boilerplate

通过使用 HTML 模版插件，你就摆脱了为 HTML 新文件重新编写头部和正文标签的苦恼。你只需在空文件中输入 html，并按 Tab 键，即可生成干净的文档结构。

插件地址：

https://marketplace.visualstudio.com/items?itemName=sidthesloth.html5-boilerplate

6. Prettier

Prettier 是目前 Web 开发中最受欢迎的代码格式化程序。安装了这个插件，它就能够自动应用 Prettier，并将整个 JS 和 CSS 文档快速格式化为统一的代码样式。如果你还想使用 ESLint，那么还有个 Prettier – Eslint 插件，你可不要错过咯！

插件地址：

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

7. Color Info

这个便捷的插件，将为你提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标，就可以预览色块中色彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息了。

插件地址：

https://marketplace.visualstudio.com/items?itemName=bierner.color-info

8. SVG Viewer

此插件在 Visual Studio 代码中添加了许多实用的 SVG 程序，你无需离开编辑器，便可以打开 SVG 文件并查看它们。同时，它还包含了用于转换为 PNG 格式和生成数据 URI 模式的选项。

插件地址：

https://marketplace.visualstudio.com/items?itemName=cssho.vscode-svgviewer

9. TODO Highlight

这个插件能够在你的代码中标记出所有的 TODO 注释，以便更容易追踪任何未完成的业务。在默认的情况下，它会查找 TODO 和 FIXME 关键字。当然，你也可以添加自定义表达式。

插件地址：

https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight

10. Icon Fonts

这是一个能够在项目中添加图标字体的插件。该插件支持超过 20 个热门的图标集，包括了 Font Awesome、Ionicons、Glyphicons 和 Material Design Icons。

插件地址：

https://marketplace.visualstudio.com/items?itemName=idleberg.icon-fonts

11. Minify

这是一款用于压缩合并 JavaScript 和 CSS 文件的应用程序。它提供了大量自定义的设置，以及自动压缩保存并导出为.min文件的选项。它能够分别通过 uglify-js、clean-css 和 html-minifier，与 JavaScript、CSS 和 HTML 协同工作。

插件地址：

https://marketplace.visualstudio.com/items?itemName=HookyQR.minify

12. Change Case

虽然 VSCode 内置了开箱即用的文本转换选项，但其只能进行文本大小写的转换。而此插件则添加了用于修改文本的更多命名格式，包括驼峰命名、下划线分隔命名，snake_case 命名以及 CONST_CAS 命名等。

插件地址：

https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case

13. Regex Previewer

这是一个用于实时测试正则表达式的实用工具。它可以将正则表达式模式应用在任何打开的文件上，并高亮所有的匹配项。

插件地址：

https://marketplace.visualstudio.com/items?itemName=chrmarti.regex

14. Language and Framework Packs

VSCode 默认支持大量的主流编程语言，但如果你所使用的编程语言不包括在内，也可以通过下载扩展包来自动添加。同时，你还可以添加一些像 React Native 与Vue 的相关 Web 开发插件包。

插件地址：

https://marketplace.visualstudio.com/search?target=VSCode&category=Languages&sortBy=Downloads

15. Themes

当然，在众多的实用插件中，岂能少了漂亮的主题呢？你每天都会与你的 VSCode 编辑器进行“亲密的接触”，为何不把它打扮得更漂亮些呢？这里有一些帮助你更改侧边栏的配色方案，以及图标的相关主题，与大家分享：

• One Monokai

• Aglia

• One Dark

• Material Icon

感谢你的阅读。若你有所收获，欢迎点赞与分享。

注：

本文版权归原作者所有，仅用于学习与交流；

如需转载译文，烦请按下方注明出处信息，谢谢！

英文原文：15 Essential Plugins for Visual Studio Code

作者：Danny Markov

译者：IT程序狮

译文地址：http://www.jianshu.com/p/1c178f5c029c

更多文章

1. 2017年20个最佳的极简CSS框架

2. 推荐！2017 Web 开发者学习路线图

3. 老司机推荐！四个国内优秀的编程学习网站

4. 精选 20 个优质的加载动画

5. 设计师与程序员不能错过的 10 个酷站

相关问答

vscode扩展插件安装不了?

可能是系统错误VisualStudioCode安装插件方法:1、首先打开VisualStudioCode软件,在其界面中,点击左边那排按钮最底部的选项。2、扩展栏下有输入框,可...

vscode插件不受信任?

插件不受信任可能是因为它们来自于未知的来源或者没有通过官方的审核。这可能会导致安全风险,比如插件可能会包含恶意代码,从而危及用户的计算机系统。为了避...

vscode显示文件类型的小图标是什么插件-ZOL问答

原生自带,或者下,在vscode的文件-首选项-文件图标主题中选择没有正确的打开方式,找一个个打开方式i就好了如果不是中毒的话,那就是那个图标快捷...