VSCodeでHTML5とCSS3の文法をチェック（W3C Validation）
ブログ記事をHTMLとCSSを使って、Visual Studio Code で書いています。
昨今はWEB上のHTMLとCSSの技術もHTML5、CSS3へと移行してきました。で、自分の書いたHTMLやCSSが、このHTML5やCSS3の文法に合っているのかが気になる所です。
この様な文法を、Web制作における共通の指針として勧告を出している、Web技術の標準化を行うW3Cという非営利団体があります。このW3Cについては下記サイトが判りやすいです。
この様な文法に適合しているかどうかを、ネット上でチェックできるページがあります。
上記ページに、URLなりソースを入れてやれば文法のチェック（バリデーション）を行ってくれます。
私がよく勉強の為拝見させていただいてる Akira氏の下記ページでは、上記W3C Validatorで吐き出される英語のエラーについての解説があり、参考になります
W3C Validator は便利で、当ブログも数回お世話になって今では、こちらで直せる部分ではエラーがゼロになりました。
ただ、毎回々々ここに書き込むのも面倒で、CSSなどは一度どこからでも読めるサーバー（FC2のファイルアップロード）などを利用しないとチェックが面倒です。
ところが、VSCode上で自動的にバリデートしてくれる拡張機能があります。これがとても便利。リアルタイムでエラーを表示してくれます。
HPCODEと云うサイトの下記ページに詳細な解説があります。
VSCode内でHTMLとCSSのコードをW3Cチェック（バリデート）させる方法
HTML5のバリデートに関してはちょっとした作業が必要で、JREの導入に手こずりましたが、W3C Validation の拡張機能をインストールすることができました。
下画像の赤枠部分はFC2ブログのエディターのファイルアップロードの機能で画像を記事に貼付けた時に自動的に生成されるコードです。
実はこの中のいくつかの属性等は旧のHTMLやXMLの文法で書かれています。
HTML5用の拡張機能をインストールします。検索窓にw3cと入れてやると候補がいくつか表示されますが、W3C Validation と云うのが該当の拡張機能です。
私の場合はすでにインストールが終わっているので、少し表示が違うかもしれません。
有効をクリックし
再読込
すると、上画像の様にVSCodeの左下にエラー数が表示されます。また、該当のエラー行には波下線が表示されてます。
このエラーのアイコンをクリックしてみると
エラーの内容とエラー行、文字位置の数字が表示され、このエラー表示の文字列をクリックすると、エディタウィンドウでは該当のエラーが発生している行に移動します。
img要素の中では、border ,width,height の 属性がHTML5では廃止されたのと、閉じタグの「 / 」は不要のため、エラーになっています。
エラー表示の上側の行をクリックすると、外部スタイルシートのリンク指定が不正になってると表示されます。ここはフルパスのURLを指定しなければなりません。
ローカルの環境でVScodeで記事を書く場合には、headerの中にそのローカルな環境での設定が必要なのですが、このスタイルシートの設定はこのheaderの中に書かれています。なのでこの部分はアップしません。VSCodeのローカルな環境でローカルなスタイルシートを指定するには、相対パスが有効です。という理由でこの場合はこの書き方で合ってます。
header部分はブログのテンプレートの方に書かれていますので、このheader部分を記事にはアップしません。
（記述が間違ってました。お恥ずかしい）
エラー表示の上側の行をクリックすると、外部スタイルシートのリンク指定でパスにはスペースは使ってはいけないと表示されてます。なのでスペースの入らないファイル名に変更します。
私は拡張機能のLive HTML Preview を使用しているのですが、その場合はCSSファイルへのパスは相対指定でしか機能しません。
試しに、わざとHTMLの閉じタグを一つ増やしてみると、こんな風に閉じタグが間違ってる旨のエラーが出ました。
CSS3のバリデーションの拡張機能は
CSSTree Validator をインストールします。
例えばCSSの宣言の区切りの「 ; 」セミコロンが抜けていると
こんな風にルールセット内の全ての行がエラーと表示されてますが、⚠の行にエラーの元になってる行が表示されています。
リアルタイムで表示されるのが誠に便利です。
私はテンプレートにかなりの手を入れていて、この拡張機能を知ってからバリデートしてみたら沢山のエラーが出てびっくり。
CSSなどは殆どがイージーミスで、「 ; 」の抜けとか、auot なんていうスペルミスです。
このVSCode用のW3C拡張機能は、時々誤動作して、その時は一度ファイルを保存して、エディターを再起動。
HTMLとCSSの基本情報の参考サイト
注記1 ： 2020 01 31 HTMLのValidationが機能していないので調査中
注記2 ： 2020 02 07 Windows10で、HTML W3CValidationの設定はこうする。 VSCodeのW3CValidationが機能しなくなってたのをこうしたという話
