如何在 VSCode 中使用 Prettier 編輯 CSS/SCSS/LESS 的自動格式設置規則？

Question

背景：

我正在使用 Prettier - VSCode 的代碼格式化程序擴展來在保存時自動格式化我的代碼。

問題：

我習慣於在我的 sass 文件中編寫單行塊（其中只有一個屬性），即

.some-class { background: #f00; }

問題是Prettier擴展將其格式化為多行，即

.some-class {
    background: #f00;
}

似乎更漂亮地將 stylelint 用於 css/scss 文件，我發現這些設置可以通過在設置中啟用來覆蓋：

"prettier.requireConfig": true並使用.prettierrc.js文件，但無法關閉單行塊的 linting。 如果這里有人對此有任何修復，將不勝感激。

謝謝

更新：

設置不能被"prettier.requireConfig": true覆蓋。 Prettier - VSCode 的代碼格式化程序擴展沒有從 VSCode 設置編輯樣式表 linting 的選項。

但是，可以選擇啟用stylelint集成，但這需要stylelint和stylelint-prettier npm 模塊。

Prettier默認使用標准 stylelint 配置進行樣式表 linting 和格式化。

在下面發布解決方案。

Answer 1

解決方案：

為了在 VSCode 中使用 Prettier - Code formatter extension 允許單行塊，請執行以下步驟：

1. 通過在 VSCode 設置 (JSON) 中添加以下內容來啟用 stylelint 集成： "prettier.stylelintIntegration": true
2. 在項目目錄中安裝stylelint和stylelint-prettier npm 模塊。 npm install stylelint stylelint-prettier --save-dev
3. 在項目目錄的根目錄下添加一個.stylelintrc.json文件，代碼如下：

    {
        "plugins": ["stylelint-prettier"],
        "rules": {
            "block-closing-brace-newline-after": "always-multi-line",
            "block-closing-brace-empty-line-before": "never",
            "block-closing-brace-space-before": "always",
            "block-opening-brace-space-after": "always",
            "block-opening-brace-space-before": "always",
            "block-closing-brace-newline-before": "always-multi-line",
            "block-opening-brace-newline-after": "always-multi-line",
            "indentation": 4
        }
    }

您可以添加/自定義更多 stylelint 規則，請在此處查看完整的規則列表。

我花了一些時間來了解如何配置這些選項，如果你是從 stylelint 開始的，我強烈建議你先閱讀它的指南。

Answer 2

我不知道 vscode 有這個功能。 一個簡單的解決方案可能是指定prettier-ignore ？

/* prettier-ignore */
.some-class { background: #f00; }

參考：

• https://prettier.io/docs/en/ignore.html#css

Answer 3

這是我找到的最好的解決方案之一。 它擁有您無需擔心格式化代碼的所有內容。