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

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


開発

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

例えば

.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
参考
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にアクセスして、自分好みの設定ファイルを作成します。

config

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

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

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

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

参考

Use csscomb for VS Code
参考
Use csscomb for VS Code

I'm trying VS Code for a few days and I've installed csscomb extension. It works fine when I put .csscomb.json on my work directory. But I wish it worked even on file I open outside of my work dire...

Stack Overflow

今日はここまで
【初心者向】Visual Studio CodeでCSScombを設定する方法

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


開発

CSScombは、予め設定したルールに従ってスタイルシートを整形・プロパティ毎にソートしてくれるツールです。 http://csscomb.com/ 例えば .style{margin-left:0px; backgro…


関連する記事



こちらはいかが?


Bootstrapの変数を自分のSCSS(SASS)で使う方法
Bootstrapの変数を自分のSCSS(SASS)で使う方法

bootstrapのソースファイルを一括ダウンロードすると、その中には複数のscssファイルが格納されています。 通常、bootstrapの色や幅などの数値を変更するにはその中にある _variables.scss の中…

コメントを残す