Help us understand the problem. What is going on with this article?

Visual Studio Codeチートシート

More than 3 years have 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 のプレビュー

buchiya4th
空前絶後の超絶怒涛のフロントエンドエンジニア。 フロントエンドを愛しフロントエンドに愛された男。 HTML、CSS、JavaScriptすべてのフロントエンドの産みの親。 フロントエンド界に舞い降りたキングオブ人見知り。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした