【Mac】VScodeでCSScombを使ってCSSやSassをきれいに書く

背景

VScodeには自動フォーマット機能が備わっていますが、CSSのフォーマッティングはかゆいところに手が届かないというか、自分好みにカスタマイズができないので、フォーマットした後でもすっきりしないことがしばしばありました。

エクステンション『CSScomb』は自分好みのフォーマットを適えてくれそうなので、今回導入してみました。今回はこの『CSScomb』の紹介です。

解説

本家: http://csscomb.com/

1. CSScombをVScodeのExtensionsからインストールします。
2. http://csscomb.com/ 内にある"Build config"を開き一問一答を解きながら自分好みのコンフィグファイルを生成します。
3. 生成されたjsonをコピーし、エディターにペーストしてcsscomb.jsonのファイル名で保存します。
4. Macの場合/Users/ユーザー名/.vscode/extensions/mrmlnc.vscode-csscomb-5.2.2/node_modules/csscomb/config/csscomb.json(5.2.2はバージョン)にcsscomb.jsonが格納されているので、これと置き換える。※置き換える前にバックアップをとっておくといいかも。
5. settings.jsonに"csscomb.preset": "csscomb"を追加。（settings.jsonはSettings(cmd + ,)を開いてから、右上の中括弧アイコン{}を押すと開けます。）
6. 保存するタイミングで整形してほしいので"csscomb.formatOnSave": trueもsettings.jsonに追加して有効化します。

完了です！！

保存時にフォーマットするのではなく、任意のタイミングで選択範囲のみフォーマットすることもできます。その場合は、範囲を選択してからcmd + ^ + PでCSScomb: Format stylesを呼び出せばOKです。

あとがき

もっっっっっと、自分にあったフォーマット方法がどこかにないものか。。
CSSだけでなくJSやHTMLでも使える素敵なものはないだろうか。。

そう思いながら、今日も黙々と仕事しています。