Twitterでブログ更新情報を配信中

VSCodeの「W3C Validation」でHTMLとCSSコードをチェック

VScodeの拡張機能「W3C Validation」を使えば、W3Cに準拠したコードなのかをエディタですぐにチェックすることができますよ!

実際に動作するまで設定したところ、環境変数の設定が難しい印象でした。こちらの拡張機能はインストールしただけでは使用できないので気をつけてください。

「W3C Validation」「JDK」「システム環境変数」以上3つを順にチェックしていきます。

「W3C Validation」をインストール

拡張機能の検索ボックスで「W3C Validation」と入力します。同じものをインストール。

インストールされるとこちらのページが表示されます。

補足になりますが、同ページに英文の設定方法が記載されています。

JDKのダウンロード

オラクルが提供している、JDK(Java Development Kit)を公式サイトからダウンロードします。最新版のOracle JDKから「JDK Download」をクリック。

次のページで該当のOSにあるexeファイルをダウンロードします。

セットアップダイアログが開いたら手順に沿ってそのまま進んでください。

インストールが完了したら念のため再起動しておきましょう。

環境変数を設定

コントロールパネルから「システム」>「バージョン情報」>「システム情報」と開きます。つづいて「システムの詳細設定」を選択。

「環境変数」をクリック。

現在の環境変数が一覧で表示されます。「ユーザー環境変数」もしくは「システム環境変数」に「新規」で追加していきます。

「システム環境変数」は使用する全ユーザーに適用されるため「ユーザー環境変数」で該当のログインユーザーのみに設定する方がいいでしょう。

「ユーザー環境変数」の「変数名」と「変数値」を以下のように入力してください。変数値末尾のバージョンは公式サイトのダウンロードページから確認します。

変数名:JAVA_HOME
変数値:C:\Program Files\Java\jdk-14.0.1

VSCodeでチェック

VSCodeでファイルを開きます。エラーがある場合はファイル横にエラー数が表示され、ファイル名が赤くなります。

詳細を確認するときはホバーして「問題を表示」するか「Alt+F8」で開きます。例ではイメージ画像にAltがないことを指摘しています。

VSCodeの拡張機能「W3C Validation」を使えば、コーディングと同時に構文チェックができるのでとても便利です。

JDK(Java Development Kit)のダウンロードと環境変数の設定があるので手間に感じるかもしれませんが、一度設定すれば変更する必要はありません。

W3Cの標準規格は専門知識や技術をもつことの証明になりますから、ぜひ取り入れたいですね。