VS Code中6个令人惊叹的CSS扩展

前言

Visual Studio Code最令人印象深刻的部分之一是可定制性，尤其是通过扩展。随着大量开发人员创建扩展，功能实际上是无穷无尽的！

作为一名程序猿，或多或少都会码一点点CSS，不管是简单的css颜色、字体设置，还是高级的css动画等。现在就为大家推荐一下VS Code中用于编写CSS的一些最佳扩展，让你编写CSS时更得心应手。

1、HTML CSS Support 2、Intellisense for CSS Class Names 3、Autoprefixer 4、CSS Peek 5、Prettier - Code Formatter 6、Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets

HTML CSS Support

HTML CSS Support（以及下一个扩展）基于项目中包含的或远程引用的CSS在HTML文件中提供智能感知（提示）。下方是完整的功能列表： 1、Class attribute completion（类属性） 2、Id attribute completion（id类属性） 3、Supports Zen Coding completion for class and id attributes（支持类和id属性的Zen Coding完成） 4、Scans workspace folder for css and scss files（扫描css和scss文件的工作区文件夹） 5、Supports remote css files（支持远程css文件）

有一点非常好用，那就是可以指定要缓存的远程CSS文件。添加以下设置来完成此操作。这个例子引用了bootstrap 4 css文件。

代码语言：javascript复制

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

Intellisense for CSS Class Names

Intellisense for CSS Class Names 提供与上述扩展类似的功能. 但是它还将自动从HTML文件中引用的CSS中提取类。在使用Emmet时，也可以通过intellisense使用获得！

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

Autoprefixer

Autoprefixer是一款自动管理浏览器前缀的插件，它可以解析CSS文件并且添加浏览器前缀到CSS内容里

打开命令调色板并调用“Autoprefixer CSS”即可。

如：

代码语言：javascript复制

::placeholder {
  color: gray;
}

自动替换为：

代码语言：javascript复制

::-webkit-input-placeholder {
  color: gray;
}
:-ms-input-placeholder {
  color: gray;
}
::-ms-input-placeholder {
  color: gray;
}
::placeholder {
  color: gray;
}