VSCode拡張機能を入れすぎると起動が遅くなる問題
VSCodeは拡張機能を入れすぎると起動が遅くなったり、補完が遅延したりする問題が発生します。「とにかく人気のある拡張機能を全部入れる」という姿勢はNGです。本記事では現役エンジニアが実際に日常業務で使っている拡張機能のみを厳選して紹介します。
インストール前の基準:①毎日使うか?②なくてはならないか?③他の機能と重複していないか?この3つを満たすものだけをインストールする習慣をつけましょう。
コーディング効率化の必須拡張機能(10選)
1. GitHub Copilot:AIコード補完の定番。月$10で生産性が飛躍的に向上します。
2. Prettier - Code formatter:コードフォーマッターの王道。保存時に自動整形できます。チーム開発でのコードスタイル統一に必須。
3. ESLint:JavaScriptのリンター。コードの問題点を早期発見。TypeScript・Reactとの組み合わせで特に威力を発揮します。
4. Error Lens:エラー・警告をコード上にインライン表示。エラーコンソールとの行き来が不要になります。
5. Auto Rename Tag:HTMLタグの開きタグを変更すると閉じタグも自動変更。Reactでも有効で非常に便利。
6. Path Intellisense:ファイルパスの自動補完。importパスの入力が格段に楽になります。
7. Turbo Console Log:選択した変数名のconsole.logを自動生成(Ctrl+Alt+L)。デバッグが捗ります。
8. Multiple Cursors:複数箇所を同時編集(VSCode標準機能)。Alt+クリックで複数カーソル配置。
9. Todo Tree:コード内のTODO・FIXME・HACKコメントを一覧化。作業の抜け漏れを防ぎます。
10. GitLens:Git履歴・blame情報をコード上で確認。誰がいつ変更したかが一目でわかります。
言語・フレームワーク別おすすめ拡張機能(10選)
11. TypeScript Hero:TypeScriptのimport自動管理・整理。
12. Tailwind CSS IntelliSense:Tailwind CSSのクラス名補完・プレビュー。Tailwindを使う場合は必須。
13. Prisma:Prismaスキーマのシンタックスハイライト・補完。
14. Python (Microsoft):Pythonの公式拡張。補完・デバッガー・Jupyter Notebook統合。
15. Pylance:Pythonの高速な言語サーバー。型チェック・補完が高精度になります。
16. Docker:Dockerfile・docker-compose.ymlのシンタックスハイライトとコンテナ管理。
17. REST Client:VSCode内でHTTPリクエストを送信・レスポンスを確認。Postmanの代替。
18. Thunder Client:軽量なREST APIクライアント。
19. MySQL / PostgreSQL(拡張機能):VSCode内でDBに接続・クエリ実行。
20. YAML:YAMLのバリデーション・補完。k8s・CI/CDの設定ファイル編集に役立ちます。
見た目・操作感改善の拡張機能(10選)
21. One Dark Pro:人気No.1のカラーテーマ。目に優しく美しいダークテーマ。
22. Material Icon Theme:ファイルアイコンを分かりやすいMaterialアイコンに変更。ファイル種別が一目でわかります。
23. Bracket Pair Color DLW:対応する括弧を色で区別。ネストが深いコードの読みやすさが向上。
24. indent-rainbow:インデントを色で可視化。PythonやYAMLでの作業が楽になります。
25. Live Server:HTML/CSSの変更をブラウザにリアルタイム反映。フロントエンド学習の際に便利。
26. Peacock:複数のVSCodeウィンドウをカラー分け。プロジェクトの切り替えが視覚的に分かりやすくなります。
27. Project Manager:複数プロジェクトを簡単に切り替え。
28. Bookmarks:コードに「ブックマーク」を追加。頻繁に参照する箇所へ素早く移動できます。
29. Code Spell Checker:英語のスペルチェック。変数名・コメントのタイポを防ぎます。
30. Draw.io Integration:VSCode内でフローチャート・アーキテクチャ図を作成。