VS Codeでprettier拡張機能を使ってvueファイルをフォーマットする

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拡張機能を自分専用に修正して使う方法

  1. 公式リポジトリからプロジェクトをクローンします。
  2. package.jsonのdependenciesにあるprettier-eslintのバージョンを9.0.0に変更
  3. ついでに本家と区別するために拡張機能の名前nameとかも変えておきましょう。
  4. npm installすれば修正は完了です。デバッグで動作確認もできます。
  5. 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
  },
}

関連記事

  1. CSS/UIフレームワークに対応したAdobe XDのUIキット一覧

  2. Cloud BuildでのGitHub連携とファイルの暗号化・復号化

  3. firebase Javascript SDK をIE11対応にする

  4. webpackがモジュールのimportを解決する仕組み

  5. gitのclean filterとsmudge filterを使ったC…

  6. アプリ設計におけるUI検討の難しさとAdobe XD

PAGE TOP