個人的によく使う VS Code の拡張機能(HTML & CSS & JavaScript編)です。  

本当は知ってる言語全部を一つの記事にまとめたかったのですが、フレームワークも含めると数が多くなったので、とりあえずフロント言語編とします。  

## HTML & CSS

### Emmet

これは拡張機能ではなく標準搭載されているんですが、覚えとくと何かと便利なので一応書いときます。  

[こちら](https://docs.emmet.io/cheat-sheet/) がチートシートになっていて、要するにショートカットコマンドみたいな感じですかね。  
用語的にはスニペットと言うんでしょうか。  

個人的には `w100` と打って `width: 100px` が生成される、ぐらいしか意識して使ったことないです。  

標準搭載されているせいであまりありがたく感じてないのですが、多分 `div` って打って `<div></div>` が生成されるのも Emmet のおかげですよね。ありがとうございます。  


### Auto Rename Tag

対応する閉じタグも変更してくれます。  

[![auto_rename](https://raw.githubusercontent.com/formulahendry/vscode-auto-rename-tag/master/images/usage.gif)](https://raw.githubusercontent.com/formulahendry/vscode-auto-rename-tag/master/images/usage.gif)

### Auto Close Tag

自動で閉じタグを生成してくれます。が、上記の Emmet で大抵生成してくれるので役に立ってる実感がない。  
けど一応いれときます。  

### Path Intellisense

ファイルパスを保管してくれます。  

[![path_intellisense](https://i.giphy.com/iaHeUiDeTUZuo.gif)](https://i.giphy.com/iaHeUiDeTUZuo.gif)

### HTML CSS Support

HTML, CSS の id, class名を補完してくれます。  

## JavaScript

### ESLint

最強の linter ですね。なんですけどどうやって説明すればよいものか。  

多分フレームワークとかいれるときに勝手に環境に ESLint が入ってくれると思うので、そのときとりあえずこの拡張機能をいれとけばいいと思います。  

### Prettier

[前回](https://masopon.com/posts/vscode-common) も紹介したフォーマッターです。  
HTML, CSS, JavaScript のフォーマッターなのでどれか一つでも触るならいれておきたい。  

### Vetur

Vue.js に限ってしまうのですが、Vue を使うならいれておきたい。いれておきたいというか必須レベルですね。

個人的によく使う VS Code の拡張機能(HTML & CSS & JavaScript編)

個人的によく使う VS Code の拡張機能(共通編)です。  

言語別編もいつか書こうと思ってます。  

### Bracket Pair Colorizer

括弧を色分けして、対応する括弧の視認性を大きく向上させます。  

[![bracket](https://raw.githubusercontent.com/CoenraadS/BracketPair/develop/images/example.png)](https://raw.githubusercontent.com/CoenraadS/BracketPair/develop/images/example.png)  

### Code Spell Checker

一般的な英単語かどうかチェックしてくれます。  
結構タイポ防止に貢献してくれます。  

[![code_spell_checker](https://raw.githubusercontent.com/streetsidesoftware/vscode-spell-checker/master/packages/client/images/example.gif)](https://raw.githubusercontent.com/streetsidesoftware/vscode-spell-checker/master/packages/client/images/example.gif)  

### GitLens

Gitの差分表示を見やすくしてくれます。  

### vscode-icons

ファイル表示にアイコンを表示してくれます。  

### TODO Highlight

TODO: などのコメントを強調表示してくれます。  
チーム開発時はいれておきたい。  

[![todo](https://raw.githubusercontent.com/wayou/vscode-todo-highlight/master/assets/material-night-eighties.png)](https://raw.githubusercontent.com/wayou/vscode-todo-highlight/master/assets/material-night-eighties.png)  

### Settings Sync

github アカウントと連携して、VS Code の設定をバックアップ、同期させることができます。  
これがあるおかげでこの記事はメモとしての役割がない。  

### Docker

Docker を使うならいれておきたい。  

### Rainbow CSV

CSV ファイルをキレイにしてくれます。  

[![rainbow_csv](https://i.imgur.com/PRFKVIN.png)](https://i.imgur.com/PRFKVIN.png)  

### Prettier

HTML や CSS のシンプルなフォーマッターです。  
とりあえずいれておくと楽できるけど、バリバリフロント書く人はもっと良いのを使ってるかもしれない。  

### Background Phi Colors

個人的に超おすすめで、説明し辛い拡張機能です。  
ありとあらゆる面で視認性を向上させています。  

具体的には、インデントの色付け、カレントラインに含まれる単語を強調、スペースの強調表示、とかでしょうか。  

[![phi.jpg](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/phi.jpg?alt=media&token=94c493ca-0435-4f9f-93ad-5922caf3aef4)](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/phi.jpg?alt=media&token=94c493ca-0435-4f9f-93ad-5922caf3aef4)  

個人的にカレントラインの強調表示はオフにしています。  

[![setting_phi.jpg](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/setting_phi.jpg?alt=media&token=1c7f3c35-ccd2-4efb-befe-f34bf55f6d4d)](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/setting_phi.jpg?alt=media&token=1c7f3c35-ccd2-4efb-befe-f34bf55f6d4d)


個人的によく使うVS Code の拡張機能(共通編)

個人的に 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 の拡張機能(HTML & CSS & JavaScript編)

個人的によく使うVS Code の拡張機能(共通編)

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

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