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

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

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

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

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

「W3C Validation」をインストール

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

W3C Validationをインストール

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

W3C Validationのページ

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

英文の設定方法

JDKのダウンロード

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

オラクルのJDKページ

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

最新のJDKをダウンロード

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

セットアップダイアログ

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

環境変数を設定

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

コントロールパネルのシステム詳細設定を選択

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

環境変数を選択

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

新しいユーザー変数を入力

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

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

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

VSCodeでチェック

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

VScodeを開く

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

Altなしのエラー表示

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

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

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