皆さんこんばんにちは、ユウです。
今回は、前回紹介したVisual Studio Codeの拡張機能の紹介をしていきたいと思います。
もし、まだ見ていないという方は下のリンクから見ていただくとありがたいです。
前編と後編あわせて9つの拡張機能を紹介しています少しだけ長くなると思いますがお付き合い下さい。
今回の記事を読むメリット
・Visual Studio Codeの必要な拡張機能がわかる
前回のおさらい
Visual Studio Codeはもともと、Web制作やプログラミングをするために様々な機能が最初から存在しています。
それだけでもコードを書いていけるのですが、Visual Studio Codeの拡張機能を入れる事により初期設定より、断然自分自身が使いやすい環境を作ることが出来ます。
ですから、今回は私がWeb制作する際に使っている拡張機能を、紹介していきたいと思います。 Web制作するうえで”時短”はとても大事です。
皆さんに合った拡張機能を見つける足がかりしてもらえると幸いです。
前回紹介した拡張機能はこちらです。
・Japanese Language Pack for Visual Studio Code
・HTML Snippets
・Auto Close Tag
・Auto Rename Tag
Visual Studio Codeの拡張機能
では今回もVisual Studio Codeの拡張機能の名前と、その機能など紹介していきたいと思います。
今回紹介するのは以下の通りです。
・htmltagwrap
・HTMLHint
・Intellisense for CSS class names in HTML
・CSSTree validator
・Live Server
htmltagwrap
この機能は文章をタグで囲みたいときに、とても便利な機能になります。
途中で他のタグでをつけたいときには大変便利な機能となります。
使い方としては、
- タグで囲みたい部分をマウスや「Shift」+「方向キー」で選択します。
- ショートカットキー:「Alt」＋「W」を押すと選択部分がpタグで囲まれます。
- もしdivタグで囲みたいのであればpタグが点滅するのでその状態で消さなくてもdivと入力してもらえれば良いです。
下の画像では上の手順でやってみています。
HTMLHint
この機能はhtmlファイルを編集しているときに、間違いがあるとカスタマイズ可能なルールに基づきその場で警告を出してくれます。
カスタマイズ可能というのはきちんとタグで囲んでいるのかや終了タグはきちんとスラッシュがついているのかなどです。
この機能があるとコードミスが格段に下がるのでおすすめです。
下の画像はスラッシュ忘れをしてしまった（消した）場合どのようになるのかを確かめています。
IntelliSense for CSS class names in HTML
この機能はCSSファイルを自動で読み込んで、HTMLでクラス名を入力する時にCSSファイルに存在するクラス名の中から候補を出してくれます。
Web制作をしていくと、自分で作ったクラス名がどんどん多くなっていきます。
そうすると設定したいクラス名を忘れてしまうのですが、この機能があるとわざわざCSSファイルに戻って、クラス名を確認する行動などが減るので時短になります。
下の1枚目の画像はCSSファイルで、クラス名をdog,cat,wolf,monkeyと設定していることを示しています。クラスの中身の数値などは気にしなくて大丈夫です。
2枚目の画像では実際にhtmlファイルでクラスを記述するときに、候補を出していることが確認できます。
CSSTree validator
この機能はインストールするだけで、CSSコードに間違ってプロパティと値が記入された場合強調表示してくれます。
私の場合タイピングミスがかなりあるので、お世話になってしまっています（笑）。
ですが、これがないとどこが間違っているのか探すところから始めないといけないのでかなり役立つ機能です。
下の画像ではheightのスペルミスを発生させた場合に、この機能により黄色い波線で強調表示されスペルを直すと強調表示がなくなるということが分かります。
Live Server
この機能はhtmlファイルを更新すると、自動でWebブラウザを更新してくれる機能です。
htmlファイルを更新した後、普段はいちいちブラウザの更新ボタンを押して変更内容がきちんと表現できているか確認するのですが、この機能があると更新ボタンを押さなくて済むので、とても便利になり開発が簡単になります。
機能の使い方を紹介していくのですが、一応今回は以前の記事で作ったhtmlファイルとcssファイルを使って行きたいと思います。
興味がある方はそちらの記事も読んでみて下さい。
パソコンに詳しくない方にも分かるように、HTMLとCSSについて書いているので初心者の方にぜひ読んでほしい記事となっています。
この機能の使い方は、
- まず、フォルダを作ります（フォルダの名前は特に指定は無いです）。
- そのフォルダの中にhtmlファイルとcssファイルを入れます。
- Visual Studio Codeを開きファイル＞フォルダを開く＞作成したフォルダを選択という順でフォルダを開きます。ファイルではこの機能は使えません。
もし、以前の記事からのhtmlファイルを使う人は以下の分に書き換えて下さい。
今回は機能の紹介なのでコピペで十分です。
・そして右下に「Go Live」と書かれているボタンが生成されるのでそこをクリックするとブラウザに作成したhtmlファイルが表示されると思います。
これで完了です。
それでは試してみましょう。下の画像ではHello Worldと記述し、保存をするだけでブラウザの表示も変わることが確認できます。
後編の拡張機能のまとめ
・htmltagwrapは文章をタグで囲む
・HTMLHintはミスを警告してくれる
・Intellisense for CSS class names in HTMLはクラスの名前の候補を教えてくれる
・CSSTree validatorはCSSのプロパティ値を間違えたら警告してくれる
・Live Serverは更新ボタンを押さなくて済む
最後に
以上が、私がWeb制作に使用している拡張機能になります。
前編後編あわせて9つの拡張機能を紹介してきたのですが、Visual Studio Codeの拡張機能は今回紹介したもの以外にも多くあります。
今回は私に合った拡張機能を紹介したので、皆さんにとってこれらが最適解なのか分かりません。
ですから、今回の記事は参考程度にして自分に合った拡張機能を探し、よりよい環境作りを目指しましょう。
拡張機能は”時短”に繋がる大切なものです少しだけ時間をかけても良いと私は思うのでしっかりと考えて入れていくべきだと思います。
長くなってしまいましたが、最後まで読んでいただきありがとうございます。
