VSCodeとは
- Microsoftが開発した無料のコードエディタ
- 多くのプログラミング言語に対応
- 豊富な拡張機能で機能を拡張可能
- Windows、Mac、Linuxで利用可能
- Gitとの連携が簡単
📌 初心者におすすめの理由
軽量でありながら高機能。IntelliSenseによるコード補完や、デバッグ機能が標準搭載されており、初心者から上級者まで快適に使える環境です。
インターフェース
- アクティビティバー：ファイル、検索、Git、拡張機能など
- エクスプローラー：ファイルとフォルダの管理
- エディタ領域：コード編集の主要スペース
- ステータスバー：行番号、エンコード、言語モードなど
Git連携
- アクティビティバーのGitアイコンから操作
- 変更されたファイルがハイライト表示
- コミット、プッシュ、プルなどの基本操作
- 変更履歴の確認が容易
💡 Tip
ステータスバーに現在のブランチ名が表示され、クリックするとブランチ操作メニューが開きます。
必須ショートカット
📝 基本編集
Ctrl+S
保存
Ctrl+Z
元に戻す
Ctrl+Y
やり直し
Ctrl+C/X/V
コピー/切取/貼付
Ctrl+/
コメントアウト
🔍 検索・移動
Ctrl+F
検索
Ctrl+H
置換
Ctrl+G
行へ移動
Ctrl+P
ファイル検索
F12
定義へ移動
🪄 便利な機能
Ctrl+Space
コード補完
Alt+↑/↓
行の移動
Ctrl+`
ターミナル表示
Ctrl+B
サイドバー表示切替
おすすめ拡張機能
Japanese Language Pack
VSCodeを日本語化する拡張機能。メニューやダイアログが日本語になります。
Prettier
コードを自動的にフォーマットしてくれる拡張機能。保存時に整形するよう設定可能。
Live Server
HTMLファイルをブラウザで即時プレビューできるローカルサーバーを提供。
ESLint
JavaScriptのコード品質をチェックし、問題を早期に発見できます。
初期設定のカスタマイズ
- ファイル > 基本設定 > 設定から変更可能
- 検索ボックスで設定名を検索できる
- ユーザー設定とワークスペース設定がある
- JSONで直接編集も可能
🛠️ おすすめ設定
- Auto Save：ファイルの自動保存
- Font Size：フォントサイズの変更
- Tab Size：インデントのスペース数
- Word Wrap：長い行の折り返し
- Color Theme：カラーテーマの変更
便利な使い方とヒント
- マルチカーソル編集：Alt+クリックで複数箇所を同時編集
- スニペット：よく使うコードテンプレートを登録・呼び出し
- エミュレータ切替：右下の言語モードをクリックして変更
- 分割エディタ：エディタを右クリックして「分割」を選択
- ピーク定義：Alt+F12で定義をポップアップ表示
💡 便利機能
コマンドパレット（Ctrl+Shift+P）を使えば、ほぼすべての機能にキーボードからアクセス可能です。覚えるべき最重要ショートカットの一つです。
⚠️ よくあるトラブル
拡張機能の競合で動作が遅くなる場合は、使っていない拡張機能を無効化してみましょう。また、大きなプロジェクトではワークスペースごとに必要な拡張機能だけを有効にすると効率的です。