2018/05/31(Thu) 時点の情報に基づいています
2019/09/10(Wed) 更新しました
Prettier と Stylelint を使って npm-scripts や gulp で、任意のコマンド実行時に css/scss ファイルをオートフォーマットするやり方はいろいろと見つけることができたのですが、やっぱりファイル保存時にやりたい！ということで方法を調べてみました。
1. VS Code の設定
まずは VS Code の設定を行います。この設定は一度だけ行えば後はする必要はありません。
1-1. prettier-vscode Extension のインストール
VS Code の Extension である prettier-vscode をインストールします。
1-2. VS Code の設定を変更
{
...
"editor.formatOnSave": true,
"prettier.stylelintIntegration": true,
...
}
を設定して、保存時にオートフォーマットされるようにします。ただし prettier の機能だけでは物足りないので stylelint と連携してより強力なオートフォーマットをかけます。
2019/09/10 追記
stylelintIntegration が deprecated になっています。まだ使用は可能ですが、いつまでサポートされるかは分かりませんので、別の手立てを考える必要があります。ただ残念なことに、今のところ、これは！といった代替手段が見つかっていません。
2. プロジェクトの設定
stylelint の機能を使用するためには、プロジェクト側にも設定が必要です。プロジェクトが複数ある場合はプロジェクト毎に行う必要があります。
2-1. prettier-stylelint パッケージのインストール
prettier-vscode と連携するために必要なパッケージです。
npm i prettier-stylelint -D
2-2. stylelint-config-rational-order パッケージのインストール
フォーマットをかけた時に、プロパティの並びもいい感じにソートして欲しいので、並び順に関するコンフィグファイルをインストールします。
prettier-stylelint の 使い方 を見ると stylelint-config-idiomatic-order が例として使われていますが、個人的には stylelint-config-rational-order の方がより細かくグルーピングされていて好きなのでこちらを使います。
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 を指定しています。
{
"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にするために以下を追加します。
{
...
"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.1 は prettier@1.12.1 を使っているので問題ないはずなのに、、という感じで手詰まり感があったのですが、ダメ元で一旦 prettier-vscode をアンインストールして再インストールしたら直りました。アンインストールした際に、念のため以下のフォルダも消しました。
/Users/{USER_NAME}/.vscode/extensions/esbenp.prettier-vscode-1.3.1
"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. 参考
大変勉強になりました。ありがとうございます。