Visual Studio Code 是由微软开发的一款免费的，跨平台文本编辑器。因为其出色的性能表现和丰富的功能，它很快成为了开发者的最爱。前端
与大多数 IDE 同样，VSCode 也有一个扩展市场，包含数千个具备不一样功能的插件。为了帮助您挑选值得下载的东西，咱们收集了这些最有用和最有趣的扩展。
vue
在浏览器中打开或预览 – Open-In-Browser
VSCode 不能经过内置界面来直接在浏览器中打开文件。此扩展将添加一个 [Open With Default Browser] 选项到右键菜单，使您在客户端（Firefox，Chrome，IE）中打开命令面板选项。html5
项目地址：Open-In-Browserreact
代码调试 – Quokka
Quokka 是一个调试工具，能够为您正在编写的代码提供实时反馈。它可以预览变量的函数和计算值结果。该扩展易于配置，对于使用 JSX 或 TypeScript 的项目可直接使用。git
项目地址：Quokka程序员
Faker
使用流行的 Faker JavaScript 库快速插入占位符数据。您能够生成随机的名称，地址，图像，电话号码或经典的乱数假文段落。每一个类别都有各类子类别，所以您能够为所欲为的使用这些数据。github
项目地址：Fakerweb
跳转到 CSS 定义行 – CSS Peek
经过此扩展，您能够跟踪样式表中 CSS 类和 id 的样式。当您右键单击 HTML 文件中的选择器时，选择“Go to Definition”和“Peek”将会直接带您跳转到相对应的 CSS 代码。
项目地址：CSS Peek
HTML 模板 – HTML Boilerplate
HTML 模板扩展将没必要手动写入新的 HTML 文档的 head 和 body 标签。只需在空文件中输入 html ，按 Tab 键便可生成干净的文档结构。
项目地址：HTML Boilerplate
格式化代码 代码美化 – Prettier
Prettier 是如今 Web 开发中最流行的代码格式化程序。它容许您的团队保持整齐统一的代码结构。此扩展能够自动应用 Prettier 并快速格式化整个 JS 和 CSS 文档。
项目地址：Prettier
颜色信息及转换 – Color Info
一个轻量级的小插件，将为你提供有关 CSS 中使用的颜色的各类信息。经过将鼠标悬停在颜色代码处，就能够看到颜色的预览，以及有关其转换为全部格式（hex，rgb，hsl和cmyk）的信息。
项目地址：Color Info
SVG 预览 – SVG Viewer
此插件是一款能够在 Visual Studio Code 中查看 SVG 的实用程序。它能够渲染 SVG 文件，查看预览而无需离开编辑器。同时，它还包含了用于转换为 PNG 格式和生成数据 URI 模式的选项。
项目地址：SVG Viewer
TODO 高亮 – TODO Highlight
此工具能够在你的代码中的标记出全部的 TODO 注释，以便在推送到生产环境以前轻松跟踪任何未完成的业务。默认状况下，它会查找 TODO 和 FIXME 关键字，固然，您也能够添加自定义表达式。
项目地址：TODO Highlight
图标字体 – Icon Fonts
这是一个可以在您的项目（或从CDN）中添加图标字体的插件，而且自动对图标自己的类名进行提示。该扩展支持超过20个流行的图标集，包括 Font Awesome ，Ionicons ， Glyphicons 和 Material Design Icons 。
项目地址：Icon Fonts
代码压缩 – Minify
用于压缩代码的扩展。它提供了大量的自定义设置和自动压缩保存并导出到 .min 文件的选项。 Minify 分别经过 uglify-js ，clean-css 和 html-minifier 对 JavaScript ，CSS 和 HTML 进行压缩。
项目地址：Minify
命名格式转换 – Change Case
此插件用来转换文本。可直接使用，只能进行小写和大写转换。此插件添加了更多用于修改字符串的命令，包括 camelCase（骆驼拼命名），kebab-case（中划线命名），snake_case（下划线命名）， CONST_CASE（大写命名）等。
项目地址：Change Case
正则表达式预览 – Regex Previewer
用于实时测试正则表达式的实用工具。它经过将正则表达式模式应用于任何打开的文本文件，突出显示全部匹配项。
项目地址：Regex Previewer
语言和框架 – Language and Framework Packs
VSCode 支持大量语言。若是您使用的编程语言不包括在内，那么您能够下载这个扩展包，它将添加自动填充，适当的缩进和其余实用功能。还有对 Web 前端框架，如 react native 和 vue 的语言包支持。
主题及配色方案 – Themes
固然，全部扩展中最重要的是主题。你天天都在看你的 VSCode 编辑器，为何不让它变得更漂亮呢？有许多定制插件能够改变颜色方案和侧边栏中的图标。如下是咱们的一些最爱：