「VSCodeの拡張機能、多すぎてどれを入れればいいか分からない」と悩んでいませんか？
現役WEBエンジニアとして、日々VSCodeを使い込んでいます。
この記事では、本当に使える拡張機能を厳選して紹介します。
目次
必須級の拡張機能
1. GitHub Copilot
AIコード補完の決定版
- コードを自動補完
- コメントからコード生成
- 月10ドル、学生は無料
2. ESLint
JavaScript/TypeScriptの静的解析
- コードの問題を自動検出
- チーム開発で必須
- 保存時に自動修正
3. Prettier
コードフォーマッター
- コードを自動整形
- チームでスタイル統一
- 保存時に自動実行
4. GitLens
Git操作を強化
- 各行の変更履歴表示
- blame情報を表示
- コミット履歴の可視化
言語別おすすめ
JavaScript/TypeScript
| 拡張機能 | 用途 |
|---|---|
| ESLint | 静的解析 |
| Prettier | フォーマット |
| Auto Rename Tag | タグ自動リネーム |
| Import Cost | インポートサイズ表示 |
Python
| 拡張機能 | 用途 |
|---|---|
| Python | 公式拡張 |
| Pylance | 高速な言語サポート |
| Black Formatter | フォーマット |
| Jupyter | ノートブック |
その他
| 拡張機能 | 用途 |
|---|---|
| Docker | Docker操作 |
| Remote – SSH | リモート開発 |
| Live Server | ローカルサーバー |
生産性向上系
5. Tabnine
AIコード補完（Copilot代替）
- ローカルでも動作
- プライバシー重視
- 無料プランあり
6. Path Intellisense
ファイルパス自動補完
- パス入力が楽に
- 相対パスも対応
7. Bracket Pair Colorizer
括弧を色分け
- 対応する括弧が分かりやすい
- ネストが深いコードに便利
8. Code Spell Checker
スペルチェック
- タイポを防ぐ
- 変数名のミス防止
見た目・テーマ系
9. Material Icon Theme
ファイルアイコンを美しく
- ファイル種類が一目で分かる
- 見た目がスッキリ
10. One Dark Pro
人気のダークテーマ
- 目に優しい
- シンタックスハイライトが見やすい
設定のコツ
settings.jsonの例
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
入れすぎ注意
- 拡張機能が多いと重くなる
- 使わないものは無効化
- 定期的に見直し
まとめ
VSCode拡張機能のポイント:
- Copilot + ESLint + Prettierは必須
- 言語に合った拡張を入れる
- 入れすぎに注意
- 定期的に見直す
