VS Code 中的 CSS 设置更漂亮答案

【问题标题】：Prettier with CSS settings in VS CodeVS Code 中的 CSS 设置更漂亮
【发布时间】：2019-03-20 19:24:27
【问题描述】：

我已将 Prettier 扩展添加到我的 VS Code 编辑器中。

使用Less或Sass时，默认设置格式代码如下：

// Default

.parent_selector {
  .child_selector {
    color: red;
  }
}

// Desired Format

.parent_selector {

  .child_selector {
    color: red;
  }
}

如何调整 Prettier CSS 设置来实现这一点？我知道这看起来微不足道，但在更大的代码库中它有助于提高可读性。

【问题讨论】：

所以你说 Prettier 不能使用 less 和 sass，对吧？
你想要的规则是在新的嵌套块开始后要添加一个空行？还是应该在范围内的每个规则之前添加一个空行？
@demo Prettier 确实适用于 Less 和 Sass：Less example
@RoryO'Kane 理想情况下，我只想在范围内的每个规则之前留一个空格
Prettier 固执己见，所以 Prettier 工具尽量不提供太多选项。我尝试更改 Prettier Playground 中的所有选项，但都没有达到这种效果。因此，您必须使用其他一些 CSS 格式化工具来完成这种格式更改。该解决方案还可能使用其中一个工具来帮助您设置一个命令来运行 Prettier，然后再设置另一个程序来修改 Prettier 的格式。

【解决方案1】：

作为替代方法；可以通过stylelint插件和stylelint-config-standard规则来实现。

npm install --save-dev stylelint stylelint-config-standard

安装它们后，在 VS Code 上继续使用 ctrl+shift+p 并运行命令：stylelint: fix all auto-fixable problems。

PS：考虑为stylelint: fix all auto-fixable problems 命令分配一个键盘快捷键以便于访问。

【讨论】：