エンジニアっぽくないよねってよく言われます。どうもプラスジャムの磯部です。自分でもエンジニアっぽくないと思います。
そんな私ですが、今日はエンジニアっぽい記事を書くぞ！ということでエンジニアであれば誰もが使うエディター、そして一番使われているVSCodeのおすすめプラグインを11個紹介していきます。

この記事を読んで作業効率上げましょう🌵

Prettier - Code formatter

言わずもがなのプラグインではないでしょうか。
コードフォーマッターと呼ばれ、コードを整形=読みやすく整えてくれるプラグインです。VSCodeの設定であるAuto saveと組み合わせると保存した時に自動でフォーマッターが聞いてくれるので大変便利です。チーム開発には必須のプラグインです。

indent-rainbow

フォーマッター等でインデントを調整してくれますが、インデントが深くなると見辛くなってきます。それを色で可視化してくれることで見やすく保ってくれるプラグインです。

Auto Close Tag

こちらは自動でタグを閉じてくれるプラグインです。
こういった小さい作業の積み重ねでコーディングの速さが変わってくるのでぜひ入れてみてください。

参照：Visual Studio Code Marketplace - Auto Close Tag

Auto Rename Tag

こちらはタグを書き換えた時に自動で閉じタグのネームも変えてくれる便利なプラグインとなっています。

参照：Visual Studio Code Marketplace - Auto Rename Tag

Code Spell Checker

ラグインの名前の如く、コード内で英単語のスペルをチェックしてくれます。英語に苦手意識のある日本人にとってはありがたい機能です。
関数などは読んですぐ理解できる名前にしたいですが、肝心の名前が間違っていると意味がわからなくります。そんな時でも目印で知らせてくれるのでありがたい、重宝するプラグインとなっています。

GitLens

このプラグインはGitの強力な機能をVS Code内で直接利用できるようにし、開発者がソースコードの履歴や変更をより深く理解するのを助けてくれます。

Image Preview

このプラグインはソースコード上の<img>タグに対し、画像のパスから画像取得し表示してくれる画期的なものになっています。これだけでもかなり助かるタイミングがあるので、ちょっとした時に恩恵を受けます。

CSScomb

 CSSのプロパティ順を統一化してくれるプラグインです。
個人個人で書き方の癖がありますが、毎度並び順を整えてくれることでチーム開発でも効率的にミスなく開発できることにつながるのでおすすめです。

vscode-icons

業務に直結するかと言われるとそうではないかもしれないのですが「開発にも彩りを。」ということで入れてみると見栄えも良くなりますし、見慣れてくるとサッとファイルを見つけられるので入れておいても良いかもしれません。

Gitmoji

GitへCommitする際に絵文字を頭文字につけることによってCommitの種別を判断しやすくするためのものです。チーム開発に役に立ちます。
例えば、hotfixは🚑、Improve performanceは⚡️など見た目で判断できたりします。

参照：Visual Studio Code Marketplace - Gitmoji

GitHub Copilot

今やなくてはならない存在のパートナーとなりましたが、有料なので最後に持ってきました。コメントアウトで関数の内容を詳しく説明するもよし、とりあえず書いているとコードの前後関係で予測してくれる、コミットを差分から自動で考えてくれるなど「Tabキー様様」状態のプラグインです。

月額10$(現在価格でおおよそ1500円)を渋っている場合ではありません。

まとめ

いかがでしたでしょうか。見たことはあるけど使ったことなかった、知らなかったから使ってみようとなっていただければ幸いです。

AIのおかげでどんどん作業効率が上がっていくと嬉しいなと思うばかりです。もし他にもおすすめのプラグインがあればぜひコメントで教えてください！

お読みいただきありがとうございました！🍻

✙

プラスジャムはWeb制作会社です。
ウェブサイト制作、システム開発、Webマーケティングなど、さまざまな課題解決やアイデアを具現化するWebソリューションを提案・提供しています。

noteでプラスジャムを見つけてくださった方は、お時間あればコーポレートサイトや他の記事もご覧いただければ幸いです。

＼コーポレートサイトはこちら／

＼いつもはこんな記事書いてます／