【Web制作者向け】サイト運用コーダーがオススメするVScode拡張機能8選

今回は、サイト運用コーダーが日々コーディングする際に便利だと感じたVScodeの拡張機能を8つご紹介します。

1.Japanese Language Pack for Visual Studio Code

VScodeを日本語化してくれる拡張機能です。初めてエディタを使うという方や、英語が苦手・抵抗がある人にはマストかと思います。

2.vscode-icons

各ファイルの拡張子に応じて、ファイルの先頭にアイコンを表示してくれる拡張機能です。シンプルかつ色分けがされているので、直感的に操作ができるようになります。

3.indent-rainbow

インデントの階層ごとに色分けをしてくれる拡張機能です。視認性が上がるので、エラーを減らすのに役立ちます。

4.Prettier - Code formatter

ソースコードを自動で整形してくれる拡張機能です。コードを保存するタイミングで自動で整形してくれるので、効率アップにも繋がります。特にサイト運用では複数人が同じファイルを触ることが多いので、チーム内で整形ルールの設定を揃えておくとメンテナンス性も上がります。

5.Auto Rename Tag

HTMLの開きタグと閉じタグを連動させてくれる拡張機能です。開きタグを修正すると自動で閉じタグも修正してくれます。記述量が半分で済みますし、対応するタグを間違えたり、修正忘れを防ぐことにも繋がります。

6.HTMLHint

HTMLの文法エラーを検知してくれる拡張機能です。エラーがあるとコード上に波線が表示され、カーソルを合わせると詳細が見られます。また、エディタ内下部にエラー内容一覧を出してくれるので、そちらをクリックするとエラー箇所に直接飛ぶこともできます。

7.Trailing Spaces

行末や空行にある余計なスペースを赤くハイライトしてくれる拡張機能です。スペースを一括で削除もしてくれます。余計なスペースがあってもコードの動作的には問題ありませんが、編集時のカーソル移動で邪魔になったりするので僕は重宝しています。

8.zenkaku

全角スペースをハイライトしてくれる拡張機能です。プログラミングにおいて全角スペースは厳禁かつ、ミスしていてもなかなか気づきにくい（見つけにくい）ところなので、こういったケアレスミスをカバーしてくれる拡張機能は嬉しいですね。

さいごに

いかがだったでしょうか。
VScodeにはまだまだ拡張機能は豊富にありますし、人によって使いやすい使いにくいは様々だと思うので、今回紹介したもの以外も色々試してみることをオススメします！自分仕様のVScodeで作業効率アップしていきましょう！

最後までご覧いただきありがとうございました！