使用 Prettier 和 Stylelint 规则格式化 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

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

例如：

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

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

Answer 2

我对这一切都很陌生，但也许能提供帮助。 我一直在努力让 stylelint 自动修复，只保存 CSS。 我的项目文件夹中有一个包含我所有规则的 .stylelintrc 文件。 settings.json 阻止 Prettier 覆盖：

{
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "[css]": {
        "editor.defaultFormatter": null,
        "editor.formatOnSave": false
    },
    "editor.formatOnSave": true,
    "prettier.useTabs": true,
    "prettier.proseWrap": "never",
    "prettier.printWidth": 300,
    "editor.codeActionsOnSave": {
        "source.fixAll.stylelint": true
    }
}

到目前为止它对我有用！