Stylelint + Prettier でCSSプロパティの並び順を自動フォーマットする

共同でCSSを書く時に、ルールが決まっていないとどうしてもプロパティの書き順がばらばらになってしまいます。
そこでStylelintとPrettierでアルファベット順に整形してみます。

前提としてSassを使った方法です。
テンプレート作ってるので、よかったら参考にしてください
https://github.com/mismith0227/web_template_gulp

必要なパッケージを追加

以下のコマンドを打ちます。

yarn add stylelint stylelint-config-prettier stylelint-config-recommended-scss stylelint-order stylelint-prettier stylelint-scss

.stylelintrc.jsonを作成

.stylelintrc.jsonを作り以下のように書きます。

{
  "plugins": ["stylelint-order"],
  "rules": {
    "order/properties-alphabetical-order": true
  },
  "extends": [
    "stylelint-config-recommended-scss",
    "stylelint-prettier/recommended",
    "stylelint-config-prettier"
  ],
  "ignoreFiles": ["./src/scss/foundation/_reset.scss"]
}

package.jsonにlintのコマンド追加

package.jsonのscriptsにlintのコマンドを追加します。

"scripts": {
  "dev": "npx gulp dev",
  // 省略
  "lint:css": "stylelint --fix **/*.scss" // 追加
},

自動フォーマットしてみる

yarn lint:css を実行するとアルファベット順に自動でフォーマットしてくれます

body {
  background-color: $color--body;
  margin: 0;
  padding: 0;
  letter-spacing: 0.05em;
}

// コマンド実行後 ↓
body {
  background-color: $color--body;
  letter-spacing: 0.05em;
  margin: 0;
  padding: 0;
}

VSCoceで保存時にフォーマットする

ここまでできたらいいですが、残念ながらうまく動いていないです。
調べてみると、拡張機能の vscode-stylelint を追加し、vscodeのsetting.json以下を書けばいいという記事はたくさんあるのですが、うまく動かないんですよね...。
vscode | editor.codeActionsOnSave

{
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true
  }
}

stylelint-plusという拡張機能を使えば保存時に自動フォーマットされましたが、できればStylelint公式の拡張機能だけで実現したいし、保存時の自動フォーマットはできればやりたいぐらいなので、保存自動フォーマットは現状は取り入れていないです。