VSCode 使いやすくした

## VSCode作業効率化
VSCodeを使いやすくして作業効率化をはかってみた。

### 改善したかった項目
1. 1画面でコマンド操作も完結させたい
2. トラックパッド使いたくない
3. ワークスペースを開くときにメニューから行くのがだるい
4. 作業ファイルパスの閲覧性を上げる


## 1. 1画面でコマンド操作も完結させたい
ビルドするたびにターミナルに移動するのがめんどくさいので、
VSCode内でターミナルを開く。

#### ・ ターミナル起動ショートカット
`⇧shift` + `^control` + `'`


#### ・ 画面下部にターミナルが現れる
![image.png](https://qiita-image-store.s3.amazonaws.com/0/263845/81ddcf99-9a0e-5238-79fc-7facb046c6d5.png)


## 2. トラックパッド使いたくない
画面内で移動するときにいちいちトラックパッドに行くのが面倒なので、
キーバインドを設定。
移動したい場所は、「サイドバー」「エディター」「ターミナル」間。

#### ・ キーバインド設定開く
`⌘command K` + `⌘command S`


#### ・ keybindings.jsonにカスタマイズを追加
vimが好きな人で 「H,J,K,L」を使用している人もいたが、自分はウィンドウ移動に使っているため「A,S,D」を使用した。

``````js:keybindings.json
// Place your key bindings in this file to override the defaults
[
  {
    "key": "ctrl+a",
    "command": "workbench.action.focusSideBar",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+a",
    "command": "workbench.action.focusSideBar",
    "when": "terminalFocus"
  },
  {
    "key": "ctrl+s",
    "command": "workbench.action.focusFirstEditorGroup",
    "when": "filesExplorerFocus"
  },
  {
    "key": "ctrl+s",
    "command": "workbench.action.focusFirstEditorGroup",
    "when": "terminalFocus"
  },
  {
    "key": "ctrl+d",
    "command": "workbench.action.terminal.focus",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+d",
    "command": "workbench.action.terminal.focus",
    "when": "filesExplorerFocus"
  }
]
``````

## 3. ワークスペースを開くときにメニューから行くのがだるい
要するにここ（↓）から開くのがめんどくさいので、コマンドで開く。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/263845/dcd2c037-aa2b-c183-928e-4f0625978bca.png)

#### ・ `code` コマンドを使用可能にする
`⌘command` + `⇧shift` + `P` でコマンドパレットを開く。
「shell」と入力。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/263845/812eaf64-b23f-4671-c844-af06af837db1.png)
これをインストールする`code`コマンドが使えるようになる。

#### ・ `code`コマンドでワークスペースを開く

カレントディレクトリを新しいwindowで開く

```
code .
```
ファイルもしくはディレクトリを指定して新しいwindowで開く

```
code "file name or directory name"
```

#### ・ オプション(便利)
`-a`で同じワークスペース内で開く（※マルチワークスペース）、ファイルやディレクトリの追加

```
code -a .
``` 
```
code -a "file name or directory name"
```
その他オプションはこちら↓
[The Visual Studio Code Command Line Options](https://code.visualstudio.com/docs/editor/command-line) 


## 4. 作業ファイルパスの閲覧性を上げる
どこのファイルをいじっているのか、VSCodeはサイドバーではわかりにくい（特にサイドバーの幅が狭いくて階層の深いファイルをいじっている時）ので、
階層を可視化。

#### ・ コマンドパレットを開く
「Toggle Breadcrumbs」 入力。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/263845/fb10a149-2f05-247f-e452-95dce8c63cbe.png)

#### ・ ファイルパスがパンくずリストで表示される
![image.png](https://qiita-image-store.s3.amazonaws.com/0/263845/101577bc-d74c-6a9b-559a-1c487d1b3467.png)

**※ちょっと関連すること**
windowのタイトルの表示をカスタム。

```
${folderPath}${separator}${activeEditorShort}${separator}${rootName}
```

`⌘command` + `,` で設定を開いて、「ウィンドウ＞Title」で設定可能。
windowの上部の表示がこうなる↓
![image.png](https://qiita-image-store.s3.amazonaws.com/0/263845/b89b9561-dc30-5c84-c1c7-f85a6bb156f1.png)


----

おわり。
[環境の共有もやってみた](https://qiita.com/miiina016/items/018331b36ecf57ed8973)。

_参考_：
[【VSCode】エディタ、サイドバー、ターミナル間のフォーカスのショートカットを設定する - Qiita](https://qiita.com/m1ul24/items/c0a53885b893f121082f)
[The Visual Studio Code Command Line Options](https://code.visualstudio.com/docs/editor/command-line)