【初心者向】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で使用する手順を備忘録としてまとめておきます。
手順
- 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
- └ 📂 config
- └ 📂 .csscomb
- └ 📂 node_modules
- └ 📂 mrmlnc.vscode-csscomb-5.2.2
- └ 📂 extensions
- └ 📂 (user name)
- └ 📂 Users
の中に「csscomb.json」ファイルがありますので、これをコピーして、別のディレクトリに移動してパスを記述します。ここでは、.vscodeディレクトリに配置したとして記述しています。
Shell [4]"csscomb.preset": "~/.vscode/csscomb.json" - 🖥 C
- （カスタマイズする場合）CSScomb: Build configにアクセスして、自分好みの設定ファイルを作成します。csscomb.com http://csscomb.com/config
スタイルシートの整形ルールのシチュエーション毎に2～3パターンの候補が出て来るので、自分の好みに応じてクリックして進めます。全部で24個あります。
- 3.で作った設定を2.の「csscomb.json」に上書きします。
- もしプロパティのソート順を変更したい場合は、「csscomb.json」の「sort-order」中の配列の順番を変更します。
ちなみに、初期設定ではプロパティがグループごとに配列でまとまっているため、CSScombを適用するとグループ間で無駄な改行が追加されます。
ですので、これは邪魔になるので、1つの配列にまとめます。 - これで設定は終了です。スタイルシートを開いて「F1」を押して「CSScomb」を選択すれば自動で適用することが出来ます。
参考
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...
WordPressでホームページを制作しつつ、休日は畑を耕したりDIYを楽しんでいます。
コメントをどうぞ