こんにちは！アイスタイルでフロントエンドエンジニアをやってますsakaguchiiです。
この記事はアイスタイル Advent Calendar 2020２日目の記事になります?
去年のアドカレではVueで作ってみたものについて書いていました！
今年の自分は通して振り返るとjsよりHTMLやCSSでの静的なページの作成が気持ち多めな年でした ?
弊社ではHTML/CSSに対してサービス全体を対象としたコ―ディングガイドラインを制定しており、中でもCSSではstylelint※を用いてプロパティの記述順やカラーコードの指定、小数点の前にゼロを入れない…などをルール化しています?
※ stylelint
A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.
（エラーを回避し、スタイルの規約を強制するのに役立つ、強力でモダンなリンター。）
https://github.com/stylelint/stylelint
実のところ、私はアイスタイルに入社する前までstylelintという概念を知らなかったので、入社時は「なんでプロパティ順にルールがあったりするんだろう？？？」という気持ちがありました……
のですが、入社早々下記のようなコードを書いてしまい……?
コメントをいただいて「なるほどな～！」と身をもってその意味を実感しました。
重複したスタイル指定は単に無意味ですし、後々の負債になり得ます。
記述エラーを回避することはもちろん、@cosmeのように歴史が長く大規模なサイト＆大人数が関わるプロジェクトになると塵の負債が塊になって首を絞めてくるので、記述ルール決めをしておくことが大事になります。
stylelintはコマンドからエラーチェックを走らせたり、オプションでstylelintエラーを自動修正が可能なのですが、開発中に毎回チェックを走らせているかというと私はそうでもなく…?
push前にエラーチェックのコマンドを叩くとエラーが大量にでて心が折れかけたり?
作業してない別ファイルの大量のエラーがターミナルに表示されて作業のノイズになって更に心が折れかけたりします?
ということでpush直前のエラーチェックでのstylelintのエラーを減らすために、コードを書いている途中でもよしなにフォーマットしてくれるようエディタをカスタマイズしたので、今回はそれについて書こうと思います?
■ 使っているもの
・Visual Studio Code
■ 追加した拡張機能
・csscomb
■ カスタマイズ手順
拡張機能を追加した後、setting.jsonにcsscombを使う旨の記載をし、ついでに他の処理が余計なことをしないようにfalseにしておきます。このあたりは個人の好みです?
{
"csscomb.preset": "csscomb",
"css.validate": false,
"less.validate": false,
"scss.validate": false
}
さらに「プロパティ順はこうしたい」「小数点はゼロ省略したい」など自分でカスタマイズしたいので、設定ファイルを開いて設定していきます。
/Users/{name}/.vscode/extensions/mrmlnc.vscode-csscomb-5.2.2/node_modules/csscomb/config/csscomb.json
※ 環境によって.vscodeのフォルダの場所は異なります。
{
"exclude": [
".git/**",
"node_modules/**",
"bower_components/**"
],
"always-semicolon": true,
"block-indent": " ",
"color-case": "lower",
"color-shorthand": true,
"element-case": "lower",
"eof-newline": true,
"leading-zero": false,
"quotes": "single",
"remove-empty-rulesets": true,
"space-after-colon": " ",
"space-after-combinator": " ",
"space-after-opening-brace": "\n",
"space-after-selector-delimiter": "\n",
"space-before-closing-brace": "\n",
"space-before-colon": "",
"space-before-combinator": " ",
"space-before-opening-brace": "\n",
"space-before-selector-delimiter": "",
"strip-spaces": true,
"unitless-zero": true,
"vendor-prefix-align": true,
"sort-order": [
[
"font",
"font-family",
"font-size",
"font-weight",
// 長いので省略
"text-shadow"
]
]
}
設定ファイル（csscomb.json）の中身はこのようになっており、
例えば括り文字はシングルクォートを使いたい場合は"quotes": "single"、
小数点はゼロ省略したい場合は"unitless-zero": true、
プロパティ順もsort-orderの配列の中に並べたいプロパティ順を入れてあげることで指定することができます?
■ 実演
下記のようなゼロ省略していない・カラーコード省略できるのにしていない、プロパティ順ぐちゃぐちゃなコードででフォーマットをかけてみます。
※ 赤波線がstylelintエラーです。赤波線の表示は別の拡張機能の設定です。
コマンドから>csscomb: format stylesを呼び出すと…
stylelintエラーがなくなりました。
プロパティ順が入れ替わり、ゼロは省略され、インデントもカラーコードも適切なものになっています。
冒頭で私がやらかしてしまっていたbackgroundが重複している件も同じ場所に来ているので、発見しやすくなってますね！?
この方法だとファイル全体にフォーマットがかかるので、
自分が作業していない箇所で差分は作りたくない！という場合は下記のように適応したい箇所だけ選択して修正することも可能です
これでpush直前に心が折れることもなくなりました?
おわりに
記事冒頭で記載した通り、塵の負債が塊になって首を絞めてくるので、コードの整理整頓はとてもとてもとても大事だと思っています。
常に整理整頓を心掛けるためにも、ちいさなお掃除コストを減らすことが結果、未来の自分たちのためになるので今後も効率化できる方法を模索していきたいな！と思います?
