個人的に VS Code でよく使う or たまに使うけど使う度にググっている、キーボードショートカットをメモします。  

全部知りたい方はググってください。  

Windows で想定してます。  

### 基本

- `Ctrl` + `c`　コピー
- `Ctrl` + `x`　切り取り
- `Ctrl` + `v`　ペースト
- `Ctrl` + `a`　全選択
- `Ctrl` + `s`　ファイル保存
- `Tab`　字下げ
- `Shift + Tab`　字上げ

### よく使う

- `Ctrl` + `z`　編集を一つ前に戻す
- `Ctrl` + `p`　ファイル名検索
[![ctrlp.gif](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/ctrlp.gif?alt=media&token=150e4995-b87f-416e-8b40-874c37377efe)](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/ctrlp.gif?alt=media&token=150e4995-b87f-416e-8b40-874c37377efe)

- `Ctrl` + `d`　単語を複数選択する
[![ctrld.gif](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/ctrld.gif?alt=media&token=713d210b-ccbd-4fa3-a5e6-085094a7e615)](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/ctrld.gif?alt=media&token=713d210b-ccbd-4fa3-a5e6-085094a7e615)
- `Ctrl` + `d`　中に　`Ctrl` + `k`　複数選択を解除する

- `Ctrl` + `Shift` + `t`　閉じたタブを開く
- `Ctrl` + `f`　タブ内検索
- `Ctrl` + `Shift` + `f`　ディレクトリ/ワークスペース内検索
- `Ctrl` + `Enter`　次の行に空白行を追加
- `Home`　行頭に移動
- `End`　行末に移動

### たまに使う

- `Ctrl` + `y`　やり直す
  - `Ctrl` + `z`　で戻しすぎたのを元に戻すときに使う
- `Ctrl` + `Alt` + `↑↓`　マルチカーソルを追加する (`Alt` + `左クリック`　で自由な位置に追加できる)
[![ctrlaltscrollkey.gif](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/ctrlaltscrollkey.gif?alt=media&token=e46d0476-a9f6-4f81-abc8-1f84538ec860)](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/ctrlaltscrollkey.gif?alt=media&token=e46d0476-a9f6-4f81-abc8-1f84538ec860)

- `Ctrl` + `PageUp, PageDown`　タブのフォーカスを移動する
- `Ctrl` + `←→`　単語単位でカーソル移動

個人的によく使うVS Code のキーボードショートカット

VS Code の拡張機能を紹介していたらキリがないのですが、個人的に特に、他のエディタよりも VS Code が優れていると感じる機能を一つだけご紹介します。

それが VS Code Remote Development なのですが、正直あちこちで優秀な解説サイトがあるので、簡単な説明に留めます。

### やらないこと

- Dockerの説明

***

### Remote Development について

拡張機能の `Remote-SSH`, `Remote-WSL`, `Remote-Containers` の詰め合わせです。

特に `Remote-Containers` が便利なのでこちらにスポットライトを浴びせます。

### Remote-Containers

突然ですが、 Docker って便利ですよね。

なんといってもローカルに言語の実行環境を用意する必要がなく、コンテナをいつでも気軽に破壊、再生ができるのが魅力的だと思います。

しかし、エディタでコーディングする際に役立つ、型解析、フォーマッター、リンター等のツールは、言語がインストールされていないと機能しません。

なのでせっかく Docker を使っているのに、ローカルで対象の言語をインストールしないと良いコーディング環境が用意できませんでした。

`Remote-Containers` は、そんな悩みを解決できます。

VS Code の設定をコンテナ内に隠蔽し、インターフェイスのみローカルで動作させることができるようになります。

それによってコンテナ内の言語の実行環境を利用して型解析、フォーマッター、リンター等の機能を利用することができます。

### 利用方法

VS Code の拡張機能の `Remote Development` をインストールします。

[![vscode_remote_development.png](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/vscode_remote_development.png?alt=media&token=c9f05b3a-9acc-41d9-b0c4-ee0e632b030d)](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/vscode_remote_development.png?alt=media&token=c9f05b3a-9acc-41d9-b0c4-ee0e632b030d)

`docker-compose.yml` や `Dockerfile` が含まれるプロジェクトを VS Code で開くと、左下にオレンジのアイコンがでてきます。

[![remote_icon.png](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/remote_icon.png?alt=media&token=2163e510-cfa6-464e-ae16-7168fbbe5fbe)](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/remote_icon.png?alt=media&token=2163e510-cfa6-464e-ae16-7168fbbe5fbe)  
(自分の場合WSL上で動かしてるので少し表示が違うと思います。ローカル上ならアイコンだけのはず。)

