HTML

【HTML】Visual Studio Code の便利な拡張機能を紹介

こんにちは!ProgRiroです!

本日の学習は、実際にキーボードから打ち込んで手を動かしながら習得すること推奨します。

自分で手を動かしてコードを記述しながらの学習と読んだだけの学習とを比べると習得度合が大きく違ってきます!

より効率的に学習するため、出来るだけパソコンをご準備の上お読みください。

このブログでは

  • Visual Studio Code(テキストエディタ)
  • Google Chrome(ブラウザ)
  • フォルダ(任意のフォルダ)
  • ファイル(〇〇.html

が準備されていることを大前提として解説を進めていきます。

Visual Studio Code がお持ちのPCにインストールされていない方は 【HTML】簡単!HTMLの環境構築! を参考にしてインストールしてください。

また、本日の記事を読むと

  • Visual Studio Code がますます使いやすく
  • 自分の好きなようにカスタマイズできる

ようになります。プラモデルを作る気分で読んでみてください。

1. Visual Studio Code の自動整形

Visual Studio Code には自動でコードを綺麗に整形してくれる機能があります。

この機能は、インストールした段階では有効になっていません。

この項目では、有効にする手順を紹介します。

  1. 画面上部のメニューバーからCodeを選択する。
  2. Preferencesを選択する。
  3. Settingsを選択する。

 

すると、以下の画面に切り替わります。

ここからは、以下の動画の通りに進めてください。

Visual Studio Code の自動整形

  1. 検索バーでformatと入力する。
  2. チェックボックスFormat On PasteFormat On SaveFormat On Type にチェックする。

 

この操作によって自動でコードを綺麗に整形してくれる機能が有効になりました!

実際に以下のようになります。(保存時に自動整形)

Visual Studio Code の自動整形 確認

ちなみに設定の意味は以下の通りです。

Format On Paste」は、貼り付け時に自動整形

Format On Save」は、保存時に自動整形

Format On Type」は、文字入力終了時に自動整形

自分の好みにあったもののみ有効にして、カスタマイズしてみましょう!

2. 拡張機能とは

拡張機能を簡単に言うとソースコードを書きやすくする最強の追加アイテムです!

自分の好みに合わせてVisual Studio Codeカスタマイズすることが可能です。

2-1. 日本語化

それでは、はじめにVisual Studio Code 日本語化してみましょう。

ここからは、以下の動画の通りに進めてください。

Visual Studio Code の日本語化

  1. サイドバーの をクリックする。
  2. 検索バーでjapaneseと入力する。
  3. Japanese Language Pack for VS Codeを選択する。
  4. Installをクリックする。
  5. Visual Studio Code を再起動する。

 

すると、以下のようにVisual Studio Code 日本語になりましたね!

2-2. HTML自動補完

次は、HTML自動補完してくれる拡張機能を追加しましょう!

これによって、HTMLの基本要素などの先頭数文字を入力しただけで、候補が出てきてくれます。コードを記述する時間の削減になり、より効率的に学習を進めることができます!

拡張機能の追加方法2-1で行なったやり方と同様です

検索バーにhtmlと入力してHTML Snippetsインストールしてください。

すると、以下のように自動で補完してくれます。

HTML自動補完

2-3. CSS自動補完

最後に、CSS自動補完をしてくれる拡張機能を追加しましょう!

これにより、CSSに対しても先頭数文字を入力しただけで候補が出てきてくれます。

拡張機能の追加方法2-1で行なったやり方と同様です

検索バーにcssと入力してIntelliSense for CSS class names in HTMLインストールしてください。

これで、CSSも自動補完ができるようになりました。

3. 最後に

以上で本日は終了です。今回紹介した拡張機能以外にも沢山の便利な機能があります。自分好みにカスタマイズしてみましょう!

 

最後までお読みいただき、ありがとうございました。

ABOUT ME
ProgRiro
理系大学生です。ITベンチャーでエンジニアとして働きながら、プログラミングスクールの講師も務めています。 趣味はプログラミング。 設計からコーディング、テストまでを行い、個人開発していきたい。 研究分野はデータ分析。世の中になくてはならないようなプロダクトを作りたいと思っています。