開発が捗る Visual Studio Code 拡張機能

拡張機能はできるだけ最小限にしておきたい派です。そんな自分がインストールして使い勝手がよかった拡張機能をいくつか紹介します。

## Auto Close Tag
[https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag)
その名の通りClose Tagを自動で入力してくれます。単純にタイピングが減るので肉体的・心理的負担の軽減にもなります。
![usage.gif](https://qiita-image-store.s3.amazonaws.com/0/80473/afe72958-b310-30a1-3bdd-b33dad4d78be.gif)

## Auto Rename Tag

[https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)
タグを修正した際にClose Tagも合わせて修正してくれます。これも手間が減って便利です。
![usage (1).gif](https://qiita-image-store.s3.amazonaws.com/0/80473/87096cf3-214f-9b97-61ea-52970851f844.gif)

## Bracket Pair Colorizer 2

[https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2)
コードブロックをわかりやすく配色してくれる拡張機能です。可読性が上がるためこれも負担軽減に繋がります。
![example.png](https://qiita-image-store.s3.amazonaws.com/0/80473/211c50d6-5bb1-3cc6-b033-5d95e4092998.png)

## GitLens — Git supercharged
https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
行ごとに最終更新者を表示してくれる拡張機能です。地味に便利で、PRのレビュアーを見定めるときやコードの質問を誰にするかの参考になります。
![gitlens-preview.gif](https://qiita-image-store.s3.amazonaws.com/0/80473/f4fb1c4c-50be-893c-d8ef-b6828700435b.gif)

## Japanese Language Pack for Visual Studio Code
https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja
UIを日本語化したいときは入れるようにしましょう。

## Import Cost
https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost
JavaScriptもしくはTypeScriptでimportしたファイルの容量を表示してくれる拡張機能です。容量の大きいファイルは赤文字で表示されるようになります。webpackなどでTree Shakingすれば不要かもしれませんがリファクタリングの参考になるかもしれません。

![import-cost.gif](https://qiita-image-store.s3.amazonaws.com/0/80473/8efea76b-d829-b370-6417-8c72c167d6d5.gif)


## IntelliJ IDEA Keybindings

[https://marketplace.visualstudio.com/items?itemName=k--kato.intellij-idea-keybindings](https://marketplace.visualstudio.com/items?itemName=k--kato.intellij-idea-keybindings)
IntelliJやWebstormなどのIDEA製品を使っていたユーザー向けの拡張機能です。キーバインディングをIDEAユーザーが慣れ親しんだ設定にカスタマイズすることができます。

## Material Icon Theme

[https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)
アイコンは好みなのでなんでもいいと思いますが、自分はこれを入れています。
![fileIcons.png](https://qiita-image-store.s3.amazonaws.com/0/80473/7283e61f-2a62-8e14-c8f2-798e2f9b8cec.png)


## Path Intellisense

[https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)
ファイルパスの自動入力をしてくれます。必須レベルですが、エディター単体でサポートして欲しい。。
![iaHeUiDeTUZuo.gif](https://qiita-image-store.s3.amazonaws.com/0/80473/20505566-770f-cdd3-1fea-7410e11485f8.gif)

## Prettier - Code formatter
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
コードフォーマッターです。広い範囲の言語に対応していて最近はこれがスタンダードになってますね。
![1_Dy12UyjZIieX86lj0AJ53Q.gif](https://qiita-image-store.s3.amazonaws.com/0/80473/71212819-7015-423f-d717-28399aca6998.gif)

## Quokka.js
https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode
エラーになる箇所を実行前に評価してくれる拡張機能です。
![vsc1.gif](https://qiita-image-store.s3.amazonaws.com/0/80473/50aaadf0-2ff9-a178-2ec9-9b20d49c0fb0.gif)

## Settings Sync
[https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync)
GithubのGistを使って複数のマシンで設定を共有することができるようになります。設定方法はリンク先から行けばスクリーンショット付きでまとまっています。

## Trailing Spaces

[https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces](https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces)
全角や余計なスペースをハイライトしてくれる拡張機能です。
![27996497-05825060-64b1-11e7-8f1c-7a827b9f0a6f.gif](https://qiita-image-store.s3.amazonaws.com/0/80473/944563f9-c439-1aec-79f4-53bf39815c23.gif)