この記事は、 KENTEM TechBlog アドベントカレンダー2025 7日目、12月7日の記事です。

こんにちは。KENTEMでフロントエンドエンジニア歴２年目のものです。
日々の開発業務を通じてエディタを使いやすく改良してきました。今回は、拡張機能について紹介したいと思います。
なお、私のプロジェクトではフロントエンドにReact, TypeScript, Less, バックエンドに C#, ASP.NET Core, インフラにAzureを使用しています。

拡張機能（MCPサーバも含む）

拡張機能一覧

Japanese Language Pack for Visual Studio Code

エディタを日本語化します。
C#

FEといいつつ、C#でAPIを書くこともあるのでC#の補完機能等はあると便利です。
Debugger for Firefox

Firefoxも動作保証対象なのでFirefoxでデバッグできる拡張機能は必要になってきます。
Jest

フロントエンドの単体テストでJestを採用しているので必要となる拡張機能です。最近はVitestがKENTEMでよく使用されているので置き換えを考えています。
ES7+ React/Redux/React-Native snippets

React関連のスニペットを提供してくれます。React開発者には強い味方になってくれます。
Comments Translate

カーソルを当てると翻訳してくれる拡張機能です。土木工事関連の単語が変数に使われることが多いので、翻訳機能には助けられています。
Code Spell Checker

綴りミスを検知します。綴りミスをなくすことは保守性を上げることにも寄与します。
Material Icon Theme

ファイルアイコンの種類を増やしてくれます。実務はファイル数がかなり多いのでファイル識別の手助けになります。
Project Manager

他のプロジェクトのコードをのぞいたり、プルリクのレビュー用、開発用とリポジトリを変える機会が多いのでボタン1つでリポジトリを変えれるこの拡張機能は便利です。
Error Lens

エラー行を強調表示してくるのでエラー個所がわかりやすくなります。
GithHub Pull Requests

プルリクのレビューをvscodeで行う際に使用しています。Code Spell Checkerと組み合わせるとスペルミス等に気づけます。
Trailing Spaces

余分な空白を強調表示してくれます。
Github Copilot

Copilotが使えるようになります。私は該当処理の検索や不具合修正などに使用しています。（KENTEMではCopilotの利用推進をしています）
Auto Rename Tag

要素の開始タグを変えるだけで一緒に閉じタグも変更してくれます。JSXでも使えるので便利です。
Bookmarks

コード内の特定の行に印を付けてくれます。膨大な量のコードの中からどこにどの処理があったか付箋として使用すると便利です。
SQL Server(mssql)

データベースが操作できるようになります。SSMS等もありますが、重いので私は拡張機能で使用しています。
XML Tools

私のプロジェクトでは公共工事等の情報をXMLファイルから取り込む機能が存在します。そのため開発や動作確認の際にXMLファイルをよく触るので成形してくれるこちらの拡張機能は便利です。
Azure CLI Tools

AzureをCLIで操作できます。FEとは？となりますがインフラの作成も経験します。
Bicep

Bicepファイルが作りやすくなります。IaCの導入調査をしているため、使用しています。
GitHub（MCPサーバ）

Copilotにissueを読ませて修正させるといったことが出来るようになります。

Tips

チーム開発では誰がなぜこのコードを書いたかを把握することが重要です。そのため、拡張機能として GitLens を導入すると便利です。
ただし、把握だけが目的であれば、vscode の設定で Git › Blame › Editor Decoration: Enabledにチェックを入れることで代替できるため、GitLensは導入していません。

まとめ

今回ご紹介した拡張機能は、私が日々の開発で実際に活用しているものばかりです。 vscodeは拡張機能次第で作業効率やコード品質を大きく向上させることができます。特にチーム開発では、コードの可読性やレビューのしやすさ、エラー検出の迅速化などが重要ですので、ぜひ自分の開発スタイルに合った拡張機能を取り入れてみてください。