プログラミング

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

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

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

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

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

こちらの記事が神でした!
https://qiita.com/y-w/items/bd7f11013fe34b69f0df

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

  • stylelintでエラー検出
  • Prettierで書式のフォーマット
  • VS codeと連携し、保存時に自動整形を走らせる
  • アルファベット順に並べる
  • calcの文法チェック
  • 同一セレクタでプロパティが重複していないかチェック

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

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

本家さんで設定を行います。手順通りに行えば簡単に設定できます。
素晴らしい!

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

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

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

Gulp4で作業爆速化!オススメ設定を公開する【コピペOK】こんにちは!フリーランスエンジニアのせっち@yukinouz1です。 コーダーが知っておきたいツールの一つとしてGulpがあります...

stylelint-orderをダウンロード

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

<Terminal>

npm i 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です。

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

  • calcの文法チェック
  • 同一セレクタでプロパティが重複していなかチェック

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

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"
  ]
}

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

  • function-calc-no-invalid calc()の表記が間違っていないかをチェック
  • function-calc-no-unspaced-operator calc()の演算子の左右にスペースが入っているかチェック
  • declaration-block-no-duplicate-properties 同一セレクタ内で同じプロパティが使われていないかをチェック

その他の設定は公式から確認できます。
Rulesから自分好みの設定を選んでコピペするだけです!
https://stylelint.io/

stylelint-config-generatorというのがあり、ポチポチするだけでルールを追加でき、出来上がったコードを最後にコピぺするだけです。
間違えてルールを追加してしまったら削除できないっぽい(?)ので注意が必要。
https://maximgatilin.github.io/stylelint-config/

まとめ

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