開発

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

作成日： 2018年1月22日

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

csscomb.com http://csscomb.com/

例えば

CSS

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

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

これにCSScombを使うと、

CSS

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

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

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

手順

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

CSScomb - Visual Studio Marketplace https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-csscomb
Extension for Visual Studio Code - Coding style formatter for CSS, Less, SCSS or Sass
「ファイル」›「基本設定」›「設定」で、「ユーザー設定」タブにCSScombのルールを設定したファイルパスを記述します。
もし、自分でカスタマイズせず、標準の設定を使う場合は、
Shell [1]
```
"csscomb.preset": "csscomb"
```
か
Shell [2]
```
"csscomb.preset": "zen"
```
か
Shell [3]
```
"csscomb.preset": "yandex"
```
と記述します。
カスタマイズしない場合はこれで準備は終了です。
「csscomb」の設定ファイルをベースにカスタマイズする場合は、Windowsの場合
ファイル階層
- 🖥 C
  - └ 📂 Users
    └ 📂 (user name)
    └ 📂 extensions
    └ 📂 mrmlnc.vscode-csscomb-5.2.2
    └ 📂 node_modules
    └ 📂 .csscomb
    └ 📂 config
    └ 📄 csscomb.json
の中に「csscomb.json」ファイルがありますので、これをコピーして、別のディレクトリに移動してパスを記述します。ここでは、.vscodeディレクトリに配置したとして記述しています。
Shell [4]
```
"csscomb.preset": "~/.vscode/csscomb.json"
```
（カスタマイズする場合）CSScomb: Build configにアクセスして、自分好みの設定ファイルを作成します。

csscomb.com http://csscomb.com/config

スタイルシートの整形ルールのシチュエーション毎に2～3パターンの候補が出て来るので、自分の好みに応じてクリックして進めます。全部で24個あります。
3.で作った設定を2.の「csscomb.json」に上書きします。
もしプロパティのソート順を変更したい場合は、「csscomb.json」の「sort-order」中の配列の順番を変更します。
ちなみに、初期設定ではプロパティがグループごとに配列でまとまっているため、CSScombを適用するとグループ間で無駄な改行が追加されます。
ですので、これは邪魔になるので、1つの配列にまとめます。
これで設定は終了です。スタイルシートを開いて「F1」を押して「CSScomb」を選択すれば自動で適用することが出来ます。

参考

Use csscomb for VS Code https://stackoverflow.com/questions/42072102/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...