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

到目前為止它對我有用！