More than 5 years have passed since last update.

Visual Studio Codeチートシート

Last updated at 2017-05-03Posted at 2017-05-03

Visual Studio Codeに乗り換える時に便利な情報をまとめました。（Visual Studio Codeって？という人はページの一番下に参考URLを掲載しているのでそちらを読んでみてください。）
Visual Studio Codeは多機能でショートカットを駆使すれば効率化できそうです。

バージョン（執筆時）

Win：1.11.2
Mac：1.11.2

※日々アップデートされているので情報が古くなっていく可能性があります。

表示

サイドバー

画面左部に表示されるもの

内容	ショートカット
エクスプローラー（Explorer）	【Win】Ctrl + Shift + E 【Mac】Command + Shift + E
検索（Find）	【Win】Ctrl + Shift + F 【Mac】Command + Shift + F
ソース管理（Git）	【Win】Ctrl + Shift + G 【Mac】Control + Shift + G
デバッグ（Debug）	【Win】Ctrl + Shift + D 【Mac】Command + Shift + D
拡張機能（eXtension）	【Win】Ctrl + Shift + X 【Mac】Command + Shift + X

クイックオープンとコマンドパレット

画面上部に表示されるもの

内容	ショートカット
クイックオープンウィンドウ	【Win】Ctrl + P 【Mac】Command + P
コマンドパレット	【Win】Ctrl + Shift + P or F1 【Mac】Command + Shift + P or F1

パネル

画面下部に表示されるもの

内容	ショートカット
問題	【Win】Ctrl + Shift + M 【Mac】Command + Shift + M
出力	【Win】Ctrl + Shift + U 【Mac】Command + Shift + U
デバッグコンソール	【Win】Ctrl + Shift + Y 【Mac】Command + Shift + Y
端末（統合ターミナル）	【Win】Ctrl + @ 【Mac】Control + Shift + @

ユーザー設定／ワークスペース設定

【ファイル】＞【基本設定】＞【設定】

分類	内容
ユーザー設定	VS Codeの初期設定
ワークスペース設定	フォルダごとの固有な設定

ユーザー設定

{
    "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
    // 自動保存
    "files.autoSave": "afterDelay",
    // ミニマップ表示
    "editor.minimap.enabled": true,
    // ファイルオープン時のエンコードの自動判別
    "files.autoGuessEncoding": true,
    // タブサイズ
    "editor.tabSize": 2,
    // アクティビティバー表示
    "workbench.activityBar.visible": true,
    // フォントサイズ
    "editor.fontSize": 12,
    // 空白文字の可視化
    "editor.renderWhitespace": "all",
    // Ctrl + マウスホイールでのズーム操作
    "editor.mouseWheelZoom": true,
    "workbench.iconTheme": "file-icons",
    // インデントのガイド表示
    "editor.renderIndentGuides": true,
    // 行末のスペースを削除
    "files.trimTrailingWhitespace": true
}

キーボードショートカット

【ファイル】＞【基本設定】＞【キーボードショートカット】
keybindings.jsonをクリック

EmmetをCtrl+Eで反応させたい場合

keybindings.json

[
  {
    "key": "ctrl+e",
    "command": "-workbench.action.quickOpenNavigateNext",
    "when": "inQuickOpen"
  },
  {
    "command": "editor.emmet.action.expandAbbreviation",
    "key": "ctrl+e",
    "when": "config.emmet.triggerExpansionOnTab && editorTextFocus && !editorHasMultipleSelections && !editorHasSelection && !editorReadonly && !editorTabMovesFocus"
  }
]

Sublime Text, Atomとの違い

内容	ショートカット
選択文字と同じ文字を全選択	Ctrl + F2（ST:Alt + F3）

※他のエディタのキーボード設定に変更できる拡張機能があるようです。

拡張機能

拡張機能のインストール方法

拡張機能画面を表示（Ctrl + Shift + X）
検索窓で検索
インストールしたい拡張機能の「インストール」ボタンをクリック
インストール後、「再度読み込む」ボタンをクリック

Trailing Spaces

行末の半角スペースの強調、削除

ドキュメント：Trailing Spaces - Visual Studio Marketplace

EvilInspector

行末の全角スペースの強調

ドキュメント：EvilInspector - Visual Studio Marketplace

Auto Complete Tag

Auto Rename TagとAuto Close Tagを含んだ拡張

Auto Complete Tag - Visual Studio Marketplace

CSS Peek

HTMLのclass, idから元のCSSを確認・編集できる。

内容	ショートカット
Peek：cssファイルをインラインで読み込んですぐにすばやく編集。	Ctrl+Shift+F12
Go To：cssファイルに直接ジャンプするか、新しいエディタで開く	F12
Hover：シンボルの上にカーソルを置いて定義を表示する	Ctrl+hover

CSS Peek - Visual Studio Marketplace

File Peek

TypescriptおよびJavascriptコードの編集を拡張。

内容	ショートカット
Peek：ファイルをオンラインで読み込んですぐにすばやく編集	Ctrl+Shift+F12
Go To：直接ファイルにジャンプするか、新しいエディタで開く	F12
Hover：シンボルの上にカーソルを置いて定義を表示	Ctrl+hover

File Peek - Visual Studio Marketplace

file-icons

ファイルのアイコンを表示

初期設定

file-iconsをインストール
コマンドパレットの表示（Ctrl + Shift + P）
「file icon」を入力
File Iconsを選択

Markdown All in One

Markdown（キーボードショートカット、目次、自動プレビューなど）に必要なものすべて。

らしい。
リストの行末で改行したら自動で* ついたので便利。

Markdown All in One - Visual Studio Marketplace

Markdown Checkbox

MarkdownでTODOリストを作成する時に便利。

内容	ショートカット
チェックボックス付きリストの作成	ctrl + shift + c
チェックのオン・オフ切替	ctrl + shift + enter

Markdown Checkbox - Visual Studio Marketplace

Project Manager

プロジェクト管理

初期設定

Project Managerをインストール

使い方

コマンドパレットの表示（Ctrl + Shift + P）
「project manager」を入力中に候補が表示される
矢印キーでおこないたいものまで移動し実行する

コマンド	内容
Project Manager: Edit Project	projects.jsonの編集
Project Manager: List Projects to Open	保存されているプロジェクトを開く
Project Manager: List Projects to Open in New Window	保存されているプロジェクトを新規ウィンドウで開く
Project Manager: Refresh Projects	キャッシュされたプロジェクトを更新する（VSCode、Git、SVN）
Project Manager: Save Project	現在のプロジェクトをマネージャに保存