VSCodeでTypeScript tsxをPrettierに認識させフォーマットさせる方法

セーブ時に自動でフォーマットしたい場合はVSCodeの左下の歯車(Manage)をクリックしSettingsからsaveで検索し「Editor: Format On Save」にチェック

Edit in settings.jsonをクリックしJSON内で"editor.formatOnSave"がtrueになっていること(以下)

"editor.formatOnSave": true

"[typescriptreact]"でPrettierでフォーマットするよう追加で設定を記述(以下)

"[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

セーブ時の自動フォーマットをグローバルで設定せず(最初のSettingsからsaveで検索し「Editor: Format On Save」にチェックをしない場合)TypeScriptのみ設定したい場合は以下

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