LoginSignup
3

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-09-04

🎉追記: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にまとまってほしい…

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
3