保存するたびにstylelint fixする方法

🎉追記：2020年3月7日

結構前ですが、こちらvscode-stylelint本家でautofixが追加されました🎉
https://github.com/stylelint/vscode-stylelint#editorcodeactionsonsave
ということで、vscodeを使われている方は↑のオプションを使ったほうが速いし軽いしので、これ使ったほうがいいと思います！！！
（on-change方法だとファイル増えたときが辛いので😭）

事の発端

vscode prettier stylelint autofix
でググったらよく出てくる

settings.json

{
  prettier.stylelintIntegration: true
}

が、VS Code Prettier v2でDEPRECATEDになっていた。
なんだかクリティカルなバグがあったっぽくてしかたないけど、それでも保存かけた時にESLint + Prettierのeslint.autoFixOnSaveと同じ様にstylelint fixしてほしいなぁと思ってた。

やり方

色々調べてて思いついたのが、onchnageを使ってwatchさせて置く方法。
そのままwatchしてもいいが、例えばNuxtプロジェクトと一緒に使うとこんな感じに使ってる。

bash

$ yarn add onchange npm-run-all -D
$ vim package.json

package.json

{
  scripts: {
    "dev": "run-p serve:dev watch:style",
    "serve:dev": "nuxt",
    "watch:style": "onchange 'app/**/*.{css,scss}' -- yarn stylelint"
  }
}

嫌なところ

onchangeで常に対象ファイルをwatchしないといけないことと（ファイル数増えたら重くなると思うし）、watch:styleコマンドを実行しておかないといけないこと。
あと、フォーマットかかったときも検知して、二回フォーマットかけてくるので、ちょっと嫌だなぁと。
eslint.autoFixOnSaveにまとまってほしい…

もっといい方法知ってる人いたら教えて下さい🙋‍♂️