Visual Studio Code 最令人印象深刻的部分之一是可定制性，尤其是通过扩展。随着大量开发人员创建扩展，功能几乎是无穷无尽的！以下是 VS Code 中用于编写 CSS 的一些最佳扩展。

查看学习 Visual Studio Code，了解您需要了解的有关 Web 开发中最热门的编辑器的所有信息！

HTML CSS 支持

HTML CSS 支持（以及列出的下一个扩展）基于项目中包含或远程引用的 CSS在您的 HTML 文件中提供智能感知。这是功能的完整列表。

• 类属性补全

• id 属性补全

• 支持 class 和 id 属性的 Zen Coding 完成

• 扫描工作区文件夹中的 css 和 scss 文件

• 支持远程css文件

关于这一点，真正突出的一件事是您也可以指定要缓存的远程 CSS 文件。您可以通过添加以下设置来做到这一点。此示例引用 Bootstrap 4 CSS 文件。

"css.remoteStyleSheets": [
  "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
]

CSS 类名称的智能感知

CSS Class Names 的 Intellisense提供与上述扩展类似的功能。这也将自动从 HTML 文件中引用的 CSS 中提取类。使用 Emmet 时，此类定义也将通过智能感知可用！

在任何时候，您都可以通过打开命令面板来触发 CSS 文件中类的重新缓存。

自动前缀

必须为某些 CSS 属性添加前缀以确保浏览器支持可能会非常麻烦。如果不是已经使用 Create React App、Angular CLI 等配置的工作流，我会完全忘记添加供应商前缀。

Autoprefixer将自动添加供应商前缀，以确保您的应用程序在不同浏览器中看起来尽可能好。这是疯狂的简单。打开命令面板并调用“Autoprefixer CSS”。

CSS一览

如果您和我一样，我讨厌切换到我的 .css 文件来检查附加到类或 id 的属性。使用CSS Peek，您可以从 HTML 文件中查看 CSS 的悬停图像。

此扩展还将类名和 id 转换为超链接，将您直接带到 CSS 中的该类或 id 定义！

Prettier – 代码格式化程序

再也不用担心格式化了。设置 Prettier 一次，剩下的就交给它了！

漂亮-代码格式化是非常流行的自动格式化你的JavaScript，但你是否知道它的汽车–格式CSS呢？嗯，确实如此，而且很棒！

这是之前的（格式很糟糕）。

……之后（使用BEAUTIFUL格式）！

如果您选择，您可以将其设置为自动或手动保存时运行。

Bootstrap 4、Font Awesome 4、Font Awesome 5 免费和专业代码片段

当然，并不是每个项目都使用 Bootstrap 或 Font Awesome，但是很多项目都使用了。这就是为什么我想这是值得分享这个扩展其用于引导4提供智能感知，字体真棒4，和字体真棒5。

Bootstrap 中的类太多了，不可能全部记住。与使用 Font Awesome 相同。每次我想添加图标时，我都必须查找语法，但现在不行了！

要激活 Bootstrap 的片段，请使用“B4”。

和 Font Awesome 5 的“FA5”。

回顾

好了，Visual Studio Code 的一些最佳 CSS 扩展。如果您认为我们错过了什么，请在下面发表评论并分享您的最爱！