使用 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%);

任何人都可以帮助我使用 Stylelint 的规则让 Prettier 自动格式化东西吗？我对此很陌生，所以有点迷茫。

Answer 1

你可以integrate Prettier with stylelint by turning off the conflicting stylelint rules using the 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 and limiting languages features。

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

到目前为止它对我有用！

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

Format SCSS/CSS/LESS with Prettier with rules of Stylelint

css

sass

less

stylelint

prettier