2022年06月23日 更新

VSCodeの拡張機能「HTMLHint」でhtmlの文法をリアルタイムチェック

どうも、クラゲジュニアです。

VSCodeの拡張機能HTMLHintを導入して、htmlの文法に間違いがあると、さりげなく表示してくれます。特にhtmlのエラーは気づきにくいですので、これを入れておくと非常に便利です。

導入方法

  1. 左側メニューの一番下のアイコン(Extensions)をクリック
  2. テキストボックスにhtmlhintと打ち込む
  3. HTMLHintの位置にあるinstallをクリック

使い方

コードを保存

例えば以下のようなhtmlを作成して、test.htmlとして保存します。

<html>
<body>
<p>HTMLのお試し</p>
<button>ボタン</button>        
</body>
</html>

エラー表示

コード上に波線と、左下の警告マークに数字がつくようになりました。波線にマウスカーソルを合わせたり、警告マークをクリックしたりするとエラー内容が見られます。

エラー詳細表示

Doctype must be declared first.と書かれています。

先頭にDOCTYPEという宣言を記述する必要があるということです。以下のコードを先頭に書くことでエラー表示が消えます。

<!DOCTYPE html>

その他

HTMLタグをわざと間違った文字にしたり、< や > 記号を消してみたりしてください。すぐにエラーが表示されると思います。特に、タイプミスで意図しないエラーになる場合があったときに役に立ちます。

以上です。