VSCodeでTypeScript（tsx）をPrettierでフォーマットする設定

スポンサーリンク

VSCodeでTypeScriptのJSX（tsx）ファイルをPrettierで自動フォーマットするための設定をまとめます。

前提

  • VSCodeの拡張機能 Prettier - Code formatter（esbenp.prettier-vscode）をインストール済み

settings.json の設定

Cmd + Shift + P → Preferences: Open User Settings (JSON) で開きます。

tsx ファイルにPrettierを適用する

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

TypeScript（ts）にも適用する場合：

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

保存時に自動フォーマットする

全ファイルで有効にする

{
  "editor.formatOnSave": true
}

tsx だけ有効にする（グローバルはオフのまま）

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

まとめ（最終的な settings.json の例）

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

TypeScriptのバージョン確認方法については「TypeScript バージョン確認：tsc versionコマンドまとめ」を参照してください。

VSCodeのショートカットや設定まとめは「VSCode チートシート：よく使うショートカットと設定まとめ」も参考にしてください。