VS Code - 如何自动格式化 CSS？

Question

我是VS code的新手，一直在寻找一种在保存数据时自动格式化CSS的方法。令人惊讶的是，我似乎找不到任何好的扩展或者解释得好的网站来教我如何在VS code中自动格式化CSS。

HTML文件一旦保存就会自动格式化，我也希望能对CSS做同样的事情。

理想情况下，我希望能像Atom中使用的“Beautify”一样。

有什么建议吗？

- Yuka

---

重复的问题，请尝试这个答案：https://dev59.com/8FoU5IYBdhLWcg3wLEsM#37740690 - Leogiciel

内置格式化程序可能在v1.66中，参见https://dev59.com/ecLra4cB1Zd3GeqPH1_E#71623907。 - Mark

Answer 1

您可以使用 prettier代码格式化插件 来完成此操作。您可以通过将以下内容添加到用户设置json文件中（更新后不要忘记重新加载vscode），为所有语言设置保存时自动格式化：

"editor.formatOnSave": true,   

您可以通过添加以下内容来启用特定语言的“保存时格式化”功能：

"[css]": {
    "editor.formatOnSave": true
}

- Yedhin

---

如果我只需要 CSS 的格式化工具而不需要其他的，该怎么办？对于 JS、JSON 和 HTML，我已经有了格式化工具。 - connexo

Answer 2

"[css][scss][less]": {
    "editor.defaultFormatter": "vscode.css-language-features"
}

你提供的JSON配置似乎与Visual Studio Code（VSCode）的CSS、SCSS和LESS代码格式设置相关。该配置将这些语言的默认格式化程序设置为"vscode.css-language-features"。

这个配置的作用如下：

"editor.defaultFormatter"：这个设置允许你为特定的语言或文件类型指定默认的代码格式化程序。

"vscode.css-language-features"：这个值表示你想要使用VSCode内置的CSS语言功能作为CSS、SCSS和LESS文件的默认格式化程序。

简单来说，当你在VSCode中打开或编辑CSS、SCSS或LESS文件时，默认情况下它会使用自己内部的格式化程序来处理这些语言。

你可以通过在settings.json文件中添加或修改设置来自定义你的VSCode设置，以适应你的开发环境偏好。如果你喜欢使用VSCode内置的CSS相关语言格式化程序，这个特定的配置会很有用。

- asad minhas

---

感谢您对Stack Overflow社区的贡献。这可能是一个正确的答案，但如果您能提供代码的额外解释，让开发人员能够理解您的推理过程，那将非常有用。对于那些对语法不太熟悉或难以理解概念的新开发人员来说，这尤其有帮助。您是否可以编辑您的答案，以包含额外的细节，以造福社区？ - undefined