2020年 わたすのVSCode便利エクステンション19個

VSCode で普段使いしている便利なエクステンション達を紹介します。

## :emojisense:

https://marketplace.visualstudio.com/items?itemName=bierner.emojisense
<img width="700" alt="emojisense" src="https://user-images.githubusercontent.com/15980747/103171600-e5a1aa80-4890-11eb-9ab7-32663935cee0.png">
絵文字入力に便利なエクステンションです。`:` で絵文字の検索、`Cmd + i` で全ての絵文字リストから選択できます。
<img src="https://user-images.githubusercontent.com/15980747/103171594-e0446000-4890-11eb-8d29-02d02f82aeb0.gif" width="700">

## bookmarks

https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks
<img width="700" alt="bookmarks" src="https://user-images.githubusercontent.com/15980747/103171622-0c5fe100-4891-11eb-9355-70bff08a102b.png">
`Option + Cmd + K` でブックマークを登録・解除します。複数ファイルをまたいで作業する時、コードの場所をメモしておくのに便利です。
<img src="https://user-images.githubusercontent.com/15980747/103171797-644b1780-4892-11eb-9ddb-1ad66ef1b1ba.gif" width="700">

## Bracket Pair Colorizer

https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer
<img width="700" alt="bracket-pair-colorizer" src="https://user-images.githubusercontent.com/15980747/103171821-817fe600-4892-11eb-9cc9-8584b0ee8471.png">
カッコをカラフルに表示します。ネストしたそれぞれのカッコが色分けされて見やすくなります。　　
<img src="https://user-images.githubusercontent.com/15980747/103171816-7c229b80-4892-11eb-9ade-d55f55e7c33b.gif" width="700">

## Browser Preview

https://marketplace.visualstudio.com/items?itemName=auchenberg.vscode-browser-preview
<img width="700" alt="browser-preview" src="https://user-images.githubusercontent.com/15980747/103171832-93618900-4892-11eb-835d-659fef7b0095.png">
VSCode のウインドウ内でブラウザのプレビューが見られるようになります。`Cmd + Shift + P` > `Browser Preview: Open Preview` またはサイドバーのアイコンクリックでブラウザを開きます。
<img src="https://user-images.githubusercontent.com/15980747/103171827-8c3a7b00-4892-11eb-9a57-782953a7aca3.gif" width="700">

## Code Spell Checker

https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker
<img width="700" alt="code-spell-checker" src="https://user-images.githubusercontent.com/15980747/103171851-ad9b6700-4892-11eb-9c96-af76d0b9113c.png">

タイポを青い波線で表示します。
<img src="https://user-images.githubusercontent.com/15980747/103171846-a3796880-4892-11eb-971e-77c8eb46efd8.gif" width="700">

## ESLint（要設定）

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
<img width="700" alt="eslint" src="https://user-images.githubusercontent.com/15980747/103171860-c015a080-4892-11eb-9f12-9f378a786f05.png">
設定ファイル（`.eslintrc` など）を検出して ESLint のルールに沿わないコードを赤い波線で表示します。`formatOnSave` を有効にするとファイル保存時に `$ eslint --fix` してくれるので単純なシンタックスミスを自動修正してくれて便利です。

```js
// settings.json
// Code > Preferences > Settings > ナビゲーションバーの Open Settings
"[typescript]": {
  "editor.formatOnSave": true,
},
```

<img src="https://user-images.githubusercontent.com/15980747/103171855-b855fc00-4892-11eb-8a46-bb230e90e743.gif" width="700">

## HTML formatter（要設定）

https://marketplace.visualstudio.com/items?itemName=NikolaosGeorgiou.html-fmt-vscode
<img width="700" alt="html-formatter" src="https://user-images.githubusercontent.com/15980747/103332635-1d396e00-4aae-11eb-9e67-bdc4b1e01cd5.png">

```js
// settings.json
// Code > Preferences > Settings > ナビゲーションバーの Open Settings
"[html]": {
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "NikolaosGeorgiou.html-fmt-vscode"
},
"html-fmt-vscode.indentSize": 2,
"html-fmt-vscode.multilineAttributeThreshold": 2,
"html-fmt-vscode.voidTagsTrailingSlashStyle": "remove",
"html-fmt-vscode.attributeQuoteStyle": "add",
```

`formatOnSave` を有効にするとファイル保存時に HTML のタグと属性をきれいに改行してくれます。
<img width="700" alt="html formatter" src="https://user-images.githubusercontent.com/15980747/103332585-dc415980-4aad-11eb-8c9d-060070d6de85.gif">

## indent-rainbow

https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow
<img width="700" alt="indent-rainbow" src="https://user-images.githubusercontent.com/15980747/103171881-de7b9c00-4892-11eb-8149-0c4da2c7c6a1.png">
インデントがカラフルになってインデントレベルが分かりやすくなります。
<img src="https://user-images.githubusercontent.com/15980747/103171878-d28fda00-4892-11eb-9a20-1f63b5d9bd29.gif" width="700">

## javascript console utils

https://marketplace.visualstudio.com/items?itemName=whtouche.vscode-js-console-utils
<img width="700" alt="javascript console utils" src="https://user-images.githubusercontent.com/15980747/103171890-f6ebb680-4892-11eb-8ad2-f39cc825bc22.png">
`Cmd + Shift + L` で `console.log()` を一発入力する事ができます。
<img src="https://user-images.githubusercontent.com/15980747/103171889-f2bf9900-4892-11eb-9604-151dff5ff434.gif" width="700">

## Material Icon Theme

