【vscode】TypeScriptで不要なimport文を自動削除＆自動で並べ替え

はじめに

こんにちは！@nyakako13 です。

少し前からtypescript,reactの学習を進めています。

pythonでの開発時はblack formatterとiSortの拡張機能でimport文の自動並べ替えをしていました。

今回、typescriptの開発でも同じように自動でimport文の整理ができないかな？と思い調べてみました。

eslintやprettierでもplugin等で実現できるみたいですが、現在は一人での開発で、すべてのプロジェクトに適用したいので、とりあえず今回はvscodeの設定でやってみます。

vscodeの設定方法

vscodeのsetting.jsonを開きます

下記を追記します。

"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
	"source.organizeImports": "explicit"
}

設定後はファイル保存時に、自動で不要なimport文を削除＆import文の並べ替えをしてくれます！

古い記事だとexplicitのところがtrueになってたりするけど2023年11月のアプデでboolean型からenum型に変更されたようです。

特定の言語だけ適用したい場合

「typescriptだけにしたい」など、特定の言語だけに適用もできます。

"[typescript]": {
  "editor.codeActionsOnSave": {
    "source.organizeImports": explicit
  }
}

（補足）手動でimport文を並べ替えするショートカット

Option + Shift + o(オー)　※Mac
Alt + Shift + o(オー)　※Windows

感想

不要なimport文を手動で消すのが面倒になってきていたので、だいぶスッキリしました！

自動並べ替えも気持ちいい！（A型）

おわりに

よかったらX(@nyakako13)もフォローしてもらえると嬉しいです。

Qiita100投稿まで残り90！

未経験や浅経験、厳しいと言われている年代でエンジニアへの転職活動されている方、負けずにがんばりましょう！！

参考