Help us understand the problem. What is going on with this article?

VS Code で Prettier と Stylelint を連携して CSS/SCSS ファイル保存時にオートフォーマットをかける

2018/05/31(Thu) 時点の情報に基づいています
2019/09/10(Wed) 更新しました


PrettierStylelint を使って npm-scriptsgulp で、任意のコマンド実行時に css/scss ファイルをオートフォーマットするやり方はいろいろと見つけることができたのですが、やっぱりファイル保存時にやりたい!ということで方法を調べてみました。

1. VS Code の設定

まずは VS Code の設定を行います。この設定は一度だけ行えば後はする必要はありません。

1-1. prettier-vscode Extension のインストール

VS Code の Extension である prettier-vscode をインストールします。
image.png

1-2. VS Code の設定を変更

settings.json
{
  ...
  "editor.formatOnSave": true,
  "prettier.stylelintIntegration": true,
  ...
}

を設定して、保存時にオートフォーマットされるようにします。ただし prettier の機能だけでは物足りないので stylelint と連携してより強力なオートフォーマットをかけます。

2019/09/10 追記

stylelintIntegration が deprecated になっています。まだ使用は可能ですが、いつまでサポートされるかは分かりませんので、別の手立てを考える必要があります。ただ残念なことに、今のところ、これは!といった代替手段が見つかっていません。

2. プロジェクトの設定

stylelint の機能を使用するためには、プロジェクト側にも設定が必要です。プロジェクトが複数ある場合はプロジェクト毎に行う必要があります。

2-1. prettier-stylelint パッケージのインストール

prettier-vscode と連携するために必要なパッケージです。

terminal
npm i prettier-stylelint -D

2-2. stylelint-config-rational-order パッケージのインストール

フォーマットをかけた時に、プロパティの並びもいい感じにソートして欲しいので、並び順に関するコンフィグファイルをインストールします。
prettier-stylelint の 使い方 を見ると stylelint-config-idiomatic-order が例として使われていますが、個人的には stylelint-config-rational-order の方がより細かくグルーピングされていて好きなのでこちらを使います。

terminal
npm i stylelint-config-rational-order -D

2019/09/11追記

stylelint-config-recess-order も良いかも。

2-3. プロジェクトルートに .stylelintrc.json ファイルを作成

ほとんど prettier-stylelint の 使い方 と同じ構成ですが stylelint-config-idiomatic-order の代わりに stylelint-config-rational-order を指定しています。

.stylelintrc.json
{
  "extends": [
    "stylelint-config-rational-order",
    "./node_modules/prettier-stylelint/config.js"
  ],
  "rules": {
    "indentation": 4,
    "string-quotes": "single"
  }
}

以上で設定は終わりです。

3. 使ってみる

  • Command+S(Mac)
  • Ctrl+S(Win)
  • 右クリック > ドキュメントのフォーマット

などでオートフォーマットがかかるようになります。きちんと Lint も効いていて、問題パネルに結果も表示されます。

なぜか自分の環境では、一発目の Command+S / Ctrl+S でオートフォーマットがかからないことがありました。一旦 右クリック > ドキュメントのフォーマット をするとその後問題なくオートフォーマットしてくれるようになりました。

2019/09/10追記

stylelint Extension を入れておかないと問題パネルには表示されないことに今更ながら気づきました、すみません。stylelint を入れた場合、ビルトインの linter を OFFにするために以下を追加します。

settings.json
{
  ...
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false
  ...
}

4. トラブルシューティング

Couldn't resolve parser "postcss" エラーが出る

いろいろと試していた過程で、VS Code の出力パネルに

Couldn't resolve parser "postcss"

が出て scss ファイルがオートフォーマットできない事象に当たりました。

4-1. 原因

調べていくと prettier-atom に類似の Issue が上がっていました。
https://github.com/prettier/prettier-atom/issues/386
どうやら prettier 自体に問題があったようで、バージョンを 1.11.1 以上に上げれば解消するとのこと。
https://github.com/prettier/prettier/issues/4071#issuecomment-369411373

4-2. 対処

ただし、自分の場合はプロジェクトに prettier をインストールしているわけではなく VS Code 上で prettier-vscode を使っているのでこの対処方法ではダメでした。

最新バージョンの prettier-vscode@1.3.1prettier@1.12.1 を使っているので問題ないはずなのに、、という感じで手詰まり感があったのですが、ダメ元で一旦 prettier-vscode をアンインストールして再インストールしたら直りました。アンインストールした際に、念のため以下のフォルダも消しました。

Mac
/Users/{USER_NAME}/.vscode/extensions/esbenp.prettier-vscode-1.3.1
Win
"C:\Users\{USER_NAME}\.vscode\extensions\esbenp.prettier-vscode-1.3.1"

prettier-vscode 自体がアンインストールできないこともあります。自分の場合 Angular Essentials が依存していたためアンインストールに失敗していました。仕方なく Angular Essentials ごとアンインストールして再インストールしました。

4-3. 蛇足

prettier-stylelint にも自分と同じ事象に当たった人がいました。
https://github.com/hugomrdias/prettier-stylelint/issues/3

I'm seeing a 'Couldn't resolve parser "postcss"' message in VSCode's Output panel whenever I save a .scss file. Sounds like the same/similar issue running v0.4.2

prettier-stylelint をフォークした prettier-stylelint-formatter をインストールすれば解消するかも、とのことでしたが、自分の場合はやっても効果がありませんでした。

まずは prettier-vscode の再インストールを試してみるのが良さそうです。

5. 参考

大変勉強になりました。ありがとうございます。

Why do not you register as a user and use Qiita more conveniently?
  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
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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