VSCode 完全チートシート

VSCode

Posted at 2025-04-12

基本操作
ショートカットキー
コマンドパレット
設定のカスタマイズ
ファイル操作
エディタ機能
検索と置換
マルチカーソル編集
ターミナル操作
Git連携
デバッグ機能
拡張機能管理
タスク実行
ワークスペース設定
便利な設定オプション
開発者向け高度な設定
AI機能と連携
トラブルシューティング

基本操作

VSCodeの起動方法

スタートメニューから:
スタートメニュー → Visual Studio Code

コマンドラインから:

code                    # VSCodeを起動
code path/to/folder     # 指定フォルダを開く
code -n                 # 新しいウィンドウで起動
code -r path/to/folder  # 現在のウィンドウで指定フォルダを開く
code -d file1 file2     # 差分比較モードで2つのファイルを開く

インターフェース要素

アクティビティバー: 左端の垂直バー（エクスプローラー、検索、Git等）
サイドバー: アクティビティバーで選択した機能のパネル
エディタグループ: ファイル編集領域
パネル: 下部のターミナル、出力、問題等の表示領域
ステータスバー: 最下部の情報表示領域

ショートカットキー

基本操作

操作	ショートカット
コマンドパレットを開く	`Ctrl+Shift+P` または `F1`
クイックオープン（ファイル検索）	`Ctrl+P`
設定を開く	`Ctrl+,`
キーボードショートカット一覧を開く	`Ctrl+K Ctrl+S`
サイドバーの表示/非表示	`Ctrl+B`
パネル（ターミナル等）の表示/非表示	`Ctrl+J`
Zen Mode（集中モード）切替	`Ctrl+K Z`
新規ファイル	`Ctrl+N`
ファイルを開く	`Ctrl+O`
ファイル保存	`Ctrl+S`
名前を付けて保存	`Ctrl+Shift+S`
すべて保存	`Ctrl+K S`
ファイルを閉じる	`Ctrl+W`
ウィンドウを閉じる	`Alt+F4`

編集操作

操作	ショートカット
元に戻す	`Ctrl+Z`
やり直し	`Ctrl+Y`
切り取り	`Ctrl+X`
コピー	`Ctrl+C`
貼り付け	`Ctrl+V`
行を複製	`Shift+Alt+↓` または `Shift+Alt+↑`
行を上/下に移動	`Alt+↑` または `Alt+↓`
行を削除	`Ctrl+Shift+K`
行にコメントを追加/削除	`Ctrl+/`
ブロックコメントの追加/削除	`Shift+Alt+A`
インデント増加	`Ctrl+]`
インデント減少	`Ctrl+[`
コード折りたたみ切替	`Ctrl+Shift+[` または `Ctrl+Shift+]`
すべてのコードの折りたたみ/展開	`Ctrl+K Ctrl+0` または `Ctrl+K Ctrl+J`

選択と移動

操作	ショートカット
単語単位で選択	`Ctrl+Shift+→` または `Ctrl+Shift+←`
行頭/行末に移動	`Home` または `End`
ファイルの先頭/末尾に移動	`Ctrl+Home` または `Ctrl+End`
行を選択	`Ctrl+L`
同じ単語をすべて選択	`Ctrl+Shift+L`
現在の単語の次の出現箇所を選択	`Ctrl+D`
カーソル位置を前/次に戻す	`Alt+←` または `Alt+→`
行にジャンプ	`Ctrl+G`

マルチカーソル

操作	ショートカット
マルチカーソルを追加（クリック）	`Alt+クリック`
上/下にカーソルを追加	`Ctrl+Alt+↑` または `Ctrl+Alt+↓`
選択中のテキストの出現箇所すべてにカーソルを追加	`Ctrl+Shift+L`
次の同じ単語にカーソルを追加	`Ctrl+D`
すべての同じ単語にカーソルを追加	`Ctrl+F2`

検索と置換

操作	ショートカット
検索	`Ctrl+F`
置換	`Ctrl+H`
次を検索	`F3`
前を検索	`Shift+F3`
ファイル内をすべて検索	`Ctrl+Shift+F`
ファイル内をすべて置換	`Ctrl+Shift+H`
選択テキストで検索	`Ctrl+F3`

表示

