Visual Studio 代码 CSS 缩进和格式化

Question

我想知道是否有任何方法可以使用快捷键ALT + SHIFT + F在 Visual Studio 代码中激活 CSS 文件的自动缩进？

它适用于 JavaScript，但奇怪的是不适用于 CSS。

Answer 1

是的，尝试安装vscode-css-formatter 扩展。
它只是添加了格式化.css文件的功能，并且快捷方式保持不变Alt + Shift + F 。

Answer 2

美化css/sass/scss/less

运行这个

输入alt+shift+f

或者

按F1或ctrl+shift+p然后输入 beautify ..

---

另一个 - JS-CSS-HTML 格式化程序

我认为这个扩展在内部都使用了js-beautify

Answer 3

浪费了一个小时寻找最佳选择。

只需将它们放在一起，以便于阅读和选择其中一个。

笔记：

• CSS和SASS/SCSS/LESS都是相关的
• HTML、Javascript、Typescript、JSON - VS 代码已经在格式化
• CSS 和相关 - VS 代码从今天开始没有格式化

选项：

• 要格式化 css/sass/scss/less：
  • 更漂亮
    • 支持所有与 css 相关的，而不是其他的，我选择这个，它很好用。
• 要格式化 JavaScript/TypeScript/CSS：
  • 美化css/sass/scss/less
    • 但是，VS 代码已经支持 JS、TS
• 格式化 JS、CSS、HTML、JSON 文件（包装 js-beautify）
  • JS-CSS-HTML 格式化程序
    • 但是，VS 代码已经支持 JS、HTML、JSON
• 格式化 CSS
  • CSS 格式化程序
    • 但是，仅支持 CSS，并非所有相关的 - 未维护 6 个月以上

格式化：

安装 Prettier 后，在 VS Code 中按Alt + Shift + F。

Answer 4

我建议使用Prettier ，因为它非常可扩展，但开箱即用仍然可以完美运行：

1. CMD + Shift + P -> Format Document

或者

1. Select the text you want to Prettify
2. CMD + Shift + P -> Format Selection

编辑：自从我第一次发布这个答案以来，Prettier 变得更加流行和标准化。 它甚至可以直接用于大多数现代前端项目的构建流程中。 我强烈鼓励希望格式化其代码的用户使用 Prettier VSCode 扩展，它尝试使用由上述构建流程配置的相同设置。

Answer 5

在 Visual Studio 代码中打开本地bootstrap.min.css后，它看起来没有缩进。 尝试了逗号ALT+Shift+F但徒劳无功。

然后安装

CSS 格式化程序扩展。

重新加载它并ALT+Shift+F以魅力缩进我的 CSS 文件。

答对了 ！！！

Answer 6

画廊中有几个可供选择，但我正在使用的一个是Michele Melluso 的 Beautify ，它提供了相当程度的可配置性，但对其余设置仍然不显眼。 它适用于 CSS 和 SCSS，让您缩进 3 个空格，将其余代码保持在 2 个空格，这很好。

如果你也喜欢的话，你可以从GitHub 上抓取它并自己调整它。

Answer 7

转到文件菜单->首选项->扩展然后键入CSS Formatter等待它加载并单击安装

Answer 8

安装 HookyQR.beautify 扩展。 它将美化您在 Visual Studio Code 中的 javascript、JSON、CSS、Sass 和 HTML。 这是为此目的最常用的扩展

Answer 9

Beautify ( Github ) & Prettier ( Github ) 是 Visual Studio Code 中最好的 Web 开发插件。

Answer 10

聚会可能有点晚了，但这可能会帮助用户使用prettier 。 只需将此行添加到setting.json文件中。

"[css]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

保存，现在一切都应该很好

Answer 11

要在需要时在 Visual Studio 中格式化代码，请按：(Ctrl + K) & (Ctrl + F)

可以在以下位置找到并更改自动格式化规则：工具/选项 -->（左侧边栏）：文本编辑器/CSS（或您想要更改的任何其他语言）

不幸的是，对于 CSS 语言，选项非常有限。 您还可以在以下位置进行一些更改：.../文本编辑器/所有语言