概要

CSSの記述をPrettierとstylelintで保存するときに自動整形できるようにします。
最小限の設定です。
プロパティの並びはアルファベット順にします。

手順

インストールと設定ファイル作成

1. npm i -D stylelint stylelint-config-recommendedでインストール
2. npm i -D prettier stylelint-config-prettier@7.0.0 stylelint-prettierでインストール
   バージョンを指定しないとstylelint-plusとの組み合わせ時に動作しないため
   参考
3. npm i -D stylelint-order stylelint-config-recess-orderでインストール
4. ルートディレクトリに.stylelintrc.jsonファイルを作成し、中身を記述↓

{"extends":["stylelint-config-recommended","stylelint-config-recess-order","stylelint-prettier/recommended"]}

package.jsonにscriptを追加

"scripts":{"lint:css":"stylelint --fix ./**/*.css"}

VScodeにExtensionを追加

1. インストールするExtensionstylelint-plus
2. setting.jsonを開く
3. 下記を追加

{"css.validate":false,"scss.validate":false,"stylelint.autoFixOnSave":true,"[css]":{"editor.formatOnSave":false},"[scss]":{"editor.formatOnSave":false}}

これで保存時に自動で整形されます。