自身の備忘録としておいておきます。

ここ最近GoやらPHPやらバックエンドが多くフロントエンドに触っていなかったので、久しぶりにVueをやろうとのことで、ずっとやってなかったVue3にようやく着手しました。
その時にformatterってどうやるんだっけ？？って思って遊んでたので書き残します。

Prettierとは

他にもPrettierについて説明されている方が多いと思うので、自分はさくっと記載します。

コード保存時、いい感じにコード成型してくれる便利なやつ。フロントをメインにいろんな言語に対応していて、優しい子。

導入のメリット

プロジェクトで定まったコーディングスタイルを定義できる
見た目がよくなる
個人的にストレス軽減する
- 特にGitレビュー時など。diffあるから何変えたんだろうと思ったらスタイル変わってただけだったみたいな

本題

なんでPrettier入れようと？

Vuetify3を導入していたんですが、「v-data-table-server使ったろ！とりま丸コピで持ってくりゃいいか」なんて考えて持ってきたところ、もともと前に適当にくっつけたformatterのせいで↓みたいになってました。

フォーマッタ前

<template>
  <v-data-table-server v-model:items-per-page="itemsPerPage" :headers="headers" :items="serverItems"
    :items-length="totalItems" :loading="loading" item-value="name" @update:options="loadItems"></v-data-table-server>
</template>

うーん、長い

多分以前まではめんどくさくなって途中でやめたんでしょうね。今回その代償を食らってる感じです。この機会にやっちゃいましょう。

ちなみにVuetifyドキュメントはこんな感じ↓↓

<template>
  <v-data-table-server
    v-model:items-per-page="itemsPerPage"
    :headers="headers"
    :items="serverItems"
    :items-length="totalItems"
    :loading="loading"
    item-value="name"
    @update:options="loadItems"
  ></v-data-table-server>
</template>

こんな風に自動でキレイにしたいなぁ、と。
そりゃ毎回手動で改行すればいいっちゃいいんですが、横着なもので楽したいんです。

prettierの導入

vscodeの拡張機能でprettierをinstallします。

ワークスペース上でnpm installします。

npm install --save-dev prettier

setting.jsonの設定

ワークスペース単位なので、.vscode配下にsetting.jsonを配置してそこでprettierの設定を有効にします。

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "prettier.printWidth": 80
}

これで自動成型してくれました。

おわり

私自身いろいろ設定いじっていたので、他の部分も影響してるかもですが、よければ参考程度に・・・。

おまけ

最近ようやくChat-GPT使い始めたのですが、想像以上でびびってます。今回のも全部ではないですが、少しChat-GPTで調べてます。

仕事取られないように頑張ります。