vscodeのコード整形について

Question

vscodeでweb制作を行っているのですが、その際のコード整形が思うようにいかず、躓いております。

.hoge {
    display:block;
    > .hogehoge {
        display: inline-block;
    }
}

として保存したときに

.hoge {
    display:block;
    >.hogehoge {
        display: inline-block;
    }
}

[.hoge]の前の半角スペースが消えてしまいます。
レギュレーション的にこのスペースを消したくないのですが、ご教授いただけないでしょうか？
コード整形を行っているのはプラグインで「JS-CSS-HTML Formatter」を使用して、保存されたタイミングでコード整形を行っています。

Answer 1

F1またはctrl+shift+pでコマンドパレットを開きFormatter ConfigまたはFormatter Create Local Configを実行してコンフィグファイルを作成。
その後、コンフィグファイルの"css"に"space_around_combinator": trueを追加してください。

{
    "onSave": true,
    "javascript": {
        // 省略
    },
    "css": {
        "indent_size": 4,
        "indentCharacter": " ",
        "indent_char": " ",
        "selector_separator_newline": true,
        "end_with_newline": false,
        "newline_between_rules": true,
        "eol": "\n",
        "space_around_combinator": true //これを追加
    },
    "html": {
        // 省略
    }
}

Comments

[kt-sygo0921]

解決できました
ありがとうございます
助かりました！