みなさんVSCodeを知っていますか？
正式名称をVisual Studio Code、Microsoftが提供する無償のコードエディタです。

開発者にとっては定番ともいえるこのVSCode。
多くの開発者に選ばれる理由には、軽量かつ高速な動作、カスタマイズ性の高さ、そしてなんといっても拡張機能の豊富さがあります。

未経験からシステムエンジニアになり、VSCodeを使い始めてはや１年。
この１年で「これ、いいじゃん。」と思ったVSCodeの拡張機能を、個人的な重要度別にご紹介しようと思います！

重要度☆☆☆
～必要不可欠～

『Insert <br> Tag』

Shift+Enterで<br>を挿入できます。
通常の改行と同じ感覚で<br>を挿入できるのでめちゃめちゃ便利。

『indent-rainbow』

インデントを色分けして表示してくれるので、ものすごく見やすい。

『Bracket Pair Colorization Toggler』

対応する括弧ごとに色をつけて表示してくれます。
JavaScriptをいじっているときなんかは必須の機能です。

『Trailing Spaces』

変なところに混じった半角スペースって気付きにくいですよね。特に行末。
そんな行末や行頭の半角スペースをハイライトで表示してくれます。

『Kanagawa Flavors』

エディタのカラーテーマに関する拡張機能です。
このテーマを基にした配色が一番しっくりきていて、正直もうこのテーマ以外は見にくささえ感じます。

重要度☆☆
～使った方がいい～

『htmltagwrap』

テキストの一部をやっぱりHTMLタグで囲みたい。そんな時ありますよね。
テキストを選択してAlt+Wを押せば選択範囲の前後にタグが挿入され、そのまま編集も出来ます。

『HTML CSS Support』

CSSで定義されているclass名やid名の入力候補を補完してくれる機能です。

『Indenticator』

今見ている部分のインデントのレベルをわかりやすく表示してくれます。

重要度☆
～あったらまあ便利～

『Japanese Language Pack for Visual Studio Code』

VSCodeはデフォルトでは表示言語が英語になっていますが、それを日本語に変更することができる拡張機能です。

『Polacode』

ソースコードの選択した範囲を画像にしてくれます。
コードを共有するときに便利。

まとめ

いかがでしたか？
有名な拡張機能も多いと思いますが、私が使っている拡張機能をざっくり紹介してみました。

VSCodeを使い始めたばかりでどんな拡張機能があるかわからないという方、もっと効率的に作業を進めたいという方、是非使ってみてください！

▼ システムフォワードについてもっと知りたい！と思ったら ▼

🔵 マシュマロで匿名の質問を受け付けています 🔵

22卒・23卒・24卒社員のみが質問内容を拝見し、疑問にお答えします！
説明会では聞きづらい内容や、そこまで志望度は高くないけど聞いてみたいことがある方はぜひこちらから質問してください。