PrettierとStylelintを使って自動整形・アルファベット順に並べる＋α【コピペ】

こんにちはフリーランスWebディレクター・エンジニアののせっち@nosecchi01です。

普段は東南アジアで引きこもりつつ、月50〜60万円ほど稼いで生きています。

コーディングは肉体労働です。
そこで自動化できるとこはどんどん自動化し作業を効率化させることが重要です。

Prettier、Stylelintを使ってSCSSファイルを自動整形させる方法、プラスαで自分なりの設定を解説します。

今回の記事は僕の設定ですが、やり方がわかれば自分なりのカスタマイズが可能です。

こちらの記事が神でした！

https://qiita.com/y-w/items/bd7f11013fe34b69f0df

上記をベースに僕の記事では下記の設定を目指します。

それではいってみましょう。

stylelintとprettierの設定、VS Codeの設定

お手本させていただいた本家さんで設定を行います。手順通りに行えば簡単に設定できます。
素晴らしい！

stylelintの導入とVS Codeの設定の方法 – Qiita

概要stylelint1とはCSSのためのLintです。Lintとは「コンパイラではチェックされない、バグの要因となりそうなソースコードの記述に対し、警告を行う静的解析処理」2…

qiita.com

アルファベット順に並べる設定を追加

僕のGulpの設定ではSCSSからCSSへコンパイルする際、アルファベット順にしています。
よって、SCSSを書く段階からアルファベット順にします。（これが一番の目的）

Gulpについては、下記の記事で解説していますので是非参考にしてください！
現役エンジニアさんからも評価されている入魂記事です！

Gulp4で作業爆速化！オススメ設定を公開する【コピペOK】

Gulp4の簡単な設定方法を知りたいですか？この記事では、node、Gulpのインストールから、便利な設定方法まで全てコピペで設定できるよう纏めました。機能についても詳しく…

flex-box.net

stylelint-orderをダウンロード

アルファベット順に並べるためにstylelint-orderをインストールします。

<Terminal>

npm i stylelint-order

公式

https://www.npmjs.com/package/stylelint-order

.stylelintrc.jsonは以下のようになります。
※最低限の設定は済んでいる前提で追記分を記載します。

<.stylelintrc.json>

{
  "plugins": ["stylelint-order", "stylelint-prettier"], #stylelint-orderを追加
  "rules": {
    "prettier/prettier": true,
    "order/properties-alphabetical-order": true, #追加
    "at-rule-no-unknown": null,
    "scss/at-rule-no-unknown": [
      true,
      {
        "ignoreAtRules": ["use", "forward"]
      }
    ]
  },
  "extends": [
    "stylelint-config-recommended-scss",
    "stylelint-prettier/recommended",
    "stylelint-config-prettier"
  ]
}

これでアルファベット順に並べることができます。

その他の設定を追加

stylelint-scssを使えば、更に様々なルールを加えることができます。

設定は厳格にしようと思えばいくらでもできますが、厳格すぎると逆にストレスになり作業効率が落ちるので、最低限のみ加えています。

できることを知っておけば、いくらでも付け加えればOKです。

今回加えたルールは下記です。

二つとも普通にミスると致命的だし、エラーチェックしてくれたら助かる、というものです。

stylelint-scssをインストール

<Terminal>

npm i stylelint-scss 

公式

https://www.npmjs.com/package/stylelint-scss

.stylelintrc.jsonは以下のようになります。

<.stylelintrc.json>

{
  "plugins": ["stylelint-order", "stylelint-prettier", "stylelint-scss"], #stylelint-scssを追加
  "rules": {
    "prettier/prettier": true,
    "order/properties-alphabetical-order": true,
    "at-rule-no-unknown": null,
    "function-calc-no-invalid": true, #追加
    "function-calc-no-unspaced-operator": true, #追加
    "declaration-block-no-duplicate-properties": true, #追加
    "scss/at-rule-no-unknown": [
      true,
      {
        "ignoreAtRules": ["use", "forward"]
      }
    ]
  },
  "extends": [
    "stylelint-config-recommended-scss",
    "stylelint-prettier/recommended",
    "stylelint-config-prettier"
  ]
}

追加した設定は下記です。

その他の設定は公式から確認できます。
Rulesから自分好みの設定を選んでコピペするだけです！

公式

https://stylelint.io/

まとめ

・Stylelint、Prettierを使って自動整形させることが可能。
・アルファベット順に並べ換えることができる。
・その他のルールも追加できる