開発

【初心者向】Visual Studio CodeでCSScombを設定する方法


CSScombは、予め設定したルールに従ってスタイルシートを整形・プロパティ毎にソートしてくれるツールです。

CSScomb: Makes your code beautiful

No Description

例えば

.style{margin-left:0px;
	background:#000000;
	margin-top:0.5em;
	font-size:12px;
}

のようなスタイルシートがあるとします。
marginの記述がバラバラの位置にあったり、単位が不要な0にpxが付いていたりと、サイト表示には問題無いけれど、どうも汚いソースとなっています。

これにCSScombを使うと、

.style{
	font-size: 12px;
	margin-top: .5em;
	margin-left: 0;
	background: #000;
}

と、プロパティを揃えて並べ替えつつ、「#000000」を「#000」と短縮してくれたり、「0.5em」「0px」を「.5em」「0」のように整形してくれます。

このCSScombをVisual Studio Codeで使用する手順を備忘録としてまとめておきます。

1. Visual Studio Codeの「拡張機能」で「CSScomb」を検索してインストールします。

CSScomb – Visual Studio Marketplace

Extension for Visual Studio Code – Coding style formatter for CSS, Less, SCSS or Sass

2. 「ファイル」›「基本設定」›「設定」で、「ユーザー設定」タブにCSScombのルールを設定したファイルパスを記述します。

もし、自分でカスタマイズせず、標準の設定を使う場合は、

"csscomb.preset": "csscomb"

"csscomb.preset": "zen"

"csscomb.preset": "yandex"

と記述します。

カスタマイズしない場合はこれで準備は終了です。

「csscomb」の設定ファイルをベースにカスタマイズする場合は、Windowsの場合

C:\Users\(user name)\.vscode\extensions\mrmlnc.vscode-csscomb-5.2.2\node_modules\csscomb\config

の中に「csscomb.json」ファイルがありますので、これをコピーして、別のディレクトリに移動してパスを記述します。ここでは、.vscodeディレクトリに配置したとして記述しています。

"csscomb.preset": "~/.vscode/csscomb.json"

3. (カスタマイズする場合)CSScomb: Build configにアクセスして、自分好みの設定ファイルを作成します。

CSScomb: Build config

No Description

スタイルシートの整形ルールのシチュエーション毎に2~3パターンの候補が出て来るので、自分の好みに応じてクリックして進めます。全部で24個あります。

4. 3.で作った設定を2.の「csscomb.json」に上書きします。

5. もしプロパティのソート順を変更したい場合は、「csscomb.json」の「sort-order」中の配列の順番を変更します。
ちなみに、初期設定ではプロパティがグループごとに配列でまとまっているため、CSScombを適用するとグループ間で無駄な改行が追加されます。
ですので、これは邪魔になるので、1つの配列にまとめます。

6. これで設定は終了です。スタイルシートを開いて「F1」を押して「CSScomb」を選択すれば自動で適用することが出来ます。

参考

Use csscomb for VS Code

According to the csscomb page on VS Code’s Marketplace… They have “Supported settings” csscomb.preset Type: Object or String Defaut: {} Config’s name. Should be one of the following: csscomb, zen, yandex or an object containing custom configuration or path to config. And the following warning: Warning!


タグ: css Visual Studio Code

コメントを残す