如何更改 .less 文件的 Prettier 行为？

Question

我在我的 Typescript 项目中使用 Visual Studio Code 和 prettier。它还格式化less 文件。

prettier 所做的是将每个选择器放在一行中..

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4... {
    margin: 0;
    padding: 0;
}

最终形成一个非常冗长的选择器链：

body,
div,
dl,
dt,
...
{
    margin: 0;
    padding: 0;
}

我想要更漂亮的是，让我一个人呆着（在这个特定方面。在.less 文件中。）如果我愿意，可以将它们放在一行（或多个）中。或者在多个，如果是的话，他发现了什么：

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4... {
    margin: 0;
    padding: 0;
}

ul,
ol {
    list-style: none;
}

顺便说一句：我可以通过在这些选择器之前添加// prettier-ignore 行来“证明”，只有更漂亮的人参与其中，而不是 vscode 或我的 tslint 中的任何内置内容。这也将是一个本地修复，但我想要一个更通用的解决方案......而不必在所有这些中抛出反 linter cmets......）

更新：

也许解决方案是将.less 文件指向不同的解析器。但是我找不到一段示例代码，那么如何更漂亮地告诉我的 postcss-Preferences...

{
    "singleQuote": true,
    "printWidth": 140,
    "overrides": [{
        "files": "*.less",
        "options": {
            "parser": "postcss"
        }
    }]
}

Answer 1

我看不出有什么方法可以阻止 prettier 将换行符添加到您的选择器列表中。不过，vscode 有一个更漂亮的样式集成，请参阅 support for prettier-stylelint in vscode.

Stylelint extension for vsCode 确实有您需要的选项。 newlines in selector lists : stylelint rule。

选择器列表逗号换行符之前： “从不多行”

所以你可以只使用 stylelint 而不是 prettier。或者等待 prettier-sttlelint 集成的 PR。看起来很接近了。