【WEB制作】VSCodeに入れるプラグインは8個だけ【初心者向け】

WEB制作初心者

VSCodeに入れるおすすめプラグインって何?

VSCodeに入れるおすすめなプラグインって何?
WEB制作を始めたばかりの初心者です。
作業を効率化できるプラグインを教えて下さい。

こんなお悩みを解決します。

✔︎本記事の内容

  • VSCodeに入れるプラグインは8個だけ

WEB制作で人気なエディタVSCode。

VSCodeに入れると作業がとてもはかどる
初心者におすすめなプラグインを8つ紹介しますね。

副業でWEB制作をしている方
エンジニア転職を目指す方に必見です。

VSCodeに入れるプラグインは8個だけ

WEB制作を始めたばかりの人に
「これは入れるべき」なプラグインを8つ紹介。

まずは、VSCodeの概要

  • 無料
  • Mac・Windows対応
  • ローカルで開発できる
  • WEB制作で人気エディタ
  • VSCodeのインストールはこちら

プラグインのインストール方法

STEP.1
英語検索

本記事で紹介するプラグインを
名前検索から英語で検索しましょう。

STEP.2
インストール

確認後、インストールします。
その後、必ず再起動しましょう。

おすすめなプラグイン8つ

さて、VSCodeはインストールできましたか?

「YES」の方は、上記の方法に沿って
プラグインをインストールしていきましょう。

あと
インストール後の再起動も忘れずにね。

1.Japanese Language Pack for Visual Studio Code

VSCodeを日本語化する機能です。
基本、プログラミングは英語ですので。

初めて触る方だと
慣れていないので日本語化をおすすめします。

これだけで、作業効率が上がりますので
必ずインストールしておきましょう。

>> Japanese Language Pack for Visual Studio Code

2.Live Server

Chromeブラウザにおいて
リアルタイムでコードの結果が確認できます。

こんな感じでコーディングしたけど、実際にどんな風にサイトが作れてるのかな?

このように疑問に感じると思います。
そんなときに役立つのがLiveServer。

こまめにサイトの出来栄えを確認しながら
コーディングできるので、入れとくべき。

>> Live Server

3.Auto Rename Tag

HTMLのタグ名を直すときに
ペアのタグも自動的に修正してくれる機能。

タグが多くて複雑な入れ子になると
ペアもわかりづらくなってしまいます。

そんな時役立つのがコレ。

タグの入力ミスは
エラーの原因で多いです。

>> Auto Rename Tag

4.HTMLHint

HTMLのエラー箇所を表示し
修正ヒントを与えてくれる機能。

たくさんコードを打っていると
どこかで些細なミスをしがちです。

たとえば、入力した文字のミス。
半角小文字を全角で入力してたりなど。

1文字でも違うとエラーになるので
そんなミスを教えてくれる優れもの。

>> HTMLHint

5.IntelliSense for CSS class names in HTML

HTMLにclassを指定するとき
複数の候補を表示してくれる機能。

HTMLのクラス入力が楽になります。

同じクラスを何度も入力するのはわりと面倒。
時間と労力の無駄なので、入れて損なし。

>> IntelliSense for CSS class names in HTML

6.zenkaku

全角スペースを可視化してくれる機能。

初心者によくあるエラーが
スペース入力を誤って全角入力していること。

全角入力は基本的にエラーの原因です。
必ず、半角で入力しましょう。

スペースは見えない、見えずらいのですが
「ここは全角スペースだよ」と教えてくれて、かなり便利です。

>> zenkaku

7.indent-rainbow

インデントスペースが配色され
コードがかなり見やすくなります。

コードがグチャグチャで汚いな...

そんなときは、インデントを整理するだけで
かなりスッキリします。

インデントに色がつくことで
コードをきれいに書く癖もつきますので、こちらもおすすめ。

>> indent-rainbow

8.Code Spell Checker

コードのスペルミスをしていた場合
グリーンの波線が表示されます。

WEB制作を始めたばかりだと
スペルミスも多くなりがち。

「マジでバグってる原因がわかんねー」ってとき、単純にスペルミスだった...というときが多い。

時間をかなり無駄にするので
こちらも入れておきましょう。

>> Code Spell Checker

まとめ:今回紹介したプラグイン8つ

というわけで、今回はここまで。
最後に、本記事で紹介した便利なプラグインを列挙します。

最低限、上記を入れておくと
コーディング作業が捗ります。

WEB制作はわりと楽しいのですが
バグとの戦いもあって時間を無駄にしがち。

バグによる無駄な時間を無くしたいので
プラグインを入れて、効率的にコーディングライフを送りましょう。