複数htmlファイルを対象に閉じタグミスを検出する方法

複数htmlファイルを対象に、HTMLHintを使用して閉じタグミス（「Tag must be paired」エラー）が発生しているファイル名を抽出する方法を説明します。この手法は、他のVSCodeのエラーメッセージにも汎用的に使用することができます。

手順

1. HTMLHintのインストール

まず、確認したいファイル群を含んだプロジェクトディレクトリにHTMLHintをインストールします。

npm install htmlhint --save-dev

2. HTMLHintの設定ファイルを作成

プロジェクトのルートディレクトリに .htmlhintrc ファイルを作成し、以下のように設定を記述します。

{
  "tagname-lowercase": true,
  "attr-lowercase": true,
  "attr-value-double-quotes": true,
  "doctype-first": true,
  "tag-pair": true,
  "spec-char-escape": true,
  "id-unique": true,
  "src-not-empty": true,
  "attr-no-duplication": true
}

3. HTMLHintの実行とJSON形式での保存

ターミナルで以下のコマンドを実行して、HTMLHintの出力をJSON形式で保存します。

npx htmlhint --format json "**/*.html" > htmlhint-log.json

4. 閉じタグミスを含むファイルを抽出するスクリプトの作成

以下のスクリプトを extract-errors.js という名前で保存します。このスクリプトは、閉じタグミス（「Tag must be paired」エラー）が含まれるファイル名を抽出します。そのほかのエラーに対して抽出したい場合はerrorMessageToFilterの値を変更してください。

const fs = require('fs');
const data = JSON.parse(fs.readFileSync('htmlhint-log.json', 'utf8'));

const errorFiles = new Set();
const errorMessageToFilter = 'Tag must be paired';

data.forEach(file => {
  if (file.messages) {
    file.messages.forEach(message => {
      if (message.message.includes(errorMessageToFilter)) {
        errorFiles.add(file.file);
      }
    });
  }
});

fs.writeFileSync('filtered-error-files.json', JSON.stringify([...errorFiles], null, 2));

5. スクリプトの実行

以下のコマンドを実行してスクリプトを実行します。

node extract-errors.js

まとめ

上記の手順を実行することで、HTMLHintを使用して閉じタグミス（「Tag must be paired」エラー）が発生しているファイル名をJSON形式で抽出し、ログファイルに保存することができます。