https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme
<img width="700" alt="material-icon-theme" src="https://user-images.githubusercontent.com/15980747/103171907-0c60e080-4893-11eb-91b8-edc851e6b791.png">
HTML/CSS などパッと見のファイル識別がしやすくなります。
<img src="https://user-images.githubusercontent.com/15980747/103171903-0408a580-4893-11eb-843f-a9ba7cd4fd91.gif" width="700">

## npm Dependency Links

https://marketplace.visualstudio.com/items?itemName=herrmannplatz.npm-dependency-links
<img width="700" alt="npm-dependency-links" src="https://user-images.githubusercontent.com/15980747/103171928-39ad8e80-4893-11eb-9db4-9360c31e4bf0.png">
`package.json` のパッケージ名クリックで npm のページが開くようになります。
<img src="https://user-images.githubusercontent.com/15980747/103171922-2ac6dc00-4893-11eb-9f56-4935cee51f1c.gif" width="700">

## Open in GitHub, Bitbucket, Gitlab, VisualStudio.com !

https://marketplace.visualstudio.com/items?itemName=ziyasal.vscode-open-in-github
<img width="700" alt="open-in-github" src="https://user-images.githubusercontent.com/15980747/103171935-4b8f3180-4893-11eb-83ac-5181a94596d7.png">
コード右クリック > `Open in GitHub` でブラウザが開きます。
<img src="https://user-images.githubusercontent.com/15980747/103171931-44682380-4893-11eb-81f5-f8d33e3495d6.gif" width="700">

## Prettier（要設定）

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
<img width="700" alt="prettier" src="https://user-images.githubusercontent.com/15980747/103171955-5944b700-4893-11eb-9f61-d883e972638b.png">
`formatOnSave` を有効にするとファイル保存時にコード整形が実行されます。

```js
// settings.json
// Code > Preferences > Settings > ナビゲーションバーの Open Settings
"[typescript]": {
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
```
<img src="https://user-images.githubusercontent.com/15980747/103171938-4fbb4f00-4893-11eb-9e59-420ad20baf9e.gif" width="700">

## Project Manager

https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager
<img width="700" alt="project-manager" src="https://user-images.githubusercontent.com/15980747/103171966-5f3a9800-4893-11eb-8fd9-65379e8e8598.png">
複数プロジェクトを行き来する時に便利です。開いているプロジェクトをワンクリックでかんたんに保存でき、アイコンクリックで一発オープンする事ができます。
<img src="https://user-images.githubusercontent.com/15980747/103171962-5cd83e00-4893-11eb-8990-3596b0a556f8.gif" width="700">

## Quit Control for vscode

https://marketplace.visualstudio.com/items?itemName=artdiniz.quitcontrol-vscode
<img width="700" alt="quite-control" src="https://user-images.githubusercontent.com/15980747/103171975-6b265a00-4893-11eb-9e3f-1b0784545e0e.png">
うっかり `Cmd + Q` をタイプした時のワンクッションです。VSCode がサイレントに終了するのを防ぐ事ができます。
<img src="https://user-images.githubusercontent.com/15980747/103171972-66fa3c80-4893-11eb-974d-b5af71ced651.gif" width="700">

## Quokka.js

https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode
<img width="700" alt="Quokka js" src="https://user-images.githubusercontent.com/15980747/103171979-77121c00-4893-11eb-8a37-230cf8a3f7c8.png">
手元でちょっとだけコードを書いて結果が見たい時に便利です。
<img src="https://user-images.githubusercontent.com/15980747/103171977-71b4d180-4893-11eb-93cd-4c45e1ba44e6.gif" width="700">

## REST Client

https://marketplace.visualstudio.com/items?itemName=humao.rest-client
<img width="700" alt="rest-client" src="https://user-images.githubusercontent.com/15980747/103171984-809b8400-4893-11eb-8322-0e71b20f46a5.png">
`.http` ファイルを作成して URL を書きます。ワンクリックで APIリクエストを実行してレスポンスが確認できます。
<img src="https://user-images.githubusercontent.com/15980747/103171982-7b3e3980-4893-11eb-982f-59a1ef57a805.gif" width="700">

## Setting Sync（要設定）

https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync
<img width="700" alt="setting-sync" src="https://user-images.githubusercontent.com/15980747/103171989-8c874600-4893-11eb-9e9d-2739692b06ac.png">
VSCode の設定、エクステンション、スニペットなどを Gist に保存して複数のデバイスで共有できます。

初回のみ `Cmd + Shif + P` > `Sync: Advanced Options` > `Open Settings` で Gist の ID とアクセストークンを指定します。`autoDownload/autoUpload` を有効にしておくと設定が自動で保存/読み込みされます。

```js
// settings.json
// Code > Preferences > Settings > ナビゲーションバーの Open Settings
"sync.autoDownload": true,
"sync.autoUpload": true,
"sync.gist": "xxxx",
"sync.removeExtensions": true,
"sync.syncExtensions": true,
```

<img src="https://user-images.githubusercontent.com/15980747/103171986-85f8ce80-4893-11eb-992c-a0adb230f59b.gif" width="700">

## TODO Highlight

https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight
<img width="700" alt="todo-hilight" src="https://user-images.githubusercontent.com/15980747/103171997-990b9e80-4893-11eb-8f05-a5516d8a1e9a.png">
`TODO: ` をハイライトするシンプルなエクステンションです。作業中のメモを取っておくのに便利です。
<img src="https://user-images.githubusercontent.com/15980747/103171995-93ae5400-4893-11eb-950f-6b3098d51213.gif" width="700">

現場からは以上です！