オレンジのやつをクリックするとメニューがでてくるので、 `Add Development Container Configuration Files` をクリックします。

自分で設定を書くか `Dockerfile` を基準とした設定をつくるか `docker-compose.yml` を基準とした設定をつくるか聞かれますが、
今回は `docker-compose.yml`で構築されたプロジェクトを想定して、`From 'docker-compose.yml'` を選択します。

すると、 `.devcontainer/devcontainer.json` と `.devcontainer/docker-compose.yml` が作成されます。

`devcontainer.json` を見ていきましょう。

### devcontainer.json

```json
{
	"name": "name", // なんでも良い
	"dockerComposeFile": [
		"../docker-compose.yml",
		"docker-compose.yml"
	],
	"service": "app", // appコンテナを想定
	"workspaceFolder": "/app", // appコンテナのワークスペース
	"settings": { // appコンテナの中だけで使いたい VS Code の設定
		"terminal.integrated.shell.linux": null
	},
	"extensions": [] // appコンテナの中だけで使いたい VS Code の拡張機能
}
```

元々記述されていたコメントを全部削除したらこのようになると思います。

今回は rails を docker-compose で構築した想定で `devcontainer.json` を書き換えてみます。

```json
{
	"name": "rails",
	"dockerComposeFile": [
		"../docker-compose.yml",
		"docker-compose.yml"
	],
	"service": "app",
	"workspaceFolder": "/usr/src/app",
	"settings": {
		"ruby.useLanguageServer": true,
		"ruby.intellisense": "rubyLocate",
		"rufo.useBundler": false,
		"rufo.exe": "/usr/local/bundle/bin/rufo",
		"solargraph.useBundler": false,
		"solargraph.commandPath": "/usr/local/bundle/bin/solargraph",
		"solargraph.definitions": true,
		"solargraph.diagnostics": true
	},
	"extensions": [
		"aki77.rails-db-schema",
		"aki77.rails-routes",
		"castwide.solargraph",
		"eamodio.gitlens",
		"jnbt.vscode-rufo",
		"kaiwood.endwise",
		"rebornix.ruby",
		"wingrunr21.vscode-ruby"
	],
	"postCreateCommand": "gem install rufo solargraph" // コンテナ作成後に実行される
}
```

少し "settings" を冗長に書いているのですが、概ねこんなところでしょうか。

"postCreateCommand" によって、フォーマッターの `rufo` と、型解析の `solargraph` をインストールしています。

本来ならローカルで Ruby をインストールしないと動作しないこの2つの拡張機能を、コンテナの中にインストールすることによって動作させることができるわけですね。

また、元々の `Dockerfile` や `docker-compose.yml` でインストールさせず、 VS Code の機能によってインストールさせることで、他のエディタを使っていたり、拡張機能が必要ない他の開発者の環境に余分なものをインストールさせずにすみます。平和。

次に `.devcontainer/docker-compose.yml` を見てみましょう。

### .devcontainer/docker-compose.yml

```yml
version: '3'
services:
  app:
    volumes:
      - ~/.gitconfig:/root/.gitconfig
```

こちらは単純に、開発用に追加でボリュームマウントしたいものを書くだけで良いかと思われます。

他にありがちなのはシェルの設定とかをマウントさせるとかでしょうか。

### コンテナ作成

準備ができたら、再びオレンジのアイコンをクリックして、`Open Folder in Container` を選択します。

すると初回は結構時間が掛かった後、無事に作成され、ローカルと変わらぬコーディングができるようになってると思います。

以後 `devcontainer` の設定を変えたりしたら Rebuild してください。

ためしに `rufo` が動くか確認。

[![rufo.gif](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/rufo.gif?alt=media&token=61ad758c-5e42-44ad-8e38-794bffbffc24)](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/rufo.gif?alt=media&token=61ad758c-5e42-44ad-8e38-794bffbffc24)  
できた。

### まとめ

今やほとんどの人が Docker で開発環境を構築していると思います。

今回の `Remote Development` は Docker の開発環境をよりサポートしてくれる優れものだと思います。

最近の Microsoft は WSL2 しかり VS Code しかり、便利なものをバリバリ作ってくれて良いですね。

あとは IE も破壊してくれれば最高なのですが。


個人的によく使うVS Code のキーボードショートカット

VS Code + Docker で開発するなら、VS Code Remote Development