とりあえずこれだけは入れとけ、vscode拡張機能おすすめ5選

はい!今回は私が業務でも使用しているテキストエディタであるVisual Studio Code通称vscodeのおすすめ拡張機能5選を紹介したいと思います!

レッツゴー!!

indent-rainbow

1つ目はindent-rainbowです!!

これは言語や業務内容に関わらず必須の拡張機能だと思います!!

公式サイトです!

この拡張機能は言葉通りインデントをレインボーで表示してくれるというものです!

公式サイトにも載っているんですが、こんな感じでレインボーで表示してくれるんですね!(見づらくてごめんなさい…)

いやー地味に便利!地味にコードが見やすくなる!

こういう地味なやつがなんだかんだで一番長く使えますからね!

地味最高!!

まあこんなところで1つ目はindent-rainbowでした!!

gitLens

2つ目はgitLensです!!

皆さんおなじみのバージョン管理といえばのgit様の拡張機能ですね!

vscodeにはたくさんのgit関連の拡張機能があるのですが、今回は特におすすめしたいgitLensを選ばさせていただきました!

公式サイトです!

こちらはざっくりいうと選択した場所を誰がいつどんなコミットメッセージで変更したのかが分かるというものです!

こんな感じで、

ユーザー名、コミット日時、コミットメッセージ

というフォーマットで表示されるんです!

これで誰がバグを起こしたか犯人探しできるぞ!と思ったそこのあなた

これに出会ったときの私と同じです、物騒なのでやめてくださいねw

確かに犯人探しもできるんですが(誰か一人を責めるなんて絶対ダメですよ!)、

これがあることで誰に聞けば詳しいことが分かるかが知れるというメリットがあるんですね!

犯人探しではなく、実装してくれたヒーロー探しに使うのです!

まあなんだかんだで、

Aさん
Aさん

ここってBくんがやったみたいなんだけど、バグの原因になっているぽいから調査してもらってもいい?

Bくん
Bくん

確かに私が実装しました…

すぐに調査いたします!(うん?なんで俺がやったってわかったんだ?歴が長くなると超能力でも使えるのか、怖いめちゃくちゃ怖い…)

みたいなことの方が多いんですけどねー

まあなにはともあれ、誰がいつ頃実装したのかがテキストエディタ上でひと目で分かるので作業効率アップに繋がると思います!!

Project Manager

3つ目はProject Managerです!

こちらはvscode上でプロジェクト管理をしてくれるものです!

公式サイトです!

実態としては、ローカル上のディレクトリを任意の名前で登録できて、それをショートカット使うことで瞬時に開けると言った感じです!

こちらは複数案件など担当するは入れておいて損はないと思います!

機能の使い方やショートカット設定方法はこちらの記事がわかりやすいかと思います!

ちなみにこの記事に載っている拡張機能も便利なものばかりですのでぜひ使ってみてくださいねー!

Rainbow CSV

4つ目はRainbow CSVです!

こちらは言葉通りcsvをカンマとかの区切りごとにフォントカラー変えてレインボーで表示してくれるというものです!

いやーさっきからレインボー好きですねw

これも地味に便利なんですよ!

公式サイトです!

csvって、データ抽出とかデータ分析とかで使用したり、DBに読み込ませるデフォルトデータをcsvで記述したりとまあ色々な使用用途があるのですが、

この拡張機能を入れていないとただ半角カンマ , ← これですよこんな小さなものが区切りになっているので見れたもんじゃないんですよね

エクセルでみればいいんですけど、作業をvscodeでしているときにcsvだけエクセルで開くのって面倒なんですよね…

なんか文字コードが違うと文字化けしたりとか、そもそも文字コードとかなんなんだよもう一つにしろよ、複数あるから文字化けしてますとかになるんだろ、これじゃあ世界平和も……….

まあ愚痴はこの辺にしておいて、とにかくテキストエディタでそのまま見ると見にくいのでこの拡張機能が一役買うという感じです!!

いよいよ次がラストです!張り切っていきましょう!!

zenkaku

ラストはzenkakuです!!

ローマ字読みさせてますねー怪しいですねーw

公式サイトです!

これもほんと地味なんですよ、拡張機能でこういう表示してくれているんだということを忘れそうになるくらいには地味なんですよ!

でもやっぱりそれくらいがいいんですよね!

この拡張機能は非常にシンプルで、コードの中に全角スペースを発見したら地味な感じで知らせてくれるというものです!

わかりますか?テストの前は半角スペースで後ろは全角スペースを入れているんです!

全角の方にはグレーぽいボックスが出現していますね!

意外と幅だけでは半角か全角かって見分けづらかったりするんですよね!

それでテキストの一部として全角スペースが入るのはなんの問題もないんですが、関数内とかに紛れ込むとエラーにつながるので全角スペースは見つける必要があるんですね!

ちなみにインストールして再起動しても使えない場合があります!そんなときはこちらの記事を参考に有効にしてみてください!

まとめ

ここまでお読みいただきありがとうございます!

今回はvscodeのおすすめ拡張機能5選を発表させていただきました!

テキストエディタに限らずweb系のサービスは拡張機能を入れたりするだけでぐーんと使いやすくなるので、これを機に普段お使いのサービスについてもより良い使い方がないか検討してみてください!!

それではみなさん、素敵なvscodeライフをお送りください〜!!