HTML第４話 VSCode入力補完Emmetの使い方【超初心者用】

※2021年6月23日に公開した記事ですが、リライト記事に必要な文言等を追記、その他の部分も修正して2021年6月27日に再度公開しました。

VSCodeとは？

VSCodeとはMicrosoft社がリリースした無料HTMLエディターです。

正式名称はVisual Studio Codeになります。

簡単便利に、尚且つ視覚的にもわかりやすく、HTMLを作成するための道具です。

初心者がHTMLを勉強しようとした時に、最初に試してみて頂きたいです。

ですが、私はVSCodeインストール直後につまずいてしまいました。

入力補完が使えません。

分かり易く説明しているサイトもありません。

なので【超初心者用】として解説していきます。

Emmet（エメット）とは、入力補完をする機能。

一番最初にやってみたくなるはずです。

例えば【h】と入力すると、【h】から始まるタグを表示してくれて、選択すると開始タグから終了タグまで自動で入力してくれるんです。

Emmet（自動補完）が使えない！

初心者に、結構ありがちなようです。

私もインストールは簡単に出来たんですが、いざ自動補完を試してみると出来ないんです。

しかも、詳しく解説しているサイトが無いんです。

そういう事で、次のEmmetの設定方法で解説したいと思います。

Emmetの使い方になりますが、VSCode上で【！】の入力をして【Tab】を押すって解説しているサイトばかりなんです。

ところがそれって、設定しないと何も起こりません。

Trigger Expansion On Tabにチェックを入れ、言語モードでHTMLを選択しましょう。

設定完了しましたら、再起動をして終了です。

では実際にVSCodeに【！】を入力し、Tabキーを押してみましょう。

HTMLの雛形が出てきますね。

以上でEmmetの設定完了です。