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

Question

我正在使用 Visual Studio 代码和 prettier in my Typescript project. It also formats 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;
}

我想要 Prettier 的是，让我一个人呆着（在这个特定方面。在 .less 文件中。）如果我想的话，让它们排成一行（或几行） .或者在多个上，如果是，他发现了什么：

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

ul,
ol {
    list-style: none;
}

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

更新：

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

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

Answer 1

我没有找到阻止 prettier 将换行符添加到您的选择器列表的方法。不过 vscode 有一个更漂亮的 stylelint 集成，请参阅 support for prettier-stylelint in vscode.

Stylelint extension for vsCode does have the option you need. newlines in selector lists : stylelint rule。

selector-list-comma-newline-before : "never-multi-line"

所以你可以只使用 stylelint 而不是 prettier。或者等待关于 prettier-stlelint 集成的 PR。好像很近了。

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

How to change Prettier behaviour on .less Files?

formatting

lint

less

visual-studio-code

prettier

更新：