プログラミング

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つのプラグインをインストールしましょう。

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

Macで日本語設定にした後にRubymineが開かなくなった時の対処法前のページ

YouTubeの動画編集に必要なパソコンのスペックはどれくらいか?次のページ

関連記事

  1. プログラミング

    プログラミング初心者のProgateの正しい進め方

    どうも、プログラミング初心者のごえもんです!…

  2. プログラミング

    何もスキルが無い大学生にオススメしたい一生使えるスキル2選を紹介!

    こんにちは、坂井です。大学生は人生の夏休みと言われるように、4…

  3. プログラミング

    未経験からWebコーダーになるには? 3ヶ月でコーダーになった私が独学方法を教えます!

    2019年から本格的にプログラミングを勉強し始め、3ヶ月目でWeb制作…

  4. プログラミング

    Macで日本語設定にした後にRubymineが開かなくなった時の対処法

    Qiitaの記事を見てRubyMineを設定した後に、何かしらのコード…

  5. プログラミング

    実際に行動しない人が多すぎて、行動しただけで勝ち(価値)あり。

    こんにちは、さかいです。今この記事を見ている人は、今の自分を変…

  6. プログラミング

    プログラミング初心者は無料サイトを徹底的に活用せよ!

    どうも、ごえもんです!ぼくは12月から本格…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

  1. 大学生

    僕らが勉強をしなければいけない理由
  2. プログラミング

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

    【中毒注意】1週間朝活をやってみたら元の生活に戻れなくなってしまった。
  4. 治験

    2週間で15万円!大学生おすすめのアルバイト「治験」について、体験談を交えながら…
  5. 大学生

    大学生は単位だけ取って、自分のための時間を使え!
PAGE TOP