普段使ってるVScode 拡張機能をまとめてみる

まえおき

普段使ってるVScodeの拡張機能ってなに使ってるかな、と思って整理整頓がてらまとめてみる。ちなみに普段はRails メインでたまに Flutter を触る。

言語関係なし

Japanese Language Pack for Visual Studio Code

VScode を日本語表記に設定するための拡張機能

Bracket Pair Colorizer 2

言語によるが、複数のカッコが登場すると、どれがどの閉じカッコに対応しているかわからなくなる場面があると思う。それを防ぐために、各カッコを色分けしてわかりやすくしてくれる。
ちなみにBracket Pair Colorizerもあるが、これは古いバージョンらしい。

• Differences between v1 and v2?
  • v2 Uses the same bracket parsing engine as VSCode, greatly increasing speed and accuracy. A new version was released because settings were cleaned up, breaking backwards compatibility.

Material Icon Theme

フォルダやファイルアイコンが見やすくなる。他にもvscode-iconsというのもある。どっちを選ぶかは好みの問題だと思うが、最低限どちらかは入れといて損は無いと思う。個人的には「vscode-icons」のアイコンの方が落ち着いてる感じがする。

indent-rainbow

インデントの階層ごとに色をつけてくれる。インデントに違和感を感じた時の目印になるので便利。

Code Spell Checker

スペルチェックをしてくれる。Word とかでスペルがおかしいやつを緑の波線で教えてくれるのと同じ。

Path Autocomplete

フォルダやファイルのパスを自動保管＆候補表示してくれる。なんでファイル読み込まれないんだろ？ あ、パス間違ってたみたいな事を防げるので、必ず入れといた方がいいと思う。

TODO Highlight

コード中に TODO: などを埋め込むと、そこを目立つように色付けしてくれる。普通にコメントアウトで TODO: を埋め込んでも見逃しがちだけど、これを入れておくとパッと目について忘れない。他にも自分でキーワードを設定して色付けすることも可能。

Todo Tree

TODO, FIXME がついているものを、ツリー状に表示してくれる。TODO付けたけどを忘れてた、みたいなことを防げる。

zenkaku

全角スペースをちょっと目立つようにしてくれる。全角スペースを入れてしまったことに気づかず、無駄な時間を過ごすという事故を防げる。

Git関連

Git History

Git Graph より詳しくコミット履歴を見れる。

GitLens — Git supercharged

コードの各行を、誰がいつどんな変更をしたかを表示してくれる。

Git Graph

コミット履歴とかを Graph で表示してくれる。Source Tree とほぼ同じ。

Flutter

Flutter

Flutter を使用する = 必須。

Dart

Flutter を使用する = 必須。

Ruby

Ruby

Ruby の構文とかをチェックしてくれる。普段 Rails を触ることが多いけど、改めて入ってる拡張機能見てみたら Ruby 関連はこれしか入ってなかった。

フロント

IntelliSense for CSS class names in HTML

CSS のクラス名を自動保管してくれる。

Markdown

Markdown All in One

Markdown を使うなら脳死で入れていい。番号付きリスト操作中の改行に、自動で番号振ってくれたりとかはもちろん、目次の生成とかもしてくれる。

Markdown Preview Github Styling

Markdown Preview を見る時の表示を Github風にしてくれる。ローカルでの表示と違う！ というのを防げる。

Markdown PDF

名前の通り、Mrakdown形式で作成したファイルを PDF に出力してくれる。他にも html, json, jpeg なども出力してくれる。

入れてるけどあんまり使ってない

Git Blame

各行の最終コミットを見れる。ただ「Git History」と「GitLens」で事足りてる気がする。

Edit csv

csv を色々編集できるようになる。

その他

Draw.io Integration

VScode で Draw.io を使えるようになる。

Rainbow CSV

csv の中身をカンマ区切りで色付けしてくれる。入れるだけで見違えるように見やすくなる。

Remote - SSH

リモートサーバー（AWSなど）に入れる。一応 ~.ssh/config に書かれているものにログインできる。リモートサーバーをいじる時もVScode の使って快適に操作したいという時におすすめ。ただしあくまでリモートサーバーを弄るので、乱用はやめたほうがいいと思う。個人的にも出来るだけ使わないようにしてる。（裏を返せばそれだけ便利ということ）

Remote - Containers

Dockerコンテナを色々いじれるようになる。コンテナ内部をvscode上で開けるのがとても良い。個人的には、コンテナ内部の挙動がおかしいぞ？ ファイルどうなってるんだ？ 見たいな時に使うことが多い。

Live Share

VScode を共有で操作・観覧できる。
例えばペアプロとかする時、今までだと Zoom や Slack で画面共有して行うとかしていたと思う。でもこれを使えば相手のVScode を直接 いじれる。初めて使った時は感動した。

shell-format

shell のフォーマッター。シェルスクリプトを触る人は、とりあえず入れて整えてもらうといいかと。

GitHub Pull Requests and Issues

Github に直接 PR 出せるようになるらしい。

まとめ中に見つけた良さげなやつ

VSCodeをカッコよくするTheme拡張7つ

（拡張機能じゃなくて記事じゃんというツッコミはなしで）VScode のテーマを簡単にまとめてくれている。今のところデフォルトで十分満足しているけど、面白そうなので今度見てみようと思う。

まとめ

意外と言語やフレームワーク関連の拡張機能がなくて自分でもびっくりした。でも探してもみてもいい感じのないし、あってもインストール数が少なかったり、評価が低かったりしたのでそういうモノなのかもしれない。
他にもこれ便利だよとかあったらコメントで教えてください。