VSCodeのTypeScriptでImport文を保存時に自動ソートする設定

VSCode の TypeScript でコードを書いている時、手作業で Import 文をソートしていたのですが、さすがに面倒になってきたので自動ソートできないか調べてみたところ、できたので備忘録メモです。

macOS であれば Shift + cmd + p で VSCode のパレットを表示して、Open User Settings (JSON) を選択します。

すると settings.json ファイルが表示されるので、以下を追記して保存します。 なお、JSON 形式なのでカンマ(,)に注意して追加する必要があります。

  "[typescript]": {
      "editor.codeActionsOnSave": {
          "source.organizeImports": true
      }
  },
  "[typescriptreact]": {
      "editor.codeActionsOnSave": {
          "source.organizeImports": true
      }
  },
  "[javascript]": {
    "editor.codeActionsOnSave": {
      "source.organizeImports": true
    }
  }

この設定でファイル保存時に Import 文が自動でソートされるようになりました。

めっちゃ便利です。

参考サイト

• How to open Visual Studio Code's 'settings.json' file - Stack Overflow
• VS Code: Automatically Organize TypeScript Imports | Techiediaries