複数人で開発をしていると

marginとpaddingってどちらを先に書けば良いだろう？
position指定ってtop -> right -> bottom -> leftの順が良いのかな？

などの話が出ることはありませんか？

自分は結構質問されるのですが、個人的にはカスケーディングがスタイルに影響を与えない場面ではどんな順番でも良いと思っています。

しかし、ルールがあればミスが減り、レビューがしやすくなるのも事実。

というわけで自動でプロパティの並び順を変更できる設定を作っていきましょう。

Prettierのインストール

yarn add prettier -D

まず初めにPrettierをインストールします。
Prettierはコードフォーマッターで、予め指定したルールに沿ってコードを整形してくれます。

stylelintのインストール

yarn add stylelint -D

次にstylelintをインストールします。
stylelintはリンターで、CSSやSCSSなどのエラー回避や書式の統一に役立ちます。

stylelint-config-prettierのインストールと設定

yarn add stylelint-config-prettier -D

.stylelintrc

{
  "extends": ["stylelint-config-prettier"]
}

stylelint-config-prettierはPrettierと競合するルールをオフにしてくれます。
ルールが競合するとお互いがお互いをエラー/書式のミスとして認識しておかしなことになってしまうためインストールが必要です。

stylelint-prettierのインストールと設定

yarn add stylelint-prettier -D

.stylelintrc

{
  "extends": ["stylelint-config-prettier"],
  "plugins": ["stylelint-prettier"],
  "rules": {
    "prettier/prettier": true
  }
}

stylelint-prettierはPrettierをstylelintのルールとして実行し、エラーを教えてくれたり修正したりに使います。
.stylelintrcの中でプラグインの有効化とルールの追加をします。

なお、stylelint-prettierをインストールしたからとPrettierやstylelintが自動でインストールされるわけではありません。
そのため前の項で手動でインストールを行っています。

また、上記の.stylelintrcは実は次のように短く書けます。

.stylelintrc

{
  "extends": ["stylelint-prettier/recommended"]
}

stylelint-prettier/recommendedが

stylelint-config-prettierをextend
stylelint-prettierプラグインを有効化
prettier/prettierルールを有効化

してくれるためです。

stylelint-orderのインストールと設定

yarn add stylelint-order -D

.stylelintrc

{
  "extends": ["stylelint-prettier/recommended"],
  "plugins": ["stylelint-order"],
  "rules": {
    "order/properties-alphabetical-order": true
  }
}

stylelint-orderはその名の通りプロパティの並び順ルールについてのパッケージです。
並び順は色々なルールがあるようですが、自分は一番明快だろうとアルファベット順を選択しました。

準備完了、あとはコマンドを叩くだけ

yarn run stylelint '**/*.css' --fix

上記のようなコマンドを叩くとCSSの並び順を修正してくれます。
'**/*.css'の部分はこの書き方だと全てのCSSファイルへの修正が走りますが、具体的に'src/style/somepage.css'のようにしてもOKです。

補足

実際にstylelintを使う場面ではほぼ間違いなくstylelint-config-standardなど土台となるルールセットも一緒に使うと思いますが今回は割愛しています。

リンク一覧