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

Question

现在，我正在尝试使用 Prettier 和 Stylelint 的规则来格式化我的 SCSS 代码。我很难让这两个人排成一行。

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

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

您可以 integrate Prettier with stylelint通过使用 stylelint-config-prettier shared config 关闭冲突的 stylelint 规则.

例如:

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

然后 Prettier 将负责大部分格式化，而 stylelint 将负责 checking for possible errors。和 limiting languages features .