こんにちは！スギモトです！
Visual Studio Codeをご存知でしょうか。
Visual Studio Code（VSCode）はMicrosoftが提供しているOSSエディターで、標準機能だけでバリバリ開発できちゃううえに拡張機能が豊富ということで近年人気が出てきました。
UIがシンプルで動作が軽量かつ安定したエディターって意外と思い当たらないですよね。
有名どころではAtom、Sublime Text、Bracketsなどでしょうか。
自分は数年前からフロントエンドの案件に関わるようになって人気のエディターを一通り触ってみたのですが、今は専らVSCodeです。（一時期、Bracketsと併用していました）
そこで、今回はVisual Studio Code（VSCode）でフロントエンド開発をするにあたり、個人的にまず間違いなく入れておいたほうが良いと思っている拡張機能をご紹介したいと思います。
目次
フロントエンド開発で使ってもらいたいVisual Studio Code（VSCode）拡張機能５選
１．Prettier – Code formatter
コードフォーマッターです。
Prettier自体はNode.js上で動作しているようなのでVSCodeの拡張機能だけでなく、色々なシーンで利用できるようになっています。ですので、モダンなフロントエンド周りをやっているJavascript系の方にとっては当たり前かもしれません。まだ導入していない方はぜひ！
ここ何年かESLint（TSLint）の導入やら管理やらに苦しめられていたのですが、Prettierを担当していた小さなプロジェクトで使ってみたところ、もう離れられなくなりました。
ESLintと併用することも可能なので、ESLintのプロジェクトにもおすすめです。
２．Debugger for Chrome
Chromeでデバッグできるようになる拡張機能です。
VSCode上でブレークポイントの設定やステップ実行、コールスタックの確認などができるようになります。
設定ファイルは当然のようにJSONですのでご安心ください。
なぜか標準機能としてVSCodeにはこの手の機能がないので、導入は必須だと思います。
詳細は公式サイトを参照してください。
３．Git History(git log)
Gitのコミットログを可視化してくれる拡張機能です。
フロントエンドの開発ですと今やソース管理はGitで行うことがほとんどだと思います。
Gitにもコミットログを見るコマンドが用意されていますが、拡張機能を使えば１クリックで済むので入れておいて損はありません。
自分のプロジェクトではGit初心者には必ず入れてもらって、Gitを使った開発の進め方をコミットログを通して覚えてもらっています。
４．Simple icon theme
アイコンテーマです。
別にこれでなくてもいいのですが周りで利用している人が多かったので、乗っかって導入しています。
VSCodeのデフォルトだと一見わかりにくいアイコンもあるので、何か適応しておくといいかもしれません。
拡張子別にアイコンを付けてくれます。
５．Project Manajer
複数のプロジェクトを１クリックで切り替えられる拡張機能です。
少し前のバージョンまでVSCodeは複数プロジェクト（フォルダ）を一度に表示させることができなかったので重宝していました。
まとめ
VSCodeは毎月バージョンアップがあります。
どんどんブラッシュアップされていますので、気になっているかたはぜひ試してみてください！
