HTMLのリンターいいのないかなぁと思っていたらよさそうなスライドが出てきたので試してみました。

使ってみようと思ったスライド

https://speakerdeck.com/yusukehirao/kodorebiyu-nantesiterarerukatu

インストール

$ npm i -g markuplint

Node.jsのバージョンが7.6以上でないと起動しないっぽいので、バージョンに要注意です。

セットアップ

これだけでは使用できないので、設定ファイルを作ります。

{
  "extends": "markuplint/html-ls",
  "rules": {
    "indentation": 'tab',
  }
}

今回はとりあえずタブでインデントしているかだけをチェックします。

設定のドキュメント日本語版がありますので、必要に応じてルールをカスタマイズしましょう。

使ってみる

$ markuplint index.html
 <markuplint> warning: インデントはタブにしてください。 [/Users/example/index.html:35:1]
 
   34: <body•class="home•blog">
 
   35:   <p>aaa
 
   36: <div•id="page"•class="hfeed•site">

Wockerなどで作られたサイトをテストする

これでHTMLのチェックはできるのですが、WordPressテーマなどはPHPでHTMLを生成するのでこのままでは使えません。

ということで、curlでレンダリングされたHTMLをlintしてみました。

$ curl https://wocker.test | markuplint
 <markuplint> warning: インデントはタブにしてください。 [/Users/example/STDIN_DATA:35:1]
  34: <body•class="home•blog">
  35: <p>aaa
  36: <div•id="page"•class="hfeed•site">

いけそうです。

CIなどでテストする場合はlocalhostなどでアクセスできる環境を用意できれば、いい感じに使えそうです。