使用 Stylelint 规则使用 Prettier 格式化 SCSS/CSS/LESS

Question

现在，我正在尝试使用 Prettier 并遵循 Stylelint 的规则来格式化我的 SCSS 代码。我很难让这两个人站在一起。

例如，declaration-colon-new-line对于以下 scss 代码，我不断收到 stylelint 错误（这是正确的）：

background-image: linear-gradient(45deg, transparent 50%, #263b59 50%),
    linear-gradient(135deg, #263b59 50%, transparent 50%),
    radial-gradient(transparent 0%, transparent 0%);

使用 Prettier 格式化后，它应该如下所示（或满足规则的内容），但我找不到选项或如何执行此操作：

background-image: 
    linear-gradient(45deg, transparent 50%, #263b59 50%),
    linear-gradient(135deg, #263b59 50%, transparent 50%),
    radial-gradient(transparent 0%, transparent 0%);

谁能帮我让 Prettier 按照 Stylelint 的规则自动格式化内容？我对此很陌生，所以有点失落。

Answer 1

您可以通过使用stylelint-config-prettier 共享配置关闭冲突的 stylelint 规则来将 Prettier与 stylelint 集成。

例如：

// .stylelintrc
{
  "extends": [
    "stylelint-config-standard" // or whatever config you're using
    "stylelint-config-prettier"
  ]
}

Prettier 将负责大部分格式化工作，stylelint 将负责检查可能的错误并限制语言功能。