今回は、CSSコードを自動整形できるVSCodeの「CSS comb」の使い方について紹介します。
「CSS comb」を使うことで、自動でCSSコードを整えることが出来るので、是非参考にしてみてください。
CSSコードを自動整形できるVSCodeの「CSS comb」の使い方
「CSS comb」を使うには、これから紹介する5ステップを踏めばOKです。
① VSCodeをインストールする
まずはVSCodeをインストールしましょう。
VSCodeの公式サイトからインストールすることが出来ます。
② CSS combをインストールする
VSCodeがインストール出来たら、次はプラグインである「CSS comb」をインストールしていきます。
今回は「CSScomb 5.3.2」をインストールしました。
③ 設定ファイルを作成する
次に「csscomb.json」といった名前のファイルを作成します。
④ CSSのフォーマットを設定する
「csscomb.json」のファイルが作成出来たら、次にCSSコードのフォーマットを設定していきます。
設定をすることで、例えばCSSプロパティをアルファベット順に自動で並び替えたり自分好みのフォーマットを作成することが出来ます。
初めての方は分からないと思いますので、そんな時は「設定のジェネレーター」を使うと良いでしょう。
質問に答えるだけで、フォーマットを作成することが出来るので、おすすめですよ。
ちなみに、僕は以下のフォーマットを使っています。
{
"remove-empty-rulesets": true,
"always-semicolon": true,
"color-case": "lower",
"block-indent": " ",
"color-shorthand": true,
"element-case": "lower",
"eof-newline": false,
"leading-zero": false,
"quotes": "double",
"sort-order-fallback": "abc",
"space-before-colon": "",
"space-after-colon": " ",
"space-before-combinator": "",
"space-after-combinator": " ",
"space-between-declarations": "\n",
"space-before-opening-brace": " ",
"space-after-opening-brace": "\n",
"space-after-selector-delimiter": " ",
"space-before-selector-delimiter": "",
"space-before-closing-brace": "\n",
"strip-spaces": true,
"tab-size": true,
"unitless-zero": true,
"vendor-prefix-align": true
}
フォーマットが出来たら、先ほど作成した「csscomb.json」にコピペして貼り付けましょう。
⑤ フォーマットを実行してCSSコードを自動整形する
ここまで出来たら、最後にCSSコードを自動整形していきましょう。
VSCodeのCSSファイルを開いた状態で、Macなら「command + shift + p」を押します。
すると検索バーが出てくるので、「CSSComb」と打ち込むと「CSSComb: Format styles」のメニューが出てくるのでクリックします。
するとCSSコードがフォーマット通りに自動整形されます。
まとめ
以上が、CSSコードを自動整形できるVSCodeの「CSS comb」の使い方でした。
