APP开发：前端类的15个必备 VSCode 插件

Visual Studio Code 是由微软开发一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代 Web 和云应用的跨平台源代码编辑器。微软公司的开发者事业部总裁说过，”我们想让他们能够在他们习惯的平台上使用我们公司的产品，而不是非要迁徙到 Windows 上“。

   Visual Studio Code 提供了丰富的快捷键 [3]  。用户可通过快捷键 [Ctrl] + [K] + [S] （按住Ctrl键不放，再按字母K键和S键）调出快捷键面板，查看全部的快捷键定义。也可在面板中双击任一快捷键，为某项功能指定新的快捷键。一些预定义的常用快捷键包括：格式化文档（整理当前视图中的全部代码），[Shift] + [Alt] + [F]；格式化选定内容（整理当前视图中被选定部分代码），[Ctrl] + [K] + [F]；放大视图，[Ctrl] + [Shift] + [=]；缩小视图，[Ctrl] + [Shift] + [-]；打开新的外部终端（打开新的命令行提示符）：[Ctrl] + [Shift] + [C]。下面就来给大家介绍一下一些有趣的插件。

1. Quokka

Quokka是一个调试工具插件，它能根据正在编写的代码为用户提供实时的反馈。他的优点有：1.在使用 JSX 或 TypeScript 项目中，它可以很快地运用起来。2.配置很简单，并且能够预览变量的函数和计算值的结果。

2. Minify

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

3. CSS Peek

   该插件可以用来追踪至样式表中 CSS 类和 ids 定义的地方。具体的使用方法就是在在 HTML 文件中右键单击选择器时，选择“ Go to Definition 和 Peek definition ”选项，之后他就能给用户发送样式设置的 CSS 代码。

4. Open-In-Browser

  这款插件是用来弥补VSCode 没有直接提供在浏览器中打开文件的内置界面的不足。该插件可以在在客户端（Firefox，Chrome，IE）中打开命令面板选项。以及在快捷菜单里添加在默认浏览器查看文件选项，

5. SVG Viewer

  该插件是用于在 Visual Studio 代码中添加了许多实用的 SVG 程序，这样一来，用户就不需要离开编辑器，可以直接打开 SVG 文件来查看它们。并且，该插件中还包括用来转换为PNG 格式和生成数据 URI 模式的选项。

6. HTML Boilerplate

   使用HTML 模版插件，可以解决用户在 HTML 新文件中需要重新编写头部和正文标签的麻烦。使用这个插件的时候，用户只需要在空文件中输入 html，并按 Tab 键，就可以直接生成干净的文档结构。

7. Faker

   该插件可以帮助使用者快速的插入用例数据，faker能够随机生成地址、姓名、图像、电话号码，或者经典的乱数假文段落，并且每个类别还包含了各种子类别，使用起来十分方便，用户可以根据自己的需要来使用这些数据。

8.Prettier

 该插件是目前web开发中最受欢迎的代码格式化程序。在用户安装了这个插件之后，就能够自动的运用Prettier，并且可以将整个 JS 和 CSS 文档快速格式化为统一的代码样式。还有一个插件叫Prettier – Eslint，他可以用来使用ESLint。

9. Language and Framework Packs

  这个插件是用来扩充大量主流编程语言之外的编程语言。同时，用户还可以使用一些别的插件，比如React Native 与 Vue 的相关 Web 开发插件包。

10. Color Info

这个插件是用于颜色的一个便捷插件，可以为用户提供在在 CSS 中使用颜色的相关信息。具体的使用方法就是在想要了解的颜色那里悬停光标，就可以预览色块中色彩模型的相关信息，比如HEX、 RGB、HSL 和 CMYK。

11. Regex Previewer

   是一个用来进行实时测试正则表达式的实用工具，使用该插件可以将其运用在任何打开的文件里，并且会标亮所有的匹配项。

12. TODO Highlight

   该插件可以在用户的代码里标记处所有的 TODO 注释，这样对于用户来说就可以很容易的追踪任何一个没有完成的业务。在默认的情况下，该插件可以查找TODO 和 FIXME 关键字。用户也可以根据自己的需要，添加自定义表达式。

13. Change Case

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

14. Themes

   这是一个美化插件，该插件是一个主题插件，可以让用户选择自己喜欢的主题。

15. Icon Fonts

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

   以上就是对Visual Studio Code中15个有趣插件的介绍。