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

Posted 2023-03-06

【中文标题】如何更改 .less 文件的 Prettier 行为？

【英文标题】：How to change Prettier behaviour on .less Files?

【发布时间】：2018-03-14 09:18:21

【问题描述】：

我在我的 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"
        
    ]

【参考方案1】：

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

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

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

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

【讨论】：

啊，我想我需要一点时间来整理一下并测试一下：所以prettier-stylelint 把 lint 放在上面（别名 'afterwards'）更漂亮？

是的，它会的。在 stylelint-fix 模式下。我“假设”你可以定义一个规则，就像上面的选择器列表一样，并且即使 prettier 不喜欢它，因为 stylelint 是最后一个，但我们会看到这一点。但他们只提到排除冲突的 stylelint 规则，而不是相反。 prettier 很有主见

@mark 花了几个小时来解决这个问题。虽然我的问题有点不同，但这会给你一个关于如何在 VSCode 中设置 stylelint 的想法：***.com/a/54757106/3331700