← マニュアル一覧に戻る
ソフトウェア

VSCode 基本操作マニュアル

Visual Studio Codeのインストール、日本語化、ショートカット、拡張機能のクイックリファレンス。

VSCode 基本操作マニュアル

インストール

Windows

  1. VSCode公式サイトにアクセス
  2. 「Download for Windows」をクリック
  3. ダウンロードされた.exeファイルを実行
  4. セットアップウィザードで「次へ」
  5. 追加タスクの選択で以下にチェック：
    • ☑ デスクトップ上にアイコンを作成する
    • ☑ エクスプローラーのコンテキストメニューに [Code で開く] を追加
    • ☑ サポートされているファイルの種類のエディターとして登録
  6. 「インストール」→「完了」

Mac

  1. VSCode公式サイトにアクセス
  2. 「Download for Mac」をクリック
  3. ダウンロードされた.zipを解凍
  4. Visual Studio Code.appを「アプリケーション」フォルダにドラッグ
  5. Launchpadから起動

⚠️ 初回起動時に「開発元を確認できない」と表示された場合：右クリック →「開く」で起動

日本語化

  1. VSCodeを起動
  2. Ctrl + Shift + X（Mac: ⌘ + Shift + X）で拡張機能を開く
  3. 「Japanese」と検索
  4. 「Japanese Language Pack for Visual Studio Code」をインストール
  5. 右下の「Change Language and Restart」をクリック

画面構成

要素説明
メニューバーファイル、編集、表示などの基本メニュー
アクティビティバー左端の縦長バー。エクスプローラー、検索、Git、拡張機能
サイドバーアクティビティバーで選択した内容を表示
エディタエリアコードを書く場所。タブで複数ファイル表示
パネルターミナル、出力、問題などを表示
ステータスバー行番号、文字コード、Git情報など

VSCode画面構成

ショートカットキー

基本操作

機能WindowsMac
コマンドパレットCtrl + Shift + P⌘ + Shift + P
ファイルを開くCtrl + O⌘ + O
新しいファイルCtrl + N⌘ + N
保存Ctrl + S⌘ + S
すべて保存Ctrl + K S⌘ + K S
閉じるCtrl + W⌘ + W

表示切り替え

機能WindowsMac
サイドバー表示切替Ctrl + B⌘ + B
パネル表示切替Ctrl + J⌘ + J
ターミナル表示切替Ctrl + @⌃ + @

編集操作

機能WindowsMac
行のコピーShift + Alt + ↓Shift + Option + ↓
行の移動Alt + ↑/↓Option + ↑/↓
複数行選択Ctrl + Alt + ↑/↓⌘ + Option + ↑/↓
コメント切替Ctrl + /⌘ + /

おすすめ拡張機能

拡張機能名用途発行元ID
Prettierコード自動整形esbenp.prettier-vscode
Live ServerHTMLライブプレビューritwickdey.LiveServer
Markdown All in OneMarkdown記法サポートyzhang.markdown-all-in-one
Auto Rename TagHTMLタグ自動ペア編集formulahendry.auto-rename-tag
Code Spell Checkerスペルチェックstreetsidesoftware.code-spell-checker
GitLensGit機能強化eamodio.gitlens
indent-rainbowインデント色分けoderwat.indent-rainbow

⚠️ セキュリティ注意

拡張機能をインストールする際は必ず確認：

確認項目詳細
発行元ID（最重要）上記の正しい発行元IDを確認
ダウンロード数数百万以上が目安
レビュー高評価が多数あるか
最終更新日定期的に更新されているか

実践：HTMLファイル作成

Step 1：フォルダを開く

「ファイル」→「フォルダを開く」で作業フォルダを選択

Step 2：新しいファイル作成

エクスプローラーで「新しいファイル」→ index.html と入力

Step 3：コード入力

! と入力して Tab キーを押すとHTMLテンプレートが自動生成（Emmet機能）

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>タイトル</title>
  </head>
  <body>
    <h1>見出し</h1>
    <p>本文</p>
  </body>
</html>

Step 4：保存とプレビュー

  • 保存：Ctrl + S（Mac: ⌘ + S）
  • Live Server：右クリック →「Open with Live Server」

実践：Markdownファイル作成

ファイル作成

article.md という名前で新規ファイル作成

プレビュー表示

操作WindowsMac
プレビュー表示Ctrl + Shift + V⌘ + Shift + V
横並びプレビューCtrl + K V⌘ + K V

トラブルシューティング

トラブル解決手順
日本語入力がおかしい設定（Ctrl + ,）→「ime」で検索 →「Render Control Characters」をオフ
動作が重い不要な拡張機能を無効化。「Developer: Reload Window」を実行
起動しない拡張機能を無効化。設定ファイルをリセット。再インストール

AI統合：GitHub Copilot

機能説明
コード補完入力中のコードから次を予測・提案
Next Edit Suggestions次に編集したい場所を予測
Agent Modeタスクを委任してAIが自動実行
チャット機能コードの説明や質問に回答

料金：月額10ドル（学生・教育関係者は無料）

参考リンク

マニュアル一覧に戻る