VSCode 必須拡張機能とショートカット

Visual Studio Codeは現代の開発者に選ばれるエディタです。しかし多くの人はその機能の10%しか使っていません——適切に設定されたVSCodeは開発速度を3倍以上に向上させます。

🔥 Vibe Prompt

「VSCodeの最も重要な20のショートカットと15の必須拡張機能をリストアップし、フロントエンド＋Pythonフルスタック開発に最適化されたkeybindings.jsonとsettings.jsonをJSON形式で出力。」

必須拡張機能

🧠 AIアシスタント

| 拡張機能 | 機能 | |----------|------| | GitHub Copilot | AIコード補完、最強の生産性ツール | | Codeium | 無料代替、多言語サポート |

🐍 Python開発

| 拡張機能 | 機能 | |----------|------| | Python (Microsoft公式) | IntelliSense、デバッグ、テスト、コードナビゲーション | | Pylance | 超高速型チェックと自動補完 | | Python Docstring Generator | ドキュメンテーション文字列を自動生成 |

⚛️ フロントエンド開発

| 拡張機能 | 機能 | |----------|------| | ESLint | JS/TSコード品質チェック | | Prettier | 統一コードフォーマッター | | Tailwind CSS IntelliSense | Tailwindクラス自動補完 | | Auto Rename Tag | ペアタグの自動同期修正 |

🔧 汎用ツール

| 拡張機能 | 機能 | |----------|------| | GitLens | 強力なGit可視化ツール | | Error Lens | 行内エラー表示 | | Thunder Client | 軽量APIテストクライアント | | Material Icon Theme | ファイルアイコンを美化 | | One Dark Pro | クラシックなダークテーマ |

必須ショートカット

# 一般編集
⌘ + P          ファイル高速切り替え
⌘ + ⇧ + P     コマンドパレット
⌘ + D          次の同じ単語を選択
⌘ + ⇧ + L     すべての同じ単語を選択
⌘ + /          コメント/コメント解除
⌘ + ⌥ + ↓/↑   行を下/上にコピー
⌘ + ⇧ + K     行を削除

# マルチカーソル
⌥ + クリック      追加カーソル
⌥ + ⇧ + ドラッグ  矩形選択
⌘ + ⌥ + ↑/↓      上下にカーソル追加

# ナビゲーション
⌘ + B          サイドバー切替
⌘ + ⇧ + F     グローバル検索
F12             定義へ移動
⌘ + ⇧ + F12   すべての参照を表示

# 編集テクニック
⌘ + .          クイックフィックス
⌘ + ⇧ + R     リファクタリング
⌘ + [ / ]      インデント/アンインデント
⌘ + Enter      下に行を追加
⌘ + ⇧ + Enter 上に行を追加

最適 settings.json 設定

{
  "editor.fontSize": 14,
  "editor.fontFamily": "'Fira Code', 'JetBrains Mono', monospace",
  "editor.fontLigatures": true,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.minimap.enabled": true,
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": true,
  "editor.cursorBlinking": "smooth",
  "files.autoSave": "onFocusChange",
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "terminal.integrated.fontSize": 13,
  "terminal.integrated.cursorBlinking": true,
  "terminal.integrated.defaultProfile.osx": "zsh",
  "git.enableSmartCommit": true,
  "git.autofetch": true
}

実践練習

💡 Vibe Coding 練習：AIに依頼：

使用言語に合わせた最適なsettings.jsonを生成

便利なコードスニペットを作成（CRUD API、テストケース、コンポーネントテンプレート）

ワンクリックデバッグ設定

ESLint + Prettier自動修正の統合

美しいターミナル統合の設定