2020年版 VSCodeの良さげな拡張機能紹介

日々VSCodeをより気持ちよく使用するために拡張機能の探求は欠かせません。
今回は私の独断と偏見で良さげな拡張機能を紹介します。

# 見た目編

## Peacock
https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199056/c36a6ecc-4c1b-f390-2de0-f9eda473805d.png)

VSCodeのウィンドウをおしゃれにできます。
私は複数の環境(プロジェクトやプログラミング言語)を使い分けるので、ウィンドウごと色を変えることで気持ちも一緒に切り替えています。

![ウィンドウ](https://raw.githubusercontent.com/johnpapa/vscode-peacock/main/resources/hero.png)
公式より拝借

## Ubuntu VSCodeTheme
https://marketplace.visualstudio.com/items?itemName=ThiagoLcioBittencourt.ubuntuvscode
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199056/2d8be58e-389b-dea4-15e4-0556503625c8.png)

見た目をUbuntuっぽくできます。ただの気分です。
私はMacの壁紙をUbuntuにしています(Ubuntu使えというツッコミは受け付けません)

![Ubuntu](https://thiagolucio.com.br/downloads/ubuntuvscodetheme/ubuntuVscodeHtml.png)
公式より拝借

## Rainbow CSV
https://marketplace.visualstudio.com/items?itemName=mechatroner.rainbow-csv
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199056/4898bbd1-da2d-96d5-a2cf-e9d649c97290.png)

CSVを開いたときに色分けしてくれて見やすくなります。

![csv](https://i.imgur.com/PRFKVIN.png)
公式より拝借

## indent-rainbow
https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199056/22d1579c-773b-4e18-2d5a-5ec730eedf3b.png)

インデントがカラフルになってちょっと見易くなります。

# 共通機能系

## Settings Sync

https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199056/324328dc-a29c-84fd-69ed-f7697ea5744d.png)

複数のPCでVSCodeを使用する場合、各PCでVSCodeの設定を行う必要がありますが、こちらの拡張機能を使えば設定を共有できます！

## Vim
https://marketplace.visualstudio.com/items?itemName=vscodevim.vim
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199056/476149d4-8d72-ea7e-c05c-56aaa584477e.png)

VSCodeをVimっぽく使いたい方におすすめ。ただし、コテッコテのVimmerは痒いところに手が届かない可能性あり。
私は普段VimとVSCodeのハイブリットなので重宝しています。

## GitLens
https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199056/a3b5130e-4939-b323-9970-41e4c99b667d.png)

Git使うならまず入れた方が良いです。
Git操作をせずにいつ誰が該当のソースを修正したのかがパッと分かります。

![ex](https://raw.githubusercontent.com/eamodio/vscode-gitlens/master/images/docs/current-line-blame.png)
![ex](https://raw.githubusercontent.com/eamodio/vscode-gitlens/master/images/docs/hovers-current-line.png)
公式より拝借

# 言語別

ここからは言語別の拡張機能紹介です。
デバッガーやLanguage Supportは書くまでも無いと思うので割愛します。

# PHP

## PHP Intelephense
https://marketplace.visualstudio.com/items?itemName=bmewburn.vscode-intelephense-client
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199056/98eaee22-d13d-a191-2ed6-242a18b46b51.png)

Language Supportは書かないって言ったくせに早速書きました。
PHPは他のLanguage Supportもあるのですが、こちらの拡張機能の方が頭が良い気がしたので紹介します。

## PHP DocBlocker
https://marketplace.visualstudio.com/items?itemName=neilbrayfield.php-docblocker
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199056/bcd60be4-d44a-4751-28fb-146218423f55.png)

PHPDocを自動で作ってくれます。intって書いてもintegerと書かれるお茶目さがあります。
(多分自分で設定すれば修正できますが)

## PHP Namespace Resolver
https://marketplace.visualstudio.com/items?itemName=MehediDracula.php-namespace-resolver
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199056/f07e3f0c-edf0-d9a6-8c0e-2e96eab2a00c.png)

Classのインポートを自動でやってくれます。(IDEから乗り換えた人はとりあえず入れて見てください。ストレスが減ります)
一括インポートもできるので結構良いです。

# Ruby

## endwise
https://marketplace.visualstudio.com/items?itemName=kaiwood.endwise
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199056/b1f8b5b2-88b3-28ea-42c0-9b1d838a23f6.png)

自分で`end`って書くの面倒ですよね？
こちらの拡張機能は自動で付与してくれます。

## ruby-rubocop
https://marketplace.visualstudio.com/items?itemName=misogi.ruby-rubocop
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199056/e176fe6b-3144-46b2-69ed-bc4cd808f69f.png)

別途Gemの追加が必要ですが、静的チェックとフォーマットをやってくれるので入れておきましょう。
自分の悪いところも容赦無く教えてくれたり、修正してくれるので勉強にもなります。

ifじゃなくてunless使いな〜とか、ネスト減らせるよ〜とか、
eachじゃなくてmap使いなーとか言ってくれるのでレビュワーの負担も減ると思います。

# JavaScript

## Prettier
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199056/85c9cc42-b343-ee5e-84ae-56416a93b9ac.png)

JS触っている人なら当たり前だと思いますが、自動でコード整形してくれるので便利です。
ただ、保存時に整形する設定を入れると差分がめっちゃ出るリポジトリもあったりすると思うので程々に。

## Debugger for Chrome
https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199056/9af9d3a6-6a8a-a5c8-610c-b96ecde6787f.png)

デバッガーも書かないと言ったくせに書いてしまいました。
JSのデバッグをVSCode上で行えるので便利です。もう`console.log`デバッグとはおさらば。

# その他

## Remote-SSH
https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-ssh
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199056/64f21928-7d92-d40f-f43e-cce2069e1314.png)

SSH先のPC上のソースを編集することができます。
私は自宅のUbuntuや、Vagrantに対してSSHして開発する際に使用しています。
ただソースを編集できるだけでなく、ポートフォワードも行えるのでリモート先の8080ポートをローカルの8080にすることもできたりします。
とても便利なのでSSHで開発する方はぜひ使ってみてください。

## Remote-Container
https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199056/8d8f3ff2-f770-b8ef-2fd2-30bae7d10220.png)

Dockerコンテナの中のソースをVSCodeから修正できちゃいます。
もちろんコンテナなのでVolumeマウントしないと修正内容が飛んでしまいますが、開発環境も含めてコンテナ化しちゃうような時は良さげ。

昔別記事書いてます。
https://qiita.com/MasanoriIwakura/items/fe1bb1fade98c0aa65d2
https://qiita.com/MasanoriIwakura/items/e7a2045b2de28c76ccd9

## REST Client
https://marketplace.visualstudio.com/items?itemName=humao.rest-client
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199056/6543600e-ceff-3a85-e3ca-b039064248ed.png)

なんと、VSCode上からREST APIを試すことができます！
デバッグや外部APIの確認に便利。

---
まだまだ拡張機能は沢山あるので、気が向いたタイミングで更新していきます！