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. 参考
大変勉強になりました。ありがとうございます。