VSCode
VisualStudioCode

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 のプレビュー