HoteKanの開発担当者です。
今回から開発に関するブログ記事を担当します！
便利なvscodeとprettier拡張機能
vs codeのprettier拡張機能は非常に便利です。
保存時やペースト時に勝手にformatしてくれるのでいろいろ考える必要がありません。
設定で"prettier.eslintIntegration": trueに設定すればprettierのあとにeslint --fixを適用してくれるのでさらに便利です。
vue-cliで作ったプロジェクトではうまく動かない
しかし上記の"prettier.eslintIntegration": true設定はvue-cliで作成したプロジェクトではうまく動作しません。
prettierだけかかって、eslint --fixが適用されていません。
これはローカルにあるbabel-eslintパーサーを拡張機能がうまく読みこめないせいです。 (version 1.8.0時点)
これは拡張機能のバグです。githubにコメントもしていますし、修正のためのPRを出している人もいますが、オープンイシューが235もある状態なのですぐには解消しないでしょう。（2019年7月2日時点）
この拡張機能がダメならEslint拡張機能を使って"eslint.autoFixOnSave": trueにしたり、veturをフォーマッターとして使う手もあります。
それでもprettierが使いたい
eslint拡張機能は保存時しか自動整形してくれません。やっぱり、貼り付け時やショートカットで気軽に整形したいのでフォーマッターが便利です。
veturはtemplate部にeslintによる整形が選べません。script部にはprettier-eslintが使えるのに、template部はprettierかprettyhtmlです。
それにgridsomeのpage-queryみたいな独自のタグ内は整形できません。
そこでprettierの公式が問題を修正してくれるまでは自分で修正して利用します。
prettier拡張機能を自分専用に修正して使う方法
- 公式リポジトリからプロジェクトをクローンします。
package.jsonのdependenciesにあるprettier-eslintのバージョンを9.0.0に変更- ついでに本家と区別するために拡張機能の名前
nameとかも変えておきましょう。 npm installすれば修正は完了です。デバッグで動作確認もできます。- vsceをインストールして、
vsce packageすれば.vsixができるので、拡張機能の「vsixからインストール」でvscodeにインストールできます。
vueファイルで使う場合の設定
ちなみにvueファイルで使うにはいくつかの設定が必要です。
下記を参考にしてください。
{
"editor.formatOnPaste": true,
"editor.formatOnSave": true,
"editor.formatOnType": true,
"prettier.disableLanguages": [], // デフォルトで無効にされているvueファイルを有効に
"prettier.eslintIntegration": true, // eslint --fixを有効に
"vetur.format.enable": false, // veturのフォーマットを無効に
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
// 自分専用に修正した場合はそのpublisherとname
},
}
