Visual Studio Code 是由微软开发的一款免费的，跨平台文本编辑器。由于其出色的性能表现和丰富的功能，它很快成为了开发者的最爱。
与大多数 IDE 一样，VSCode 也有一个扩展市场，包含数千个具有不同功能的插件。为了帮助您挑选值得下载的东西，我们收集了这些最有用和最有趣的扩展。
在浏览器中打开或预览 – Open-In-Browser
VSCode 不能通过内置界面来直接在浏览器中打开文件。此扩展将添加一个 [Open With Default Browser] 选项到右键菜单，使您在客户端（Firefox，Chrome，IE）中打开命令面板选项。
项目地址：Open-In-Browser
代码调试 – Quokka
Quokka 是一个调试工具，可以为您正在编写的代码提供实时反馈。它能够预览变量的函数和计算值结果。该扩展易于配置，对于使用 JSX 或 TypeScript 的项目可直接使用。
项目地址：Quokka
Faker
使用流行的 Faker javascript 库快速插入占位符数据。您可以生成随机的名称，地址，图像，电话号码或经典的乱数假文段落。每个类别都有各种子类别，因此您可以随心所欲的使用这些数据。
项目地址：Faker
跳转到 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 编辑器，为什么不让它变得更漂亮呢？有许多定制插件可以改变颜色方案和侧边栏中的图标。以下是我们的一些最爱：