2019.10.05スポンサードサーチContents汚いコードはデメリットだらけ拡張機能【CSScomb】CSScombを入れるとこんなに便利CSScombをインストールして動作させる3つの手順CSScombのインストール読み込む場所を設定する自分専用のjsonファイルをつくるCSScombを使わない方法もある補足(Sassを使う方)汚いコードはデメリットだらけWebの仕事についてから、他人の書いたコードを見たり触ったりすることが多くなりました。先日も仕事で、先輩とCSSを共有しながらコーディングを行ったのですが、他人が書くCSSの順番は自分のと違うので、正直、読み解くのが「面倒くさい」と感じました。私のような駆け出しコーダーは自分のCSSにすら、まだ明確な書き方のルールがないので、思いつくままにcssを書いていると、あとで自分のコードを見返した時に、分かりにくい・管理しにくい事に気付きました。別のセレクタではfont-sizeheightwidthの順で書いてある。ここまで極端ではありませんが、私が今まで書いてきたコードは、セレクタ又はcssファイルによってその記述順に決まりがなく、汚いコードと言えます。記述順が違うと、プロパティがあるかないか、どこに書いたか、を探す時間が数秒ないしコンマ何秒かかります。その時間が積み重なれば、それだけコーディング速度は遅くなります。汚いコードを書いていると、何もいいことがありません。「cssの記述順を自動で並べ替えてくれるシステムor拡張機能あるんじゃね?」ありました。その名も「CSScomb」。拡張機能【CSScomb】combは髪などをとかす「櫛(くし)」の事だそうです。VSCodeに拡張機能としてありますが、元はnpmにあるものだとかsublimeにあるのだとか...ゴニョゴニョ...。すみません、その辺はよく分からなかったので覚えていません笑。興味がある方はググってみてください。CSScombを入れるとこんなに便利VSCodeには元々整形してくれる機能がありますが、CSScombはそれらの機能に加え、プロパティを自分好みの順番に並べ替えてくれる機能があります。私がCSScombを選んだ一番の理由はこれです。その並べ替え自体は元々、CSSの構文チェックツールのstylelintというものらしいです。(後ほど出てきます)。CSScombの説明を先にします。以下のようなコードを書いたとします。見ずらいというか、分かりにくい。positionの近くにはtopやleftが欲しいし、widthとheightは近くにあった方が良いのは私だけでしょうか...。これはわざと分かりにくくしたのですが、コーディングした事ある人であれば自分の中で、その要素がどのように装飾されているかイメージしやすいcssの順番があると思います。私の場合は、1存在や形式(display、flex、positionなど)2外枠や大きさ(border、width、height、margin、padding)3文字や色(background、font-size、color、letter-spacing)4その他(animation、transitionなど)それらを自分でルール決めしてその通りに自動整形してくれるのがCSScombです。上記のコードに私が設定したCSScombを走らせるとこうなります↓かなり分かりやすくなりましたね!それではVSCodeにCSScombを入れて実際に作動するようになるまでの手順をご紹介します。次の3つの手順で動作させることができます。CSScombのインストール読み込む場所を設定する自分専用のjsonファイルをつくるそれでは順にご紹介します。CSScombのインストール拡張機能でCSScombを検索してイントールします。こちら(https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-csscomb)からもインストールできます。読み込む場所を設定するCSScombはデフォルトでも整形してくれるそうなのですが、今回は自分でカスタマイズする方法です。CSScombはjsonファイルを読み込んで動作するので、どこにあるjsonファイルを読み込むか、setting.jsonで設定します。すると、こんな画面が出てきます。項目は以下の通りです。赤線の所を変更していきます。「setting.jsonで編集」をクリックします。「csscomb.preset」のところに読み込み先を記述します。.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ジェネレーターでは設定できないので、追加で書き加えます。書き方はこんな感じです。["font","font-family","font-size"]この順番を変えると、それ通りにフォーマットしてくれるって感じです。こちらもある方のサイトを参考にさせていただきました。【Grunt】csscombでソートだけでなくインデントなどのフォーマットも整形するなんでもcsscombには、デフォルトで3つの順番決めのjsonファイルがあるらしいです。csscomb.jsonyandex.jsonzen.json私はzenをコピペしてから、細かい順番を変えてカスタマイズしました。一度3種類すべて見てみて、しっくり来るものをベースに、ちょちょいと変えるのが良いと思います。CSScombを使わない方法もある今回はCSScombで自動整形を行いましたが、VSCodeの有名整形ツール「Prettier」を使った方法もあるそうです。そっちのやり方も調べましたが、何やらPrettierの機能で現在はサポートされていない(使えることは使える)構文があり、今後長く使っていくには不安だなと思ってやめました。あとは先程ルールづくりで使ったstylelintこちらの公式だけでも多分並べ替えはできるんだと思います。現行は今のままで満足しているので、もし今後コーディングしていて手が届かないもどかしい場面が出てきたらstylelintの公式を読み込んで参考にしてみたいと思っています。Associationsにsassを追加しましょう。Serverという拡張機能で表示されたページとブラウザで表示したページでズレがありました。Driveを使ったBoostnoteの連携・同期・バックアップ方法(Windows)自宅と職場のパソコンで同期させたいと思い設定しました。Driveを使ってBoostnoteを連携・同期・バックアップさせる方法をご紹介します。コメントをキャンセルメールアドレスが公開されることはありません。上に表示された文字を入力してください。小学校・中学校の先生Web未経験でWebデザイナー/コーダーに転職Webデザインやプログラミングなど様々な情報を発信しています。YouTubeにドラム関連の動画を投稿しております。小学校・中学校の先生Web未経験でWebデザイナー/コーダーに転職Webデザインやプログラミングなど様々な情報を発信しています。YouTubeにドラム関連の動画を投稿しております。上かるびをフォローするYouTubehttps://www.youtube.com/watch?v=qEgHMSB2Ess目次Contents汚いコードはデメリットだらけ拡張機能【CSScomb】CSScombを入れるとこんなに便利CSScombをインストールして動作させる3つの手順CSScombのインストール読み込む場所を設定する自分専用のjsonファイルをつくるCSScombを使わない方法もある補足(Sassを使う方)関連記事Sass(sass,scss)でクラス名を自動補完してくれるVSCodeのおすすめ拡張機能(プラグイン)2019.11.042019.11.05CSSだけで実装できる!日向坂46風ホバーエフェクトボタン2019.09.30タイトルとURLをコピーしました。