Help us understand the problem. What is going on with this article?

CSSのプロパティを自動で並べ替える方法

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

  • 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

  1. stylelint-config-prettierをextend
  2. stylelint-prettierプラグインを有効化
  3. 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など土台となるルールセットも一緒に使うと思いますが今回は割愛しています。

リンク一覧

xrxoxcxox
デザイナーです。HTMLとCSS、それと少しだけJavaScriptも書きます。
https://www.keisukewatanuki.work/
life-a-tm
人生のイベントや日常生活に密着した比較サイト、情報サイト等様々なウェブサービスを企画・開発・運営
https://life.a-tm.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away