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. アプリ設計におけるUI検討の難しさとAdobe XD

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

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

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

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

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

最近のBLOG

  1. 2022.01.24

    脳疲労
  2. 2022.01.17

    血流
  3. 2022.01.13

    不惑
  4. 2022.01.5

    笑顔
  5. 2021.12.27

    降雪
PAGE TOP