VSCodeでコーディングする際に便利な拡張機能

2022年10月9日

VSCodeでは拡張機能をインストールすることで、HTMLやCSSの入力を楽にすることができます。BracketsなどのエディタでできていたことがVSCodeではできない!といったことも多いので、拡張機能をインストールして使いやすくしましょう。ここでは最低限入れておくと良いおすすめの拡張機能を紹介します。

Japanese Language Pack for VS Code

VSCodeのメニューなどを日本語で表示してくれる拡張機能です。

Japanese Language Pack for VS Code

この拡張機能の使い方は下記のページで紹介しています。

Live server

HTMLをブラウザでプレビューしてくれる拡張機能です。
プレビュー中にVSCode上でHTMLやCSSを編集し保存すると、ブラウザ上にすぐに反映されます。デザインを確認しながらの作業がしやすくなります。

Live server

この拡張機能の使い方は下記のページで紹介しています。

zenkaku

ソース内に全角スペースが入力されていた場合にハイライト表示してくれる拡張機能です。インストールするだけで使用できます。
全角スペースは画面上でどこにあるか確認することが難しく、ソース内に入力されているとエラーの原因になる事もあるので、この拡張機能で確認できるようにしましょう。

zenkaku

Auto Close Tag

タグを自動で閉じてくれる拡張機能です。
VSCodeの標準の機能でもタグを自動で閉じることはできますが、開始タグを入力した途端に閉じてしまいます。この拡張機能を使うとBracketsのように「</」を入力したときに自動で閉じることができます。ただしインストール後にいくつかの設定が必要です。

Auto Close Tag

この拡張機能の使い方は下記のページで紹介しています。

Auto Rename Tag

開始タグを修正すると、自動的に終了タグも修正してくれます。インストールするだけで使用できます。


Auto Rename Tag