VSCodeでTypeScriptを書くときに役立った拡張機能まとめ

1~2週間ほどVSCodeでTypeScript（＋React）を書いていたので、その際に役に立った拡張機能をまとめ。

環境

• VSCode 1.31.0
• macOS 10.14.2

TypeScript Importer

• TypeScript Importer - Visual Studio Marketplace
• 未インポートのモジュールを利用してコードを書き始めると自動的にインポートの宣言文を挿入してくれる
  • ただし、たまに意図しない動作をしたり、あるいは動作を期待していたら動作しなかったりすることがある気がする
• VSCodeのコマンドパレットからAdd Importを実行すると、インポートするモジュールを選べる
  • 自分でインポートの宣言文を書く気にはなれないのでこれがけっこう便利

TypeScript Import Sorter

• TypeScript Import Sorter - Visual Studio Marketplace
• VSCodeのコマンドパレットからSort Importsを実行して、インポートの宣言文をソートできる
• 設定すればファイル保存時に自動的ソートすることもできて便利（"importSorter.generalConfiguration.sortOnBeforeSave": true）

Move TS

• Move TS - Move TypeScript files and update relative imports - Visual Studio Marketplace
• ファイルを移動した際に影響するインポート宣言文のファイルパスを自動的に書き換えてくれる
• 自分で定義したモジュールのインポート宣言文は相対パスで書く場合が多いと思うが、インポート対象として参照が多いファイルを移動したくなった際に手作業で書き換えるのは辛いので助かる
  • 書いていて気になったので調べたけど、そもそも絶対パスで記述するという手もあるみたい（絶対パスでモジュールをimportする - Qiita ）

Prettier

• Prettier - Code formatter - Visual Studio Marketplace
• コード整形。使ってみると、これなしの開発は考えられなくなる
• 自分は元々使っていて、TypeScriptファイル保存時にもPrettierが自動的に実行されるように設定した

ES7 React/Redux/GraphQL/React-Native snippets

• ES7 React/Redux/GraphQL/React-Native snippets - Visual Studio Marketplace
• .tsと.tsxファイルでも動作するスニペット集
• 拡張の名前にはReact/Redux/GraphQL/React-Nativeと様々なものが含まれているが、自分が使うのは単純なJavaScriptの構文がほとんど（全部覚えられない）
  • よく使うのはexp = export default moduleNameとかエクスポート宣言文系

その他

• lintについては、今後はTSLintではなくESLintがTypeScript対応を進めるという発表があり（ TypeScript Roadmap: January - June 2019 · Issue #29288 · Microsoft/TypeScript · GitHub）しばらくは手を出さなくていいかなと思ってる
• 自分は、ES5のコードベースでもPrettierを使うならESLintはno-unused-varとかno-unreachableぐらいで十分だと思っていて、TypeScriptについてはVSCodeが最低限の警告を出してくれる（no-unreachableは警告してくれないみたいだけど）のであまり困っていないというのもある

まとめ

• そういうわけでTypeScript書いていきましょう