個人的Visual Studio Codeおすすめプラグイン

2023.09.04 : Fujioka Mami

Coding

本日からナナサンブログに参戦いたします、フジオカと申します。
好きなものはJavascript、気になる言語はPython、仲良くなりたいのはFigmaです。
どうぞよろしくお願いします！

さて、入社してパソコンを入手してまずやることって決まってますよね。
そうです、Visual Studio Codeのプラグインのダウンロードです。
（他にも大事なことはたくさんあります）
そこで今回は個人的にオススメなVisual Studio Code（以下VS codeと省略表記します）のプラグインを紹介します！
記事掲載時点（2023年9月）の情報となりますのであらかじめご了承ください。

Japanese Language Pack for Visual Studio Code

https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja

VS codeを日本語化してくれます。
日本人のVS code使いさんはおそらくほぼほぼ入れているはず！
英語でも使えるようになりたいという気持ちはありますが、まずは仕事の効率の方が優先なのでVS codeを新規で入れた際は真っ先に入れてます。

Code Spell Checker

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

入力したコードや文章のスペルチェックをしてくれます。
辞書ファイルに登録されていないスペルに対して青の波線で表示してくれます。
気づかないうちにスペルミスしててスタイルが反映されない…というミスに気づきやすくなります。
辞書に登録されていない文字に反応するので、誤ってなくても人の名前とかライブラリ名とかにも反応しちゃいます。
気になるようであれば除外設定を入れたりsettings.jsonに除外の記述を入れることで出さないように設定することも可能です。

indent-rainbow

https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

インデントに色を着けて見やすくしてくれます。
VS codeのデフォルトで縦線色を付けてくれていますが、それよりも直感的にわかりやすいと思います。
たかがインデント、されどインデント。
インデントひとつで自分も自分以外の人にも見やすいコードになると思っているので気を付けていきたいですね。

Auto Rename Tag

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

タグ名を変更した時に自動で閉じタグも変更してくれます。
記事公開時点（2023年9月）でVS codeの設定「Editor.linkedEditing」でも同じことができますが、HTMLファイルにしか適用されないのでまだまだこちらのプラグインさんにはお世話になってます。
ちなみに全角で入力すると閉じタグも全角になります。
全角入力で変換した閉じタグは再度頭のタグ名を変えても自動で置き換わらないので
諦めて手で修正するかCtrlキー（commandキー）＋Zキーで一回元に戻してから修正しましょう。

PHP Intelephense

https://marketplace.visualstudio.com/items?itemName=bmewburn.vscode-intelephense-client

PHPでのコーディングの際にコード補完をしてくれます。
PHPファイルをコーディングすることが主なのでこちらのプラグインにはとても助けてもらっています。
導入の際にはVS codeのPHPサポートを無効にするのを忘れないように注意です。
https://github.com/bmewburn/vscode-intelephense#quick-start