CSS
scss
VSCode
stylelint
prettier

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

2018/05/31(Thu) 時点の情報に基づいています


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 と連携してより強力なオートフォーマットをかけます。

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

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 でオートフォーマットがかからないことがありました。一旦 右クリック > ドキュメントのフォーマット をするとその後問題なくオートフォーマットしてくれるようになりました。

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. 参考

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