10.【转】Visual Studio Code 必备插件，主题及语法提示

原文地址：http://www.css88.com/archives/8064

小编推荐：掘金是一个面向程序员的高质量技术社区，从 一线大厂经验分享到前端开发最佳实践，无论是入门还是进阶，来掘金你不会错过前端开发的任何一个技术干货。

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 编辑器，为什么不让它变得更漂亮呢？有许多定制插件可以改变颜色方案和侧边栏中的图标。以下是我们的一些最爱：

• One Monokai
• Aglia
• One Dark
• Material Icon

转载于:https://www.cnblogs.com/Nick-Hu/p/9823563.html