VScodeで使える必要最低限のオススメ拡張機能6選を紹介!

皆さんはどのようなテキストエディタを使っていますか?

ProgateでHTMLやCSSを学ぶときは、Progate内で全て完結していましたが、自分のパソコンでコードを書くときはテキストエディタが必要です。

そこで僕がオススメしているのが、Visual Studio Code(VScode)です。

 

今回は、VScodeで使えるオススメの拡張機能6つを紹介していこうと思います!

オススメの拡張機能

Japanese Language Pack for Visual Studio

まず一つ目は、「Japanese Language Pack for Visual Studio」です。

これは、VScodeを日本語にする拡張機能です。

VScodeを使用する上で、この拡張機能は必須なので、まずはこれをインストールしましょう。

Auto Rename Tag

2つ目は、「Auto Rename Tag」です。

これは例えば、開始タグをdiv→pに変更した際に、自動で閉じタグのタイプも同じに変えてくれる拡張機能です。閉じタグを変更した際も、同様に開始タグが自動で変更されます。

時々別のところが変わってしまうので、ちょっと注意が必要です。

CSSTree validator

3つ目は、「CSSTree validator」です。

これは、CSSの文法をチェックしてくれる拡張機能です。

これもかなり便利なものなので、インストールしましょう。

HTMLHint

4つ目は、「HTMLHint」です。

これは、3つ目のCSSTree validatorと似ていて、HTMLの文法をチェックしてくれる拡張機能です。

コーディング初期も、コーディングを経験していても、HTML/CSSの文法をチェックしてくれる機能は便利なので、インストールしましょう。

IntelliSense for CSS class names in HTML

5つ目は、「IntelliSense for CSS class names in HTML」です。

これは、CSSクラスを指定するときに入力補完してくれる拡張機能です。

このプラグインを入れると、ワークスペースの中のCSSを読み込んでHTML上でクラス指定するときに入力候補を表示してくれるようになります。

自分で定義したCSSでも、量が増えてくるとどんな名前にしたか忘れてきてしまうことがあるのですが、このプラグインを入れておけば、自分で定義したCSSでもスムーズにクラスを指定できるようになると思います。

zankaku

6つ目は、「zenkaku」です。

これは、エディタでは全て半角じゃないとエラーになってしまうのですが、全角の部分をわかりやすく表示してくれる拡張機能です。

コーディング初期は、全角スペースを打ってしまうことがよくあり、コードの変更が反映されないことがよく起きます。

なので、このプラグインは必須です。

まとめ

今回は、VScodeで必要最低限の拡張機能6つを紹介しました。

テキストエディタは他にもAtomやSublime Textなどありますが、僕的にはVScodeが使いやすいので使用しています。

VScodeをインストールしたら、ぜひこの6つのプラグインをインストールしましょう。

他にもインストールしたほうがいい拡張機能があれば、随時更新していこうと思います。

NO IMAGE

YouTubeチャンネル「TAISEIBLOG」

20歳の大学2年生、坂井大誠です。 半年前から独学で動画編集を学び、普段は動画編集で稼いでいます。 いろんな情報発信活動をしているので、良かったらチャンネル登録よろしくお願いします!

CTR IMG