Markuplint v5 の新ルール head-element-order のみんなの設定見せてくれ

投稿 :

先日、Markuplint(markuplint.dev) がバージョン5(GitHub)にアップデートされました。このメジャーアップデートでは相当に大きな変更(next.markuplint.dev)が入っており、新しいルールも増えています。

その中でも head-element-order ルール(markuplint.dev)は興味深いところです。<head> 要素内の配置順序は主にパフォーマンス面でさまざまな論考があり、エンジニアの関心度も高いはずなのですが、機械的にチェックできる Linter は近年まで存在しなかったと思います。

今年（2026年）の2月に html-eslint(html-eslint.org) の v0.57.0(GitHub) に head-order ルール(html-eslint.org)が追加されており、これは capo.js(GitHub) の定めた重み付けにより順序が決定されるものとなっています。しかし capo.js はパフォーマンスに振り切った考え方であり、全体的な趣旨は賛同できるものの不自然な順序を強制されてしまうケースもままあります。 

<!-- html-eslint の head-order ルールに従った配置 -->
<head>
  <link rel="stylesheet" href="/common.css" />
  <link rel="stylesheet" href="/theme-base.css" title="Base theme" />
  <script src="/common.js" type="module"></script>
  <link rel="alternate stylesheet" href="/theme-other.css" title="Other theme" />
</head>

これは理屈は理解できるものの、多くの人は3つのスタイルシートを1か所にまとめたいと感じるのではないでしょうか。画面描画のパフォーマンスは確かに重要ですが、人間がソースコードを目視したときの分かりやすさもアクセシビリティ上重要であり、それを軽視すべきではないと私は考えています。

これに対して Markuplint の head-element-order ルールは設定で順序を任意に定義できるところに大きな違いがあります。ライブラリが対応していない最新の技術（最近だと <meta name="text-scale"> とか）をいち早く取り入れることができるのも嬉しいところです。

また個人的な関心としては、カスタマイズ可能なメリットとして「他の人がどのような考えを持っているか」を手っ取り早く知ることができる点にも期待しています。今のところ GitHub のコード検索にて設定ファイル名（.markuplintrc.json など）で絞り込んだ結果(GitHub)は0件なので、みんな早くバージョン5にアップデートしたうえで、思い思いのカスタマイズ設定を公開して欲しいですね。

ちなみに私はデフォルトの設定ファイル名ではなく個人用 Markuplint 設定(GitHub)にて公開しているため、上記検索には引っ掛かりません。全体的な考え方は capo.js をベースにしつつも、人間がソースコードを目視したときの分かりやすさも重視し、2026年9月13日時点では以下の設定にしています。 

/** @type {import('@markuplint/ml-config').Config} */
export default {
  rules: {
    'head-element-order': [
      'meta[http-equiv="content-type" i]',
      'meta[charset]',
      'meta[http-equiv]',
      'meta[name="viewport" i]',
      'meta[name="text-scale" i]',
      'base',
      'title',
      'link[rel="preconnect" i]',
      'link[rel~="stylesheet" i]',
      'style',
      'link[rel="preload" i]',
      'link[rel="modulepreload" i]',
      'link[rel="prefetch" i]',
      'link[rel="dns-prefetch" i]',
      'link',
      'script[src]',
      'script',
      'meta',
    ],
  },
};