【VSCode拡張機能】TypeScript Import Sorterの使い方

TypeScript Import Sorterの使い方

目次

• はじめに
• 使い方
  • 【手動】 ファイル単体をソートする
  • 【手動】 フォルダを指定し、内部の対象ファイルをソートする
  • 【自動】 保存時にソートするようにsetting.jsonに設定を保存する

はじめに

こちらの記事は、VSCodeの拡張機能TypeScript Import Sorterの使い方を説明したものになります。
詳しくは下記サイトを参照してください
TypeScript Import Sorter

使い方

下記の方法があります

• 【手動】 ファイル単体をソートする
• 【手動】 フォルダを指定し、内部の対象ファイルをソートする
• 【自動】 保存時にソートするようにsetting.jsonに設定を保存する

【手動】 ファイル単体をソートする

1. 対象のファイルをVSCodeで開く
2. VSCodeのコマンドパレットを開く
3. TSI: Sort Importsを選択
4. 選択中のファイルがソートされる

【手動】 フォルダを指定し、内部の対象ファイルをソートする

1. サイドメニューにて対象のフォルダを右クリック
2. Sort Imports (Directory deep)を選択

※ フォルダ内にサブモジュールファイルなどがあるとそちらもソートしてしまうので注意！

【自動】 保存時にソートするようにsetting.jsonに設定を保存する

1. VSCodeのコマンドパレットを開く
2. 基本設定: 設定(JSON)を開くと入力しsetting.jsonを開く
3. 下記をsetting.jsonに記載し保存する

{
  // ...その他拡張機能
  // TypeScriptインポートソーターの自動ソート
  "importSorter.generalConfiguration.sortOnBeforeSave": true
}

1. VSCodeを再起動する
2. 対象のファイルを保存しソートできていることを確認する