markuplintを個人のサービスに導入したので使い方とかをMEMO📝

markuplintとは

markuplint.dev

すべてのマークアップ開発者のためのHTMLリンター 適合性チェック マークアップは、有効なコードを記述する必要があります。これは、各ユーザーエージェントを介してウェブページを壊さないという標準の約束を守るために重要なことです。Markuplintは、HTML StandardやWAI-ARIAなどの仕様を踏まえた上で、適合性チェックを行うことができます。

上述の通りマークアップが適切にされているかどうかを静的解析によってチェックしてくれるツールのようです📝

markuplintの導入方法

公式ガイドの通りですが、実際に個人のプロジェクトに導入した際の手順のメモを以下に記載しておきます。

私の環境は以下の通りです。

• Node.js: v18.16.0
• npm: v9.6.6

初期設定

以下のドキュメントに従ってmarkuplintを導入します📘

markuplint.dev

以下のコマンドを実行した際のインターフェースに従ってerbとvueを使えるように設定を行いました。

npx markuplint --init

※上記コマンドを実行時にts-nodeがTypeScript v5系に対応しておらず以下のようなエラーが発生しましたが、

.npm/_npx/08532cf561cb6fc7/node_modules/ts-node/dist/util.js:62
    return value.replace(backslashRegExp, directorySeparator);

tsconfig.jsonのextendsが配列で指定されていると落ちるようだったので一旦以下の行を削除して削除して実行したところ成功しました✅

"extends": ["@vue/tsconfig/tsconfig.json", "@vue/tsconfig/tsconfig.dom.json"]

github.com

後々設定ファイルを分離する等を考えるとjsの方が扱いやすいように思ったので、markuplintのconfigは以下を参考にrenameして.markuplintrc.jsにしました。

markuplint.dev

ルールの適用

適用ルールはとりあえずmarkuplint:recommendedを利用するようにし、

markuplint.dev

既存で警告が出るものは一旦overridesを使って無効化しました。

markuplint.dev

最終的なconfigファイル

最終的な設定ファイルは以下のような感じになりました✨

module.exports = {
  extends: ["markuplint:recommended"],
  specs: {
    "\\.vue$": "@markuplint/vue-spec",
  },
  parser: {
    "\\.vue$": "@markuplint/vue-parser",
    "\\.erb$": "@markuplint/erb-parser",
  },
  overrides: {
    "Sample.vue": {
      rules: {
        "permitted-contents": false,
      },
    }
  }
}

package.jsonのscriptsに追加

vueとerbを対象として実行するようにscriptsに追加しました。

  "scripts": {
++    "lint:html": "markuplint \"app/views/**/*.html.erb\" \"app/javascript/components/**/*.vue\"",

markuplint.dev

実行結果は以下のような感じです。

$ npm run lint:html 

> lint:html
> markuplint "app/views/**/*.html.erb" "app/javascript/components/**/*.vue"

<markuplint> passed app/views/layouts/_infomation.html.erb
<markuplint> passed app/javascript/components/templates/PageBox.vue

# エラーになる場合
<markuplint> error: 属性「key」は未許可です (invalid-attr)app/javascript/components/molecules/feed/SelectedFeed.vue:2:7
  1: <template>
  2: ••<li•:key="feed.id"•class="selected-feed">
  3: ••••<font-awesome-icon•icon="circle-minus"•class="delete"•@click="unselectedFeed(feed.id)"•/>

GitHub actionによるCIでも実行するように以下を追加しました。

      - name: lint markup
        run: npm run lint:html -- -f Simple

CI上はフォーマットをSimpleにして出力を抑えています。

Run npm run lint:html -- -f Simple

> lint:html
> markuplint "app/views/**/*.html.erb" "app/javascript/components/**/*.vue" -f Simple

<markuplint> app/views/layouts/_infomation.html.erb: ✓

おわりに

自分の書いたマークアップがmarkuplintによって結構警告が出ていてアクセシビリティに影響が出ていそうなことが気づきやすく非常にありがたかったです🙏 VSCodeの拡張もあり非常に体験も良かったです✨

marketplace.visualstudio.com