今回は備忘的にTypescriptを使った開発環境で自分がよく使っているVSCodeの拡張機能を紹介していきます。
導入すべき機能はレベル別に紹介していきます。
必須レベル
| 拡張機能名 | 概要 |
|---|---|
| Prettier | コードのスタイルを整えるコードフォーマッター |
| ESLint | 静的コード解析ツール |
| Typescript importer | import分を補完、挿入する補助機能 |
1. Prettier
2. ESLint
どちらもコードスタイルを統一するために必須の拡張機能です。VSCode上でリアルタイムに警告やエラーを表示してくれるので、品質向上に大きく貢献します。
-
拡張名:
dbaeumer.vscode-eslint -
おすすめ設定:
"eslint.validate": ["javascript", "typescript"]
3. Typescript importer
import文は必ず使用するので入れておきたい拡張機能です。
おすすめレベル
| 拡張機能名 | 概要 |
|---|---|
| Material Icon Theme | エクスプローラーにファイル種別ごとにアイコンを表示 |
| AWS Toolkit | AWSリソースを開発・デバッグできる公式ツール |
| Error Lens | エラー表示を目立たせて視認性を向上 |
| Rainbow CSV | CSVの各列を色分けして見やすく表示 |
4. Material Icon Theme
エクスプローラーのファイルツリーにファイル種別ごとにカラフルなアイコンを表示してくれます。
ツリーがとても見やすくなるのでおすすめです。VSCodeで開発する時は必ず入れている拡張機能です。
もちろんこれがなくても開発には全く支障はないです。
5. AWS Toolkit
AWS環境をローカルから操作できる公式ツール。Lambdaのテスト、CloudWatch Logsの確認、S3バケットの操作など、わざわざコンソールにアクセスせずにVSCode内で完結できます。
- AWSのアカウント
- 各言語のSDK
- AWS SAM CLI
を必要に応じてインストールしておいてください
6. Error Lens
Error Lensを導入すると、エラーが発生している箇所を標準機能に加えてさらに目立つようにしてくれます。
- エラーや警告を太文字で行内にメッセージ表示
- ツールチップ不要
7. Rainbow CSV
何かとCSVを取り扱うことは多いのでその場合に役立つ拡張機能です。
この拡張機能を入れると以下のように列がカラフルになり見やすくなります。
趣味レベル
ここからは趣味で入れてるレベルです。
| 拡張機能名 | 概要 |
|---|---|
| Dracula Theme Official | ゴシック調?のVScodeテーマ設定ができる |
Dracula Theme Official
VScodeのテーマを黒&紫のホラーテイスト(?)にしてくれる拡張機能です。
コードがピンクと緑調になって割と見やすいので入れています。
今回は自分のTypescript開発環境のVSCodeの拡張機能をレベル別に紹介しました。
趣味レベルをもう少し増やしたい。。。