如何使用VSCode中的Prettier编辑CSS / SCSS / LESS的自动格式设置规则？

Question

背景：

我使用的是Prettier-VSCode的代码格式化扩展程序，可以在保存时自动格式化我的代码。

问题：

我习惯在我的sass文件（只有一个属性）中写单行块，即

.some-class { background: #f00; }

问题是Prettier扩展程序将其格式化为多行，即

.some-class {
    background: #f00;
}

似乎更漂亮的样式样式用于css / scss文件，我发现可以通过在设置中启用此设置来覆盖这些设置：

"prettier.requireConfig": true并使用.prettierrc.js文件，但无法关闭单行块的棉绒。如果有人在此有任何修复，将不胜感激。

谢谢

更新：

设置不能被覆盖"prettier.requireConfig": true。该更漂亮-代码格式化扩展VSCode没有一个选项，编辑从样式设置VSCode掉毛。

但是，有一个选项可以启用stylelint集成，但这需要stylelint和prettier-prettier npm模块。

默认情况下，漂亮的样式将标准stylelint配置用于样式表的样式和格式设置。

在下面发布解决方案。

Answer 1

解：

为了允许使用Prettier- 代码格式化程序扩展名的VSCode中的单行块，请执行以下步骤：

1. 通过在VSCode设置（JSON）中添加以下代码来启用stylelint集成： "prettier.stylelintIntegration": true
2. 在项目目录中安装stylelint和stylelint-prettier npm模块。npm install stylelint, stylelint-prettier --save-dev
3. 使用以下代码在项目目录的根目录中添加.stylelintrc.json文件：

    {
        "plugins": ["stylelint-prettier"],
        "rules": {
            "block-closing-brace-newline-after": "always-multi-line",
            "block-closing-brace-empty-line-before": "never",
            "block-closing-brace-space-before": "always",
            "block-opening-brace-space-after": "always",
            "block-opening-brace-space-before": "always",
            "block-closing-brace-newline-before": "always-multi-line",
            "block-opening-brace-newline-after": "always-multi-line",
            "indentation": 4
        }
    }

您可以添加/自定义更多stylelint规则，请在此处查看规则的完整列表。

花了我一段时间来了解如何配置这些选项，如果您从stylelint开始，我强烈建议您先阅读其指南。