【自動フォーマット】新プロジェクトにPrettier導入

経緯

今の会社にエンジニアはベテランプログラマー(44歳)と自分しかいない。
ベテランプログラマーは田中要次に雰囲気が似ているので、以下「田中さん」と呼ぶことにする。
フルリモートなので社員の皆さまと会ったことがない。
2人しか実装する人はいないが、チームワークが非常に重要である。

そんな中、入社2週間目にも関わらず、既存アプリの一部機能移植だから大丈夫であろう、
と2月リリースの新プロジェクトを任された。
某餃子チェーン店のテーブルに設置される、タブレットでお客さんがオーダーする為のアプリである。

一応聞いてみたところ、田中さんはVS Code使いだが、フォーマッター含め拡張機能は使用していない、とのこと。
ハードボイルドである。

なので、新規アプリ作成に伴い 勝手に Prettierを導入した。
非常に快適になったため、田中さんも喜んでくれることだろう。

導入方法

インストール

yarn add --dev --exact prettier

ファイル作成

ディレクトリ直下＞.prettierrc

{
    "editor.formatOnSave": true,
    printWidth: 120, //折返す文字数
    tabWidth : 2,
    "trailingComma": "es5",
}

ファイル作成

ディレクトリ直下＞.vscode＞setting.json

{
  "editor.formatOnType": true, 
  "editor.formatOnPaste": true, 
  "editor.formatOnSave": true, 
  "editor.dragAndDrop": false, // 保存時に行の終端に存在する空白文字を削除する
  "files.insertFinalNewline": false, // 保存時にファイルの最後に存在する空行を削除する
}

ディレクトリ直下＞.vscode＞extensions.json  
これによってVScode起動時にはポップアップでインストールするようメッセージが出る。
{
  "recommendations": [
    "esbenp.prettier-vscode"//チームメンバーに入れてほしい拡張機能
  ]
}

yarn run formatでフォーマットしてくれるコマンドを追加

package.json

  "scripts": {
    略
    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,css}\""
  },