WEB制作初心者
VSCodeに入れるおすすめなプラグインって何?
VSCodeに入れるおすすめなプラグインって何?
WEB制作を始めたばかりの初心者です。
作業を効率化できるプラグインを教えて下さい。
こんなお悩みを解決します。
✔︎本記事の内容
- VSCodeに入れるプラグインは8個だけ
WEB制作で人気なエディタVSCode。
VSCodeに入れると作業がとてもはかどる
初心者におすすめなプラグインを8つ紹介しますね。
副業でWEB制作をしている方
エンジニア転職を目指す方に必見です。
VSCodeに入れるプラグインは8個だけ
WEB制作を始めたばかりの人に
「これは入れるべき」なプラグインを8つ紹介。
まずは、VSCodeの概要
- 無料
- Mac・Windows対応
- ローカルで開発できる
- WEB制作で人気エディタ
- VSCodeのインストールはこちら
プラグインのインストール方法
本記事で紹介するプラグインを
名前検索から英語で検索しましょう。
確認後、インストールします。
その後、必ず再起動しましょう。
おすすめなプラグイン8つ
さて、VSCodeはインストールできましたか?
「YES」の方は、上記の方法に沿って
プラグインをインストールしていきましょう。
あと
インストール後の再起動も忘れずにね。
1.Japanese Language Pack for Visual Studio Code
VSCodeを日本語化する機能です。
基本、プログラミングは英語ですので。
初めて触る方だと
慣れていないので日本語化をおすすめします。
これだけで、作業効率が上がりますので
必ずインストールしておきましょう。
>> Japanese Language Pack for Visual Studio Code
2.Live Server
Chromeブラウザにおいて
リアルタイムでコードの結果が確認できます。
こんな感じでコーディングしたけど、実際にどんな風にサイトが作れてるのかな?
このように疑問に感じると思います。
そんなときに役立つのがLiveServer。
こまめにサイトの出来栄えを確認しながら
コーディングできるので、入れとくべき。
3.Auto Rename Tag
HTMLのタグ名を直すときに
ペアのタグも自動的に修正してくれる機能。
タグが多くて複雑な入れ子になると
ペアもわかりづらくなってしまいます。
そんな時役立つのがコレ。
タグの入力ミスは
エラーの原因で多いです。
4.HTMLHint
HTMLのエラー箇所を表示し
修正ヒントを与えてくれる機能。
たくさんコードを打っていると
どこかで些細なミスをしがちです。
たとえば、入力した文字のミス。
半角小文字を全角で入力してたりなど。
1文字でも違うとエラーになるので
そんなミスを教えてくれる優れもの。
5.IntelliSense for CSS class names in HTML
HTMLにclassを指定するとき
複数の候補を表示してくれる機能。
HTMLのクラス入力が楽になります。
同じクラスを何度も入力するのはわりと面倒。
時間と労力の無駄なので、入れて損なし。
>> IntelliSense for CSS class names in HTML
6.zenkaku
全角スペースを可視化してくれる機能。
初心者によくあるエラーが
スペース入力を誤って全角入力していること。
全角入力は基本的にエラーの原因です。
必ず、半角で入力しましょう。
スペースは見えない、見えずらいのですが
「ここは全角スペースだよ」と教えてくれて、かなり便利です。
7.indent-rainbow
インデントスペースが配色され
コードがかなり見やすくなります。
コードがグチャグチャで汚いな...
そんなときは、インデントを整理するだけで
かなりスッキリします。
インデントに色がつくことで
コードをきれいに書く癖もつきますので、こちらもおすすめ。
8.Code Spell Checker
コードのスペルミスをしていた場合
グリーンの波線が表示されます。
WEB制作を始めたばかりだと
スペルミスも多くなりがち。
「マジでバグってる原因がわかんねー」ってとき、単純にスペルミスだった...というときが多い。
時間をかなり無駄にするので
こちらも入れておきましょう。
まとめ：今回紹介したプラグイン8つ
というわけで、今回はここまで。
最後に、本記事で紹介した便利なプラグインを列挙します。
- Japanese Language Pack for Visual Studio Code：日本語化
- Live Server：コードのブラウザ確認
- Auto Rename Tag：タグの自動修正
- HTMLHint：HTMLの修正を教えてくれる
- IntelliSense for CSS class names in HTML：HTMLのクラス補正
- zenkaku：全角スペースを可視化
- indent-rainbow：インデントスペースを配色
- Code Spell Checker：スペルミスの可視化
最低限、上記を入れておくと
コーディング作業が捗ります。
WEB制作はわりと楽しいのですが
バグとの戦いもあって時間を無駄にしがち。
バグによる無駄な時間を無くしたいので
プラグインを入れて、効率的にコーディングライフを送りましょう。
