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

HTML / CSS

スポンサードサーチ

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

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

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



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


例えば、あるセレクタでは
width
height
font-size
の順で書いているのに、

別のセレクタでは
font-size
height
width
の順で書いてある。

ここまで極端ではありませんが、私が今まで書いてきたコードは、セレクタ又は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:関連付けする構文

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

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

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

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


よく分からない方は、

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

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

ちなみに.vscode-insiderというのは、私がVSCodeのinsider版を使っているからであり、通常のVSCodeの方は.vscodeというファイルがあるかと思います。

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

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




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

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

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

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



ここで出てくる、csscombの公式(?)ページhttp://csscomb.com/config
で設定できると色んなサイトで書いてありましたが、どのページを開いても広告しかなく、設定できませんでした…(私だけ?)


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

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

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

できたコードをさっき作ったjsonファイルに貼り付ければオッケーです。

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

ここが一番大切な所です。これを書き加えることで、プロパティの順番が自動で並び替えられます。

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

書き方はこんな感じです。※かなり省略しました

"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をコピーしました