Visual Studio Codeチートシート

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

## バージョン（執筆時）
Win：1.11.2
Mac：1.11.2

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


## 表示

### サイドバー

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

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

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

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

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

### パネル

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

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


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

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

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

### ユーザー設定

```js:ユーザー設定
{
    "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で反応させたい場合

```json: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](https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces)

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

ドキュメント：[EvilInspector - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=saikou9901.evilinspector)

### Auto Complete Tag

[Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)と[Auto Close Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag)を含んだ拡張

[Auto Complete Tag - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-complete-tag)

### CSS Peek

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

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

[CSS Peek - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek)

### File Peek

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

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

[File Peek - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=abierbaum.vscode-file-peek)

### 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](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)

### Markdown Checkbox

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

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

[Markdown Checkbox - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=PKief.markdown-checkbox)

### Project Manager

プロジェクト管理

#### 初期設定

1. Project Managerをインストール

#### 使い方

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

| コマンド | 内容 |
| --- | --- |
| 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](https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager)

### Git History

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

```text:コマンドパレット
>git log
```

[Git History (git log) - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory)

### 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](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync)


## Markdown

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


## 参考
[Visual Studio Code早分かりガイド](http://www.atmarkit.co.jp/ait/subtop/features/dotnet/all.html#xe789b9e99b86efbc9aVisualStudioCodee697a9e58886e3818be3828ae382ace382a4e38389)
[VSCodeの拡張機能 おすすめ](http://qiita.com/EbXpJ6bp/items/4b87a092a3d6a0ecf595)
[Visual Studio Code を使って Markdown のプレビュー](http://qiita.com/poemn/items/8094c04bba86bd4fbe54)