操作	ショートカット
拡大	`Ctrl++`
縮小	`Ctrl+-`
フォントサイズをリセット	`Ctrl+0`
エディタの分割	`Ctrl+\`
エディタグループ間の移動	`Ctrl+1`, `Ctrl+2`, ...
タブ間の移動	`Ctrl+Tab` または `Ctrl+Shift+Tab`
ファイルを新しいグループで開く	`Ctrl+K 右クリック`

ターミナル

操作	ショートカット
統合ターミナルを開く	Ctrl+`
新しいターミナルを作成	Ctrl+Shift+`
ターミナル間の切り替え	`Ctrl+PageUp` または `Ctrl+PageDown`
ターミナルの分割	`Ctrl+Shift+5`
ターミナルをクリア	`Ctrl+K`

デバッグ

操作	ショートカット
デバッグの開始/続行	`F5`
デバッグの停止	`Shift+F5`
ステップオーバー	`F10`
ステップイン	`F11`
ステップアウト	`Shift+F11`
ブレークポイントの切替	`F9`
条件付きブレークポイントの追加	`右クリック→ブレークポイントの追加`

Git操作

操作	ショートカット
Gitビューを表示	`Ctrl+Shift+G`
変更をステージ	`右クリック→変更をステージ`
コミット	`Ctrl+Enter` （コミットメッセージ入力後）
プッシュ	コマンドパレットから `Git: Push`
プル	コマンドパレットから `Git: Pull`

コマンドパレット

コマンドパレットを開く: Ctrl+Shift+P または F1

よく使うコマンド

>preferences: Open Settings (JSON) - settings.jsonを直接編集
>preferences: Open Settings (UI) - GUIで設定を編集
>preferences: Open Keyboard Shortcuts - キーボードショートカットの設定
>Developer: Reload Window - ウィンドウの再読み込み
>File: Open Recent - 最近使用したファイルを開く
>View: Toggle Terminal - ターミナルの表示/非表示
>Git: Clone - Gitリポジトリのクローン
>Extensions: Install Extensions - 拡張機能のインストール
>Tasks: Configure Task - タスクの設定
>Tasks: Run Task - タスクの実行
>Debug: Start Debugging - デバッグ開始
>Debug: Open launch.json - デバッグ設定ファイルを開く
>Workspaces: Save Workspace As... - ワークスペースの保存
>Format Document - ドキュメントのフォーマット
>Git: Commit - 変更をコミット
>Git: Push - 変更をプッシュ
>Terminal: Create New Terminal - 新しいターミナルを作成
>Code: About - VSCodeのバージョン情報

設定のカスタマイズ

設定を開く: Ctrl+,（GUIで編集）または >Preferences: Open Settings (JSON)（JSONで直接編集）

よく使う設定項目

{
  // エディタの外観
  "editor.fontSize": 14,
  "editor.fontFamily": "Source Code Pro, Consolas, 'Courier New', monospace",
  "editor.wordWrap": "on",
  "editor.lineNumbers": "on",
  "editor.minimap.enabled": true,
  "editor.cursorBlinking": "smooth",
  "editor.cursorStyle": "line",
  "editor.renderWhitespace": "boundary",
  "editor.rulers": [80, 120],
  
  // エディタの動作
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.detectIndentation": true,
  "editor.formatOnSave": true,
  "editor.formatOnPaste": false,
  "editor.suggestSelection": "first",
  "editor.acceptSuggestionOnEnter": "on",
  "editor.quickSuggestions": {
    "other": true,
    "comments": false,
    "strings": false
  },
  "editor.snippetSuggestions": "top",
  
  // ファイル設定
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,
  "files.exclude": {
    "**/.git": true,
    "**/.DS_Store": true,
    "**/node_modules": true
  },
  "files.eol": "\n",
  "files.encoding": "utf8",
  
  // ターミナル設定
  "terminal.integrated.defaultProfile.windows": "PowerShell",
  "terminal.integrated.fontSize": 14,
  "terminal.integrated.cursorBlinking": true,
  "terminal.integrated.cursorStyle": "line",
  
  // Git設定
  "git.enabled": true,
  "git.autofetch": true,
  "git.confirmSync": false,
  "git.enableSmartCommit": true,
  
  // 拡張機能の設定
  "extensions.ignoreRecommendations": false,
  
  // テーマ設定
  "workbench.colorTheme": "One Dark Pro",
  "workbench.iconTheme": "material-icon-theme",
  
  // 言語固有の設定
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[python]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "ms-python.python"
  }
}

ユーザースニペットの設定

コマンドパレットを開く (Ctrl+Shift+P)
>Preferences: Configure User Snippets を選択
言語を選択するか、グローバルスニペットファイルを選択
スニペットを編集

例: JavaScriptのReactコンポーネントスニペット

{
  "React Functional Component": {
    "prefix": "rfc",
    "body": [
      "import React from 'react';",
      "",
      "const ${1:ComponentName} = () => {",
      "  return (",
      "    <div>",
      "      $0",
      "    </div>",
      "  );",
      "};",
      "",
      "export default ${1:ComponentName};"
    ],
    "description": "React Functional Component"
  }
}

ファイル操作

エクスプローラーでの操作

ファイルの作成: エクスプローラーで右クリック→「新しいファイル」
フォルダの作成: エクスプローラーで右クリック→「新しいフォルダ」
ファイルの移動: ドラッグ&ドロップ
ファイルの削除: 選択→Deleteキー（または右クリック→「削除」）
ファイルの名前変更: 選択→F2キー（または右クリック→「名前の変更」）

エクスプローラーのフィルタリング

files.exclude 設定で特定のファイルパターンを非表示にできます:

"files.exclude": {
  "**/.git": true,
  "**/.svn": true,
  "**/.hg": true,
  "**/CVS": true,
  "**/.DS_Store": true,
  "**/node_modules": true,
  "**/*.pyc": true
}

エディタ機能

コード折りたたみ

領域を折りたたむ: Ctrl+Shift+[
領域を展開: Ctrl+Shift+]
すべて折りたたむ: Ctrl+K Ctrl+0
すべて展開: Ctrl+K Ctrl+J
特定のレベルで折りたたむ: Ctrl+K Ctrl+1〜Ctrl+K Ctrl+9

ミニマップ

ミニマップは右側に表示されるファイルの概要です。

"editor.minimap.enabled": true,
"editor.minimap.renderCharacters": false,
"editor.minimap.maxColumn": 120,
"editor.minimap.showSlider": "always"

定義へのジャンプと参照の検索

定義にジャンプ: F12
定義をピークする（ポップアップで表示）: Alt+F12
すべての参照を検索: Shift+F12
実装へジャンプ: Ctrl+F12
シンボルへジャンプ（ファイル内）: Ctrl+Shift+O
シンボルへジャンプ（ワークスペース内）: Ctrl+T

フォーマット

ドキュメントのフォーマット: Shift+Alt+F
選択範囲のフォーマット: 選択→Ctrl+K Ctrl+F
保存時に自動フォーマット:
```
"editor.formatOnSave": true
```

インテリセンス

提案の表示: Ctrl+Space
パラメータヒントの表示: Ctrl+Shift+Space
クイックフィックスの表示: Ctrl+.
リファクタリングの表示: Ctrl+Shift+R

検索と置換

基本検索

ファイル内検索: Ctrl+F
選択したテキストで検索: テキスト選択 → Ctrl+F
次を検索: F3
前を検索: Shift+F3

置換

ファイル内置換: Ctrl+H
すべて置換: Alt+Enter (置換ダイアログで)

高度な検索

正規表現の使用:

検索ボックスの左側にある .* ボタンをクリック

大文字と小文字を区別:

検索ボックスの左側にある Aa ボタンをクリック

完全一致:

検索ボックスの左側にある Ab| ボタンをクリック

ワークスペース内検索

ワークスペース内検索: Ctrl+Shift+F
ワークスペース内置換: Ctrl+Shift+H

検索結果のフィルタリング:

files to include: *.js,*.ts
files to exclude: *.min.js,node_modules/**

マルチカーソル編集

マルチカーソルの作成

クリックでカーソルを追加: Alt+クリック
上/下にカーソルを追加: Ctrl+Alt+↑ または Ctrl+Alt+↓
選択箇所すべてにカーソルを追加: Ctrl+Shift+L
次の一致箇所にカーソルを追加: Ctrl+D
現在の行の末尾にカーソルを追加: Shift+Alt+I

マルチカーソルの活用例

複数行の先頭に同じテキストを追加:
- Ctrl+Alt+↓ で複数行にカーソルを作成
- テキストを入力
複数行の末尾にセミコロンを追加:
- 複数行を選択
- Shift+Alt+I で各行の末尾にカーソルを作成
- ; を入力
複数箇所の同じ単語を一度に変更:
- 変更したい単語を選択
- Ctrl+D を押して次の同じ単語も選択（必要な回数だけ繰り返す）
- 新しいテキストを入力

ターミナル操作

基本操作

ターミナルを開く: Ctrl+`
新しいターミナルを作成: Ctrl+Shift+`
ターミナル間の切り替え: プルダウンメニューまたは Ctrl+PageUp/Ctrl+PageDown
ターミナルの分割: Ctrl+Shift+5
分割ターミナル間の移動: Alt+←/Alt+→

ターミナルのカスタマイズ

"terminal.integrated.defaultProfile.windows": "PowerShell",
"terminal.integrated.profiles.windows": {
  "PowerShell": {
    "source": "PowerShell",
    "icon": "terminal-powershell"
  },
  "Command Prompt": {
    "path": [
      "${env:windir}\\Sysnative\\cmd.exe",
      "${env:windir}\\System32\\cmd.exe"
    ],
    "args": [],
    "icon": "terminal-cmd"
  },
  "Git Bash": {
    "source": "Git Bash"
  },
  "WSL": {
    "source": "WSL"
  }
},
"terminal.integrated.fontSize": 14,
"terminal.integrated.fontFamily": "Cascadia Code, Consolas, 'Courier New', monospace",
"terminal.integrated.cursorBlinking": true,
"terminal.integrated.cursorStyle": "line",
"terminal.integrated.shellArgs.windows": []

タスクとしてコマンドを実行

.vscode/tasks.json ファイルを作成:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Echo Hello",
      "type": "shell",
      "command": "echo Hello from VS Code!",
      "problemMatcher": []
    }
  ]
}

タスクを実行: Ctrl+Shift+P → >Tasks: Run Task → タスクを選択

Git連携

基本Git操作

Gitビューを開く: Ctrl+Shift+G
変更をステージング: 変更ファイルの「+」をクリック
変更を元に戻す: 変更ファイルの「↺」をクリック
コミット: コミットメッセージを入力 → Ctrl+Enter
プッシュ: ステータスバーの雲アイコンをクリック、または ... → Push
プル: ステータスバーの雲アイコンをクリック、または ... → Pull
ブランチ作成: ステータスバーのブランチ名をクリック → + Create new branch...

Git設定

"git.enabled": true,
"git.path": "C:\\Program Files\\Git\\bin\\git.exe",
"git.autofetch": true,
"git.confirmSync": false,
"git.enableSmartCommit": true,
"git.openRepositoryInParent": true,
"git.inputValidation": "warn",
"git.decorations.enabled": true,
"git.ignoreWindowsGit27Warning": true

Gitグラフの表示

GitLensなどの拡張機能をインストールすると、Gitグラフが表示できます。

デバッグ機能

デバッグ設定

.vscode/launch.json ファイルを作成:
- F5 キーを押す、または
- コマンドパレットで >Debug: Open launch.json を実行

launch.json の設定例（Node.js）:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}/app.js"
    }
  ]
}

デバッグコントロール

デバッグ開始: F5
デバッグ停止: Shift+F5
ステップオーバー: F10
ステップイン: F11
ステップアウト: Shift+F11
続行: F5
再起動: Ctrl+Shift+F5

ブレークポイント

ブレークポイントの設定/解除: 行番号の左側をクリック、または F9
条件付きブレークポイント: 行番号の左側を右クリック → Add Conditional Breakpoint...
ログポイント: 行番号の左側を右クリック → Add Logpoint...
ブレークポイント一覧の表示: デバッグビューで「ブレークポイント」セクションを展開

拡張機能管理

拡張機能の操作

拡張機能ビューを開く: Ctrl+Shift+X
拡張機能の検索: 検索ボックスに入力
拡張機能のインストール: 「Install」ボタンをクリック
拡張機能の無効化: 「Disable」ボタンをクリック
拡張機能のアンインストール: 「Uninstall」ボタンをクリック
拡張機能の更新: 「Update」ボタンをクリック

拡張機能の設定

各拡張機能の設定は、設定ファイル（settings.json）で行います:

// ESLint設定
"eslint.validate": ["javascript", "typescript"],
"eslint.run": "onSave",

// Prettier設定
"prettier.singleQuote": true,
"prettier.semi": true,
"prettier.tabWidth": 2,
"prettier.printWidth": 100,

// Python設定
"python.linting.enabled": true,
"python.linting.pylintEnabled": true,
"python.formatting.provider": "black",

// GitLens設定
"gitlens.codeLens.enabled": true,
"gitlens.currentLine.enabled": true,
"gitlens.hovers.currentLine.over": "line"

タスク実行

タスクの設定

.vscode/tasks.json ファイルを作成:
- コマンドパレットで >Tasks: Configure Task を実行
- テンプレートを選択

tasks.json の設定例:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Build",
      "type": "shell",
      "command": "npm run build",
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "presentation": {
        "reveal": "always",
        "panel": "new"
      },
      "problemMatcher": ["$eslint-stylish"]
    },
    {
      "label": "Test",
      "type": "shell",
      "command": "npm test",
      "group": {
        "kind": "test",
        "isDefault": true
      }
    }
  ]
}

タスクの実行

タスクを実行: Ctrl+Shift+P → >Tasks: Run Task → タスクを選択
ビルドタスクを実行: Ctrl+Shift+B
タスクを終了: Ctrl+Shift+P → >Tasks: Terminate Task → タスクを選択

ワークスペース設定

ワークスペースの作成と管理

フォルダを開く: File → Open Folder...
ワークスペースとして保存: File → Save Workspace As...
ワークスペースを開く: File → Open Workspace...

ワークスペース固有の設定

ワークスペース設定ファイルを作成:
- .vscode/settings.json - ワークスペース全体の設定
- .vscode/launch.json - デバッグ設定
- .vscode/tasks.json - タスク設定
- .vscode/extensions.json - 推奨拡張機能

extensions.json の例:

{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "ms-python.python"
  ]
}

マルチルートワークスペース

ワークスペースを作成: File → Save Workspace As...
フォルダを追加: ワークスペースファイルを開いた状態で File → Add Folder to Workspace...

ワークスペースファイル（.code-workspace）の例:

{
  "folders": [
    {
      "path": "frontend"
    },
    {
      "path": "backend"
    },
    {
      "path": "docs"
    }
  ],
  "settings": {
    "editor.formatOnSave": true
  }
}

便利な設定オプション

エディタの外観

// テーマ設定
"workbench.colorTheme": "One Dark Pro",
"workbench.iconTheme": "material-icon-theme",
"workbench.tree.indent": 16,
"workbench.editor.enablePreview": false,

// エディタの見た目
"editor.fontSize": 14,
"editor.fontFamily": "Fira Code, Consolas, 'Courier New', monospace",
"editor.fontLigatures": true,
"editor.lineHeight": 24,
"editor.renderLineHighlight": "all",
"editor.guides.indentation": true,
"editor.bracketPairColorization.enabled": true,
"editor.matchBrackets": "always",
"editor.linkedEditing": true,
"editor.wordWrap": "on",
"editor.minimap.enabled": true,
"editor.scrollBeyondLastLine": false,
"editor.cursorBlinking": "smooth",
"editor.cursorSmoothCaretAnimation": true,
"editor.smoothScrolling": true,
"editor.rulers": [80, 120]

パフォーマンス最適化

"files.watcherExclude": {
  "**/.git/objects/**": true,
  "**/.git/subtree-cache/**": true,
  "**/node_modules/**": true,
  "**/.hg/store/**": true
},
"search.exclude": {
  "**/node_modules": true,
  "**/bower_components": true,
  "**/dist": true,
  "**/coverage": true
},
"files.exclude": {
  "**/.git": true,
  "**/.svn": true,
  "**/.DS_Store": true,
  "**/node_modules": true,
  "**/dist": true
}

エディタの動作

"editor.tabSize": 2,
"editor.insertSpaces": true,
"editor.detectIndentation": true,
"editor.formatOnSave": true,
"editor.formatOnPaste": false,
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true,
  "source.organizeImports": true
},
"editor.snippetSuggestions": "top",
"editor.suggestSelection": "first",
"editor.tabCompletion": "on",
"editor.wordBasedSuggestions": true,
"editor.acceptSuggestionOnEnter": "smart"

ファイル自動保存

"files.autoSave": "afterDelay",
"files.autoSaveDelay": 1000,
"files.trimTrailingWhitespace": true,
"files.insertFinalNewline": true,
"files.trimFinalNewlines": true

開発者向け高度な設定

settings.json の高度な設定

// LSP（言語サーバープロトコル）の設定
"typescript.tsserver.experimental.enableProjectDiagnostics": true,
"javascript.implicitProjectConfig.checkJs": true,
"typescript.updateImportsOnFileMove.enabled": "always",
"javascript.updateImportsOnFileMove.enabled": "always",

// デバッグ設定
"debug.allowBreakpointsEverywhere": true,
"debug.inlineValues": true,
"debug.toolBarLocation": "docked",
"debug.showInStatusBar": "always",

// ターミナル設定
"terminal.integrated.shellIntegration.enabled": true,
"terminal.integrated.defaultProfile.windows": "PowerShell",
"terminal.integrated.gpuAcceleration": "on",
"terminal.integrated.scrollback": 10000,

// 言語固有の設定
"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.suggestSelection": "recentlyUsedByPrefix"
},
"[typescript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.suggestSelection": "recentlyUsedByPrefix"
},
"[python]": {
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "ms-python.python",
  "editor.codeActionsOnSave": {
    "source.organizeImports": true
  }
},
"[html]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
},
"[css]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

launch.json の高度な設定例

Node.js アプリケーション

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}/src/index.js",
      "outFiles": ["${workspaceFolder}/dist/**/*.js"],
      "env": {
        "NODE_ENV": "development"
      },
      "console": "integratedTerminal",
      "sourceMaps": true
    },
    {
      "type": "node",
      "request": "attach",
      "name": "Attach to Process",
      "port": 9229,
      "restart": true,
      "sourceMaps": true
    }
  ]
}

ブラウザアプリケーション

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

Python アプリケーション

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Python: Current File",
      "type": "python",
      "request": "launch",
      "program": "${file}",
      "console": "integratedTerminal",
      "justMyCode": true
    },
    {
      "name": "Python: Django",
      "type": "python",
      "request": "launch",
      "program": "${workspaceFolder}/manage.py",
      "args": ["runserver"],
      "django": true,
      "justMyCode": true
    }
  ]
}

tasks.json の高度な設定例

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Build",
      "type": "shell",
      "command": "npm run build",
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "presentation": {
        "reveal": "always",
        "panel": "new",
        "focus": true,
        "clear": true
      },
      "problemMatcher": ["$tsc"],
      "options": {
        "cwd": "${workspaceFolder}"
      }
    },
    {
      "label": "Test",
      "type": "shell",
      "command": "npm test",
      "group": {
        "kind": "test",
        "isDefault": true
      },
      "presentation": {
        "reveal": "always",
        "panel": "dedicated",
        "focus": true
      },
      "problemMatcher": []
    },
    {
      "label": "Dev Server",
      "type": "shell",
      "command": "npm start",
      "isBackground": true,
      "problemMatcher": {
        "owner": "custom",
        "pattern": {
          "regexp": "."
        },
        "background": {
          "activeOnStart": true,
          "beginsPattern": "Starting development server",
          "endsPattern": "Compiled successfully"
        }
      },
      "presentation": {
        "reveal": "always",
        "panel": "dedicated"
      }
    }
  ]
}

キーバインドのカスタマイズ

keybindings.json ファイルの例:

[
  {
    "key": "ctrl+shift+/",
    "command": "editor.action.blockComment",
    "when": "editorTextFocus && !editorReadonly"
  },
  {
    "key": "alt+s",
    "command": "workbench.action.files.saveAll"
  },
  {
    "key": "ctrl+k ctrl+t",
    "command": "workbench.action.terminal.focus"
  },
  {
    "key": "ctrl+k ctrl+e",
    "command": "workbench.view.explorer"
  },
  {
    "key": "ctrl+k ctrl+g",
    "command": "workbench.view.scm"
  },
  {
    "key": "ctrl+`",
    "command": "workbench.action.terminal.toggleTerminal"
  },
  {
    "key": "ctrl+alt+p",
    "command": "workbench.action.togglePreview",
    "when": "editorFocus"
  }
]

AI機能と連携

GitHub Copilot

GitHub Copilotは、AIを活用したコーディング支援ツールです。

インストール:
- 拡張機能マーケットプレイスから「GitHub Copilot」をインストール
- GitHubアカウントでサインイン
基本的な使い方:
- コードを書き始めると、自動的に提案が表示される
- 提案を受け入れる: Tab
- 提案をスキップ: Esc
- 複数の提案を表示: Alt+] または Alt+[

コメントからコード生成:

// ユーザー入力を検証する関数を作成

Copilotのショートカット:
- Ctrl+Enter: Copilotの提案を表示
- Alt+\: インラインCopilotチャット

設定:

"github.copilot.enable": {
  "*": true,
  "plaintext": false,
  "markdown": false
},
"github.copilot.editor.enableAutoCompletions": true

その他のAI拡張機能

Tabnine:
- AIを活用したコード補完
- Tabnine拡張機能
Visual Studio IntelliCode:
- コンテキストに基づいたコード補完
- IntelliCode拡張機能
ChatGPT VSCode Extension:
- エディタ内からChatGPTにアクセス
- ChatGPT拡張機能

トラブルシューティング

一般的な問題と解決策

VSCodeが遅い/重い:
- 不要な拡張機能を無効化または削除
- "files.watcherExclude" で大きなフォルダを除外
- Node.jsモジュールやビルドフォルダを "search.exclude" に追加
- ワークスペースを小さく分割
拡張機能が動作しない:
- VSCodeを再起動: >Developer: Reload Window
- 拡張機能の設定を確認
- ログを確認: >Developer: Show Logs
インテリセンスが機能しない:
- 言語サービスが有効になっているか確認
- TypeScriptの場合、tsconfig.json を確認
- 拡張機能の更新を確認
デバッグができない:
- launch.json の設定を確認
- デバッグ用の拡張機能がインストールされているか確認
- パスやコマンドが正しいか確認

設定のリセット

ユーザー設定をリセット:
- %APPDATA%\Code\User\settings.json を削除または名前変更
拡張機能をリセット:
- %USERPROFILE%\.vscode\extensions を削除または名前変更
完全リセット:
- VSCodeをアンインストール
- %APPDATA%\Code と %USERPROFILE%\.vscode を削除
- VSCodeを再インストール

パフォーマンス向上のヒント

起動時間を短縮:
- 拡張機能の数を減らす
- 自動起動する拡張機能を制限
- "window.restoreWindows": "none" に設定

ファイル操作を高速化:

"files.watcherExclude": {
  "**/.git/objects/**": true,
  "**/.git/subtree-cache/**": true,
  "**/node_modules/**": true,
  "**/dist/**": true
}

検索を高速化:

"search.exclude": {
  "**/node_modules": true,
  "**/dist": true,
  "**/*.min.*": true
}

VSCodeのログを確認

コマンドパレットを開く (Ctrl+Shift+P)
>Developer: Show Logs を実行
ログの種類を選択

日本語入力の問題解決

IMEの切り替え問題:

"editor.autoClosingBrackets": "beforeWhitespace",
"editor.acceptSuggestionOnEnter": "off"

フォントの問題:

"editor.fontFamily": "'メイリオ', 'Meiryo', 'Consolas', 'Courier New', monospace"

参考リンク

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

VSCode 完全チートシート

目次

基本操作

VSCodeの起動方法

インターフェース要素

ショートカットキー

基本操作

編集操作

選択と移動

マルチカーソル

検索と置換

表示

ターミナル

デバッグ

Git操作

コマンドパレット

よく使うコマンド

設定のカスタマイズ

よく使う設定項目

ユーザースニペットの設定

ファイル操作

エクスプローラーでの操作

エクスプローラーのフィルタリング

エディタ機能

コード折りたたみ

ミニマップ

定義へのジャンプと参照の検索

フォーマット

インテリセンス

検索と置換

基本検索

置換

高度な検索

ワークスペース内検索

マルチカーソル編集

マルチカーソルの作成

マルチカーソルの活用例

ターミナル操作

基本操作

ターミナルのカスタマイズ

タスクとしてコマンドを実行

Git連携

基本Git操作

Git設定

Gitグラフの表示

デバッグ機能

デバッグ設定

デバッグコントロール

ブレークポイント

拡張機能管理

拡張機能の操作

おすすめの拡張機能

一般的な拡張機能

言語固有の拡張機能

拡張機能の設定

タスク実行

タスクの設定

タスクの実行

ワークスペース設定

ワークスペースの作成と管理

ワークスペース固有の設定

マルチルートワークスペース

便利な設定オプション

エディタの外観

パフォーマンス最適化

エディタの動作

ファイル自動保存

開発者向け高度な設定

settings.json の高度な設定

launch.json の高度な設定例

Node.js アプリケーション

ブラウザアプリケーション

Python アプリケーション

tasks.json の高度な設定例

キーバインドのカスタマイズ

AI機能と連携

GitHub Copilot

その他のAI拡張機能

トラブルシューティング

一般的な問題と解決策