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

问题描述

现在，我正在尝试使用 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 0%);

谁能帮我让 Prettier 使用 Stylelint 的规则自动格式化东西？我对此很陌生，所以有点迷茫。

解决方法

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

例如：

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

Prettier 将负责大部分格式设置，stylelint 将负责 checking for possible errors 和 limiting languages features。

,

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

{
    "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
    }
}

到目前为止它对我有用！