markuplint を VSCode に導入してみた

背景

「HTML5」から「HTML Living Standard」に変わったことで, 変更・追加・廃止となったタグの要素・属性をチェックできる markuplint というリンターを発見したので導入してみた。

概要

markuplint とはその名の通り「マークアップすること」に関するlintツールで, HTML Living Standardに対応しています。
また, React や Vue などのフレームワークや, EJS などのテンプレートエンジンのためのプラグインも用意されていて, 各種ルールについても柔軟に設定できるようになっています。

導入手順

VSCode に markuplint プラグイン導入

cmd

npm i -D markuplint

VSCode の拡張機能をインストール

1. VSCode の Marketplaceを開く
   

2. 検索窓に markuplint を入力しインストール
   

3. VSCodeを再起動

実行方法

package.json の scripts にオプションコマンドを追加

cmd

{
  "scripts": {
    "html:lint": "markuplint **/*.html"
  }
}

スクリプトを実行

cmd

npm run html:lint

1ファイルごとの実行も可能

下記のように入力することで1ファイルごと実行できます。

cmd

npx markuplint target.html

結果

ログを確認するとHTML Living standard で廃止された要素にエラーが出ているので, 正常に動作してそうです。
ただ, 私だけなのかVSCode上のマークアップがされていないような。。。
コマンド実行はしっかりできているので一旦先に進みます。

正常に実行できなかった場合は改行コードが問題の可能性

markuplint は CRLF に未対応のため LF でないとパーサーがきちんと機能しない可能性があります。

VSCode での改行コード変更方法

VSCode 下部から改行コードを変更できます。

ルールの追加

構成ファイルにルールやオプションを記載することで
markuplintが自動的にロードし実行してくれます。

構成ファイルを作成

次のファイルを作成

.markuplintrc.json

{
  "extends": [],
  "plugins": {},
  "parser": {},
  "parserOptions": {},
  "specs": [],
  "excludeFiles": [],
  "rules": {},
  "nodeRules": [],
  "childNodeRules": []
}

.markuplintrc.json は markuplintrc の構成ファイルです。

2. オプション, ルール追加

markuplintコアから提供された構成をロード

.markuplintrc.json

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

ファイル除外

必要に応じて実行ファイルを除外できます。

.markuplintrc.json

{
  "excludeFiles": ["./node_modules/**/*.html"]
}

ルール追加

いくつかのルールを追加することができます。
詳細はこちらで公式がルールの記載方法をまとめてくれているので参考になります。

次の一歩

プラグインについては次の記事に記載します。

参考資料