VSCodeおすすめ拡張機能

普段からVSCodeを使っていて個人的に便利だと思った拡張機能を紹介します。
言語によらないものを主に選びました。

※画像やGifはマーケットプレイスの各拡張機能のページから拝借しました。

# 環境系
## Japanese Language Pack for Visual Studio Code
https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja

VSCodeが日本語化されます。
ほぼ必須ですね。

## Remote Development
https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack

こちらも必須の拡張機能です。
リモート環境に接続して接続先のソース・リソースで開発・実行ができます。
アーキテクチャやリソースに制限がある環境でデバッグしたいとなるとかなり有用ですね。
（私はGPUが装着されているサーバーでDeepLearningのコードをデバッグする際恩恵を受けています）

以下の3つからなります。

* RemoteSSH ・・・　SSHで接続
* RemoteContainer ・・・ Conrainerに接続（RemoteSSHと組み合わせたり、後述のDockerと組み合わせることも可能）
* RemoteWSL ・・・ WSLに接続

![](https://microsoft.github.io/vscode-remote-release/images/ssh-readme.gif)

## vscode-icons
https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons

ファイルエクスプローラーに表示されるファイルのアイコンをいい感じにしてくれます。

![](https://raw.githubusercontent.com/vscode-icons/vscode-icons/master/images/screenshot.gif)

## Live Share
https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare

URLを発行して、そのURLを共有すると、VSCodeの画面が共有できます。
同時に編集することもできるので、リモートワークでのコードレビューの際は有用です。

## Docker
https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker

Dockerの拡張です。
ImageやContainerの管理ができます。
設定の「Docker Host」にリモートのアドレスを設定すると、RemoteContainerで指定したリモートに接続できます。

# エディタ系
## Bracket Pair Colorizer 2
https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2

対応するブラケットに色を付けてくれます。
ネストが深くなった際に便利です。
初心者の方だと対応するネストが存在せずエラーになったりすると思いますが、これで気付けるようになるかと。
![](https://github.com/CoenraadS/BracketPair/raw/master/images/example.png)

## Trailing Spaces
https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces

行末の半角スペースを可視化してくれます。
VSCodeの文末・行末の整形を自動で行う機能と組み合わせると良いです。

## Partial Diff
https://marketplace.visualstudio.com/items?itemName=ryu1kn.partial-diff

コード上の指定範囲2つを比較できます。
似たコードがあった際に目視だと漏れが発生するので、Diffツールを開かなくてもVSCode上でできると便利です。

![](https://raw.githubusercontent.com/ryu1kn/vscode-partial-diff/master/images/public.gif)

## Path Intellisense
https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

パスのインテリセンスを表示してくれます。
言語は問いません。

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

## Prettier - Code formatter
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

コードのフォーマッターです。
個人間の差異を無くせるので、チームで開発する際に採用してみてはどうでしょうか。

# 開発系
## codic
https://marketplace.visualstudio.com/items?itemName=pizzacat83.codic

[ネーミング辞書サービスcodic](https://codic.jp)をVSCodeから扱うための拡張機能です。
プログラミングにおいて命名はとても重要です。
共有しやすい名前をつけるためにもこういったサービスを活用してみると良いかもです。

![](https://github.com/codic-project/codic-vscode-extension/raw/master/images/usage.gif)

## OpenAPI (Swagger) Editor
https://marketplace.visualstudio.com/items?itemName=42Crunch.vscode-openapi

OpenAPIのEditorです。
インテリセンスを出してくれたりなど、OpenAPIの仕様書を書く際にはかなり便利です。
Previewもできるので、それだけでもインストールする価値があります。

![](https://github.com/42Crunch/vscode-openapi/raw/master/images/OpenAPI_preview_pane.gif)

## REST Client
https://marketplace.visualstudio.com/items?itemName=humao.rest-client

RESTのクライアントです。
HTTPのリクエストを送ることができます。
OpenAPIほど充実した機能は不要で、簡単にAPIの確認をしたいときは有用です。

![](https://raw.githubusercontent.com/Huachao/vscode-restclient/master/images/usage.gif)

## Code Spell Checker
https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

コード中の英単語のスペルチェックをしてくれます。
正しい綴りで書くとチームの他の人も分かりやすいです。
ライブラリ名など辞書に載ってるような英単語でない場合も警告が出ますが、単語毎にチェックから外す設定ができます。

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

## GitLens — Git supercharged
https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

Gitの機能拡張です。
コミットログやブランチ情報、エディタへのコミットログ表示など機能が豊富です。

![](https://raw.githubusercontent.com/eamodio/vscode-gitlens/main/images/docs/revision-navigation.gif)

# 便利系
## Output Colorizer
https://marketplace.visualstudio.com/items?itemName=IBM.output-colorizer

ログ（.log）ファイルを表示する際、内容にあわせて色付けしてくれます。
情報が整理されるので目的の情報にたどり着きやすくなります。

![](https://raw.githubusercontent.com/IBM-Bluemix/vscode-log-output-colorizer/master/github-assets/screenshot-4.jpg)

## Rainbow CSV
https://marketplace.visualstudio.com/items?itemName=mechatroner.rainbow-csv

先ほどのOutput Colorizerと似たようなもので、CSVを表示する際、色付けしてくれます。
カンマの位置によっては同じ列のものでも、表示位置が違うので1色だけだととても見にくいです。
それを解決します。

![](https://i.imgur.com/6eJqeUN.png)

## Todo+
https://marketplace.visualstudio.com/items?itemName=fabiospampinato.vscode-todo-plus

TODO管理です。
コード中の「TODO」「FIXME」等を管理してくれます。

![](https://github.com/fabiospampinato/vscode-todo-plus/raw/master/resources/demo/syntax.png)

![](https://github.com/fabiospampinato/vscode-todo-plus/raw/master/resources/demo/activity_bar_views.png)

## VS Color Picker
https://marketplace.visualstudio.com/items?itemName=lihui.vs-color-picker

カラーバーから選んだ色のカラーコードをエディタに貼り付けしてくれます。
スポイト機能や、エディタのカラーコードに色をつけてくれたりと中々優秀です。
ブラウザで検索して選ぶのが面倒なので、VSCodeだけで出来るのは助かります。

![](https://github.com/leehooi/vs-color-picker/raw/master/readme_img/usage_palette.gif)

## filesize
https://marketplace.visualstudio.com/items?itemName=mkxml.vscode-filesize

ファイルサイズを表示してくれます。

![](https://cldup.com/_Y52O-UfkK.jpg)

## VSNotes
https://marketplace.visualstudio.com/items?itemName=patricklee.vsnotes

VSCodeで文書の管理ツールができます。
対応しているのはプレーンテキストとマークダウンです。
VSCodeでよく行う手順をまとめた手順書等を入れておけば、VSCodeだけで済むので便利ですね。
その手順書をクラウドストレージに入れておけばチームで共有もできます。

<iframe width="560" height="560" src="https://www.youtube.com/embed/Kcf4rpRDmlQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## Marp for VS Code
https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode

マークダウンでプレゼンテーション資料が作れる拡張機能です。
簡単な資料でよいのに わざわざパワーポイントで起こすのが面倒、という場合に便利です。

![](https://raw.githubusercontent.com/marp-team/marp-vscode/main/docs/screenshot.png)

# 言語
## Importmagic（Python）
https://marketplace.visualstudio.com/items?itemName=brainfit.vscode-importmagic

Python開発時のインテリセンスやコードジャンプを強化してくれる拡張機能です。
これがないとPythonでは満足に開発できません（といっても過言ではありません）。
setting.jsonの"python.autoComplete.extraPaths"にワークスペースのディレクトリパスを設定しておくだけでOKです。

```json
"python.autoComplete.extraPaths": [
    "${workspaceDirpath}"
]
```

![](https://github.com/pilat/vscode-importmagic/blob/master/images/presentation.gif?raw=true)

## Auto Rename Tag（HTML）
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

HTMLでタグを変えた際に対応している箇所も修正してくれます。
2か所修正すべきところを1か所で済むので便利です。

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

# まとめ
以上おすすめの拡張機能の紹介でした。
参考になれば幸いです。

おすすめのものが増えたら更新していこうと思います。
皆さんのおすすめも教えて頂けると嬉しいです！