Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
3
Help us understand the problem. What is going on with this article?
@tk07Sky

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

More than 1 year has passed since last update.

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

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

3
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
3
Help us understand the problem. What is going on with this article?