CSSの記述順で迷わない!汚いコードをキレイにしてコーディング速度をあげよう!VSCode拡張機能【CSScomb】

HTML / CSS

汚いコードはデメリットだらけ

Webの仕事についてから、他人の書いたコードを見たり触ったりすることが多くなりました。

先日も仕事で、先輩とCSSを共有しながらコーディングを行ったのですが、他人が書くCSSの順番は自分のと違うので、正直、読み解くのが「面倒くさい」と感じました。

また私のような駆け出しコーダーは、自分のCSSにすらまだ明確な書き方のルールがないので、思いつくままにcssを書いていると、見返した時に分かりにくい・管理しにくいということが起きてきます。

コードの記述順に決まりがないと、プロパティがあるかないか、どこに書いたか、を探す時間が発生してしまいます。つまりそれだけコーディング時間が増えてしまいます。

つまり、汚いコードを書いていると、何もいいことがありません。
そこで思いつく。

「cssの記述順を自動で並べ替えてくれるシステムor拡張機能あるんじゃね?」

その名も「CSScomb」。

拡張機能【CSScomb】

combは髪などをとかす「櫛(くし)」の事だそうです。

VSCodeに拡張機能としてありますが、元はnpmにあるものだとかsublimeにあるのだとか…ゴニョゴニョ…。

すみません、その辺はよく分からなかったので覚えていません笑。
興味がある方はググってみてください。

CSScombを入れるとこんなに便利

VSCodeには元々整形してくれる機能がありますが、CSScombはそれらの機能に加え、プロパティを自分好みの順番に並べ替えてくれる機能があります。

私がCSScombを選んだ一番の理由はこれです。

その並べ替え自体は元々、CSSの構文チェックツールのstylelintというものらしいです。(後ほど出てきます)。
とりあえず、CSScombの説明を先にします。

例えば以下のようなコードを書いたとします。

み、見ずらい…😭
見ずらいというか、分かりにくい。

positionの近くにはtopやleftが欲しいし、widthとheightは近くにあった方が良いのは私だけでしょうか…。

これはわざと分かりにくくしたのですが、コーディングした事ある人であれば自分の中で、

その要素がどのように装飾されているかイメージしやすいcssの順番があると思います。

私の場合は、
①存在や形式(display、flex、positionなど)
②外枠や大きさ(border、width、height、margin、padding)
③文字や色(background、font-size、color、letter-spacing)
④その他(animation、transitionなど)

それらを自分でルール決めしてその通りに自動整形してくれるのがCSScombです。

上記のコードに私が設定したCSScombを走らせるとこうなります↓

かなり分かりやすくなりましたね!

それではVSCodeにCSScombを入れて実際に作動するようになるまでの手順をご紹介します。

CSScombをインストールして動作させる3つの手順

次の3つの手順で動作させることができます。

  1. CSScombのインストール
  2. 読み込む場所を設定する
  3. 自分専用のjsonファイルをつくる

それでは順にご紹介します。

CSScombのインストール

拡張機能でCSScombを検索してイントールします。

こちら(https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-csscomb)からもインストールできます。

読み込む場所を設定する

CSScombはデフォルトでも整形してくれるそうなのですが、今回は自分でカスタマイズする方法です。

CSScombはjsonファイルを読み込んで動作するので、どこにあるjsonファイルを読み込むか、setting.jsonで設定します。

ファイル>基本設定>設定>検索欄にCSScomb と進みます。すると、こんな画面が出てきます。

項目は以下の通りです。赤線の所を変更していきます。(詳しくは先程の公式ページを御覧ください)

  • Format On Save:保存時に整形するかどうか
  • Ignore Files On Save:保存時に無視するファイルの設定
  • Preset:読み込み先の設定
  • Support Embedded Styles:HTMLへの埋め込みCSSのサポートをするかどうか
  • Syntax Associations:関連付けする構文(私の場合scssを使いしています)

「setting.jsonで編集」をクリックします。

「csscomb.preset」のところに読み込み先を記述します。

私の場合は、
C > ユーザー > ○○(本名) > .vscode-insider 

の中にある「mycsscomb.json」を読み込むように設定しました。この場所は多分どこでも大丈夫で、ファイル名も自分で決めたもので大丈夫です(多分)。

よく分からない方は、

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

をコピペして貼り付け、次のステップでjsonファイルの名前をmycsscombにすればオッケーです。

ちなみに.vscode-insiderというのは、私がVSCodeのinsider版を使っているからであり、通常のVSCodeの方は.vscodeというファイルがあるかと思います。そのファイルの中にこれから作るjsonファイルを保存していきます。

自分専用のjsonファイルをつくる

読み込み先は設定できたので、(私の場合)mycsscomb.jsonというファイルを作っていきます。ここをカスタマイズして自分好みの整形ルールを作ります。

まずは、VSCodeでファイルを新規作成し保存し(何も書かずに保存し)、好きな名前をつけ末尾を.jsonにし、jsonファイルを作成します。

保存先を、先程決めた場所(例の場合.vscodeの中)に保存します。保存してからファイルを開いてこうなっていればオッケーです。

それでは中身を書いていきます。

最初、構文が全く分からなかったので、こちらのサイトを参考にさせていただきました。
CSSのプロパティ記述順についてどうするかの話

stylelintのページでルールづくり

次にこちらにあるstylelintの公式ページのジェネレーターで自分ルールを作成します。

オプションをクリックしていくだけで自分のルールのコードを自動で作成してくれるので、便利です。

できたコードをさっき作ったjsonファイルに貼り付けます。

並び替えの構文を追加する

ここが一番大切な所です。これを先ほど作ったmycsscomb.jsonに書き加えることで、プロパティの順番が自動で並び替えられます。

上記のstylelintジェネレーターでは設定できないので、追加で書き加えます。

書き方はこんな感じです。※かなり省略しました
書く場所はmycsscomb.jsonの最後でよいかと思います。

"sort-order": ["font","font-family","font-size",………]

この順番を変えると、それ通りにフォーマットしてくれるって感じです。こちらもある方のサイトを参考にさせていただきました。

【Grunt】csscombでソートだけでなくインデントなどのフォーマットも整形する

なんでもcsscombには、デフォルトで3つの順番決めのjsonファイルがあるらしいです。

私はzenをコピペしてから、細かい順番を自分好みに変えてカスタマイズしました。

自分で3種類すべて見てみて、しっくり来るものをベースに、ちょちょいと変えるのが良いと思います。

CSScombを使わない方法もある

今回はCSScombで自動整形を行いましたが、VSCodeの有名整形ツール「Prettier」を使った方法もあるそうです。

そっちのやり方も調べましたが、何やらPrettierの機能で現在はサポートされていない(使えることは使える)構文があり、今後長く使っていくには不安だなと思ってやめました。

あとは先程ルールづくりで使ったstylelint

こちらの公式だけでも多分並べ替えはできるんだと思います。

とりあえず現行は今のままで満足しているので、もし今後コーディングしていて手が届かないもどかしい場面が出てきたらstylelintの公式を読み込んで参考にしてみたいと思っています。

補足(Sassを使う方)

一度出てきましたが私のようにSassを使う場合、
Syntax Associationsにsassを追加しましょう。

  "csscomb.syntaxAssociations": {
        "postcss": "scss"
    }

コメント

タイトルとURLをコピーしました