Prettierとstylelintで保存するときに自動整形する

概要

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ファイルを作成し、中身を記述↓

.stylelintrc.json

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

package.jsonにscriptを追加

package.json

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

VScodeにExtensionを追加

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

setting.json

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

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