Edited at

Visual Studio Codeチートシート

More than 1 year has passed since last update.

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)

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


拡張機能

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


  1. 拡張機能画面を表示(Ctrl + Shift + X)

  2. 検索窓で検索

  3. インストールしたい拡張機能の「インストール」ボタンをクリック

  4. インストール後、「再度読み込む」ボタンをクリック


Trailing Spaces

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

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


EvilInspector

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

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


Auto Complete Tag

Auto Rename TagAuto 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

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


初期設定


  1. file-iconsをインストール

  2. コマンドパレットの表示(Ctrl + Shift + P)

  3. 「file icon」を入力

  4. 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

プロジェクト管理


初期設定


  1. Project Managerをインストール


使い方


  1. コマンドパレットの表示(Ctrl + Shift + P)

  2. 「project manager」を入力中に候補が表示される

  3. 矢印キーでおこないたいものまで移動し実行する

コマンド
内容

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
現在のプロジェクトをマネージャに保存

ドキュメント:Project Manager - Visual Studio Marketplace


Git History

ツリー表示や差分表示など履歴をわかりやすく表示してくれる。


コマンドパレット

>git log


Git History (git log) - Visual Studio Marketplace


Settings Sync

PC間でVS Codeの設定を同期

※GitHubアカウントが必要


同期される設定


  • ユーザー設定(settings.jsonファイル)

  • キーバインディング設定(keybindings.jsonファイル)

  • 起動設定(launch.jsonファイル)

  • ロケール設定(locale.jsonファイル)

  • スニペット

  • 拡張機能


初期設定


  1. Project Managerをインストール

  2. GitHub上で【Settings】 > 【Personal Access Tokens】 > 【Generate New Token】と遷移する

  3. 【Token description】に説明文を入力し、【git】をチェックし、【Generate token】ボタンをクリック

  4. トークンの文字列をコピー

  5. Shift + Alt + Uを押すと、githubアカウントのアクセストークンが尋ねられるのでトークンを貼り付ける

  6. Gistへ初回のアップロードがおこなわれる

Settings Sync - Visual Studio Marketplace


Markdown

Markdownのファイルを開いているときに、command+shift+VでMarkdownのプレビュー表示


参考

Visual Studio Code早分かりガイド

VSCodeの拡張機能 おすすめ

Visual Studio Code を使って Markdown のプレビュー