汚いコードはデメリットだらけ
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をインストールして動作させる３つの手順
次の３つの手順で動作させることができます。
- CSScombのインストール
- 読み込む場所を設定する
- 自分専用の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」を読み込むように設定しました。この場所は多分どこでも大丈夫で、ファイル名も自分で決めたもので大丈夫です（多分）。
よく分からない方は、
|
1 |
"csscomb.preset":"~/.vscode/mycsscomb.json" |
をコピペして貼り付け、次のステップでjsonファイルの名前をmycsscombにすればオッケーです。
自分専用のjsonファイルをつくる
読み込み先は設定できたので、（私の場合）mycsscomb.jsonというファイルを作っていきます。ここをカスタマイズして自分好みの整形ルールを作ります。
まずは、VSCodeでファイルを新規作成し保存し（何も書かずに保存し）、好きな名前をつけ末尾を.jsonにし、jsonファイルを作成します。
保存先を、先程決めた場所（例の場合.vscodeの中）に保存します。保存してからファイルを開いてこうなっていればオッケーです。
それでは中身を書いていきます。
最初、構文が全く分からなかったので、こちらのサイトを参考にさせていただきました。
CSSのプロパティ記述順についてどうするかの話
stylelintのページでルールづくり
次にこちらにあるstylelintの公式ページのジェネレーターで自分ルールを作成します。
オプションをクリックしていくだけで自分のルールのコードを自動で作成してくれるので、便利です。
できたコードをさっき作ったjsonファイルに貼り付けます。
並び替えの構文を追加する
ここが一番大切な所です。これを先ほど作ったmycsscomb.jsonに書き加えることで、プロパティの順番が自動で並び替えられます。
上記のstylelintジェネレーターでは設定できないので、追加で書き加えます。
書き方はこんな感じです。※かなり省略しました
書く場所はmycsscomb.jsonの最後でよいかと思います。
|
1 |
"sort-order": ["font","font-family","font-size",………] |
この順番を変えると、それ通りにフォーマットしてくれるって感じです。こちらもある方のサイトを参考にさせていただきました。
【Grunt】csscombでソートだけでなくインデントなどのフォーマットも整形する
なんでもcsscombには、デフォルトで３つの順番決めのjsonファイルがあるらしいです。
私はzenをコピペしてから、細かい順番を自分好みに変えてカスタマイズしました。
自分で３種類すべて見てみて、しっくり来るものをベースに、ちょちょいと変えるのが良いと思います。
CSScombを使わない方法もある
今回はCSScombで自動整形を行いましたが、VSCodeの有名整形ツール「Prettier」を使った方法もあるそうです。
そっちのやり方も調べましたが、何やらPrettierの機能で現在はサポートされていない（使えることは使える）構文があり、今後長く使っていくには不安だなと思ってやめました。
あとは先程ルールづくりで使ったstylelint
こちらの公式だけでも多分並べ替えはできるんだと思います。
とりあえず現行は今のままで満足しているので、もし今後コーディングしていて手が届かないもどかしい場面が出てきたらstylelintの公式を読み込んで参考にしてみたいと思っています。
私も購入しましたが、きちんと学びたい方はこちらがおすすめです。
補足（Sassを使う方）
一度出てきましたが私のようにSassを使う場合、
Syntax Associationsにsassを追加しましょう。
|
1 2 3 |
"csscomb.syntaxAssociations": { "postcss": "scss" } |
コメント