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

作成日:

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で使用する手順を備忘録としてまとめておきます。

手順

  1. 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

  2. 「ファイル」›「基本設定」›「設定」で、「ユーザー設定」タブに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"
    
  3. (カスタマイズする場合)CSScomb: Build configにアクセスして、自分好みの設定ファイルを作成します。
    csscomb.com http://csscomb.com/config

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

  4. 3.で作った設定を2.の「csscomb.json」に上書きします。
  5. もしプロパティのソート順を変更したい場合は、「csscomb.json」の「sort-order」中の配列の順番を変更します。
    ちなみに、初期設定ではプロパティがグループごとに配列でまとまっているため、CSScombを適用するとグループ間で無駄な改行が追加されます。
    ですので、これは邪魔になるので、1つの配列にまとめます。
  6. これで設定は終了です。スタイルシートを開いて「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...

物草 灸太郎

WordPressでホームページを制作しつつ、休日は畑を耕したりDIYを楽しんでいます。

コメントをどうぞ

  • メールアドレスが公開されることはありません。
  • コメント欄にURLは入力できません。
  • このサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシー利用規約が適用されます。