VSCode内でHTMLとCSSのコードをW3Cチェック(バリデート)させる方法

目次
  1. HTMLコードをW3Cチェックする方法
    1. Java Runtime Environment(JRE)のインストール
    2. VSCodeからJREへのパスを指定
    3. W3Cバリデートの結果
  2. CSSコードをW3Cチェックする方法
    1. W3Cバリデートの結果
  3. おわり

VSCodeで管理しているHTMLとCSSを、W3Cが提供している「バリデーター」でチェックしてもらう方法です。

W3CのバリデーションサイトにアクセスしてURL入力してとか、ファイルアップロードしてって作業は、結構面倒くさいので、VSCode内で完結させちゃいましょう!

HTMLコードをW3Cチェックする方法

まずは、HTMLコードをW3Cチェックする方法です。

W3C公式だと以下になります。
→ https://validator.w3.org/
同等のチェックをVSCode内で行うための設定です。

VSCodeの拡張「W3C Validation」を導入します。
→ 「W3C Validation」の公式ページ

「W3C Validation」は「Java Runtime Environment(JRE)」が必要になります。もしない方は、お使いのパソコンに導入しておいてください。ない場合はこういうメッセージが出てきます。

Java Runtime Environment(JRE)のインストール

Java Runtime Environment(JRE)は以下のリンクからダウンロードできます。
→ Java SE Downloads

「JDK」ボタンをクリック。

「Accept License Agreement」にチェックを入れて、Windowsのダウンロードリンクからインストールファイルをダウンロードします。
※ お使いのOSに応じてダウンロードリンクは変わります。

インストールは手順に進んでいけばOKです!

インストールできたら、パソコンを再起動しておきましょう。

VSCodeからJREへのパスを指定

VSCodeからJREへのパスを設定します。
ファイル → 基本設定 → 設定を開き、ユーザー設定側に以下を追加しましょう。
※ フォルダパスはJREのインストール先に応じて変更してください。

"vscode-w3cvalidation.javaHome": "C:\\Program Files\\Java\\jre-10.0.2",

これで設定はOKです。

W3Cバリデートの結果

エラーの箇所は、「問題パネル」に表示されるようになります。
表示 → 問題(Ctrl + M)

なお、VSCodeの起動直後は、調査に少し時間がかかるようです(とはいえ数十分とかのレベルではないのでご安心?を…)

It takes time to process immediately after startup VC Code.

CSSコードをW3Cチェックする方法

W3C公式だと以下になります。
→ http://jigsaw.w3.org/css-validator/
同等のチェックをVSCode内で行うための設定です。

VSCode拡張「CSSTree validator」を導入します。
→ 「CSSTree validator」の公式ページ

「CSSTree validator」に関しては、他に必要なものはありません。導入だけでOK!

W3Cバリデートの結果

CSSのエラー箇所も、「問題パネル」に表示されるようになります。
表示 → 問題(Ctrl + M)

エラーをクリックすれば、その行に飛んでくれるので対応が楽ですね。

おわり

VSCode内でHTMLとCSSのコードをW3Cチェック(バリデート)させる方法でした。公式の2つのサイト開く手間がなくなるので、チェックがとても楽になりますよ!

WordPressでお悩みの方はお気軽にご相談ください。

ちょっとしたお困り事からサイト全体のリニューアルのようなご依頼まで、お悩みに応じて柔軟に対応いたします。

この記事を書いた人

はにわまん

HPcode代表。300件以上のWordPress案件を対応してきました。ちょっとしたWordPressのカスタマイズからブロックテーマでのリニューアルまで。更新できるWordPressサイトが好きです。