仕事でめちゃ使ってるVSCodeのショートカット / なんかちょっと良いなと思って導入した設定たち

# 設定系

## 補足（`Settings.json`の開き方）

こちらのサイトを参照ください。（デフォルトではショートカットキーが割り当てられていないようです。）
[【VSCode】settings.jsonを表示・確認する方法と、デフォルト設定を表示する方法](https://blog-and-destroy.com/25199)

## ミニマップの見た目を変更する

```json:settings.json
{
 "editor.minimap.renderCharacters": false,
 "editor.minimap.maxColumn": 200,
 "editor.minimap.showSlider": "always"
}
```

こんな感じになります。

<img width="200" alt="minimap01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188888/41fb587d-dd42-f39d-c8d1-be6186332c54.png">


## 画面最上部タイトルバーを変更する

```json:Settings.json
{
 "window.title": "${dirty} ${activeEditorMedium}${separator}${rootName}"
}
```

こんな感じになります。

<img width="300" alt="titlebar.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188888/01d5f2bf-2dad-c528-85a2-74cf35b2bb8a.png">


# 探す系

## ファイルツリーからファイルをファイル名で探す

`ctrl` + `p`

![searchfile..png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188888/0270185e-94a7-3987-3d33-14e976b04215.png)
ファイル名がわかっている場合に便利。


## ファイル内の要素をアウトラインから探す

`ctrl` + `shift` + `o`

![searchoutline.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188888/f9e23dbf-bd47-e168-5b7b-cbadd80733e1.png)

DOMを逆引きして飛びたい箇所に飛べる。

## VSCodeデフォルトの機能や拡張機能を機能名で探す

`ctrl` + `shift` + `p`

<img width="554" alt="changeLangMode.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188888/39e8cc56-2a7f-7b1a-1a47-9debcf241651.png">

よく`Change Language Mode`を使ってます...
`Live Server`を起動させるときにも使ったりしますね（なぜかすぐに右下に出てこない時）

# 編集系

## 選択したものと同じものをすべて選択する

`ctrl` + `shift` + `L`

## 選択範囲内全ての末尾にカーソルをつける

範囲選択後 -> `alt` + `shift` + `i`

![cursor01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188888/bd9d4023-cfcd-7550-7b0d-8df69b4c34e4.png)


これが...

![cursor02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188888/a5c5ae71-918b-19d0-bcf4-d292f0212b9e.png)


こうなる

## 選択範囲行/カーソル行をそのままコピーする

範囲選択後 -> `shift` + `alt` + 下 or 上矢印キー

![multicopy01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188888/77da3747-c0b7-091a-df59-86ab4924e990.png)

これが...


![multicopy02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188888/f61f075a-e0fa-e4f6-60fa-ebe8f27ed02e.png)

こうなる


## カーソル行の上に空行を挿入する

`ctrl` + `shift` + `enter`

## カーソル行の下に空行を挿入する

`ctrl` + `enter`

# 移動系

## カーソル位置はそのままで画面のみスクロールする

`ctrl` + 下 or 上矢印キー

# 画面分割・移動系

## 画面を二分割する

`ctrl` + `|`

## 分割したエディタを行き来する

`ctrl` + `PageUp` or `PageDown`
(Upだと右に移動、Downだと左に移動する。通常のタブ移動もできるため、エディタ間を移動したと勘違いしてしまうことが多々ある...。)

# サイドバー関連系

## サイドバーの表示・非表示を切り替える

`ctrl` + `B`
(現在開かれているサイドバー項目が保持される。サイドバーを開いた時には、閉じた時に開かれていた項目が再度開くことになる。)

## エクスプローラーにフォーカスを当てる

`ctrl` + `shift` + `E`

# 検証環境

VScode 1.38.1
Windows 10

# 参考にしたサイト

- [マルチカーソルを使わないVSCodeはただのVSCodeだ！〜解説編〜 - memo_md](http://mugi1.hateblo.jp/entry/2018/12/11/215808)
- [VS Code の便利なショートカットキー - Qiita](https://qiita.com/12345/items/64f4372fbca041e949d0)
- [21 VSCode Shortcuts to Make Coding Faster and More Fun - DEV Community 👩‍💻👨‍💻](https://dev.to/jsmanifest/21-vscode-shortcuts-to-make-coding-faster-and-more-fun-3b4m)
- [Tips to use VSCode more efficiently - DEV Community 👩‍💻👨‍💻](https://dev.to/selrond/tips-to-use-vscode-more-efficiently-3h6p)


# おまけ（感想）

エディタ操作をイイ感じに撮影して載せたかったけど方法がわからず...。