VSCodeでHTMLの構文チェックとフォーマットを自動化する

Markuplintの構文チェックを使うための設定

yarn add -D markuplint

.markuplintrc.json （設定ファイル）プリセットのルールを記述しておきましょう。

{
  "extends": [
    "markuplint:recommended"
  ]
}

プリセットの詳細は公式サイトにてご確認ください。

ちなみに、.htmlファイルみたいな静的HTMLファイルを扱う場合は markuplint:recommended-static-html を使うと、recommended のルールに加えて 終了タグのチェックもしてくれます。

上記のルールでは、imgタグに widthと height を要求してきます。不要な場合は下記のように nodeRules を記述します。これで、alt属性のみをチェックしてくれます。

{
  "extends": [
    "markuplint:recommended"
  ],
  "nodeRules": [
    {
      "selector": "img",
      "rules": {
        "required-attr": "alt"
      }
    }
  ]
}

下記のコマンドで構文チェックを行うことができます。--fix オプションをつけると自動修正を行なってくれます。

yarn markuplint 'src/index.html' --fix

npm-scriptsに登録しておく

npm-scriptsに登録して構文チェックを効率化しましょう。下記は yarn lint:html で src フォルダ配下のHTMLファイルをすべてチェック & 修正するサンプルです。

{
  "scripts": {
    "lint:html": "yarn markuplint 'src/**/*.html --fix'"
  }
}

VSCodeでmarkuplintの構文チェックを自動化する

VSCode Markuplint プラグインをインストールして有効化します。

たったこれだけで、リアルタイムに構文チェックを自動で行なってくれるようになります。

VSCode x PrettierでHTMLのフォーマットを自動化する

HTMLファイルも、JSやCSS同様Prettierでフォーマットできるので、惜しみなく使っちゃいましょう。

Prettierのインストールについてはこちらの記事内「PrettierでJSの整形をするための設定」をご覧ください。使い方も同じです。

忙しい人のためのPrettierインストール

プロジェクトへインストール。

yarn add -D prettier

次にVSCodeプラグインをインストールして有効化。

VSCodeの設定ファイルに、Prettierをフォーマッタとして使う設定と、保存時にフォーマットをかける設定を記述します。HTMLに限定して設定することもできます。併記した場合はHTMLファイルに限定した記述が優先します。

{
  // VSCode全体に設定する場合
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  // HTMLファイルに限定して設定する場合
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  }
}

まとめ

というわけで、PrettierはJS, CSS, HTMLなど共通のフォーマッタとして活用できるので、設定がめちゃくちゃシンプルになるし、全体的な統一感にも繋がります。以前の僕のようにJSはESLintのフォーマッタ、CSSはStylelintのフォーマッタ、HTMLは…とそれぞれでやっていた方はこの機会に見直してみてはいかがでしょうか。

今回はHTML x Prettierのフォーマットの設定のお話でしたが、JS, CSSも見直したい！という方は下の記事もどうぞご覧ください。それではまた( ¨̮ )