[Grunt & Yeoman] grunt-html-hint で html の lint/hint/validation をする

grunt-html-hint おすすめかも、というお話し。

% grunt -version
grunt-cli v0.1.10
grunt v0.4.1

2013/11/15 現在で、先月のダウンロード数が多い順。

grunt-html

インストール

% npm install --save-dev grunt-html

Gruntfile

一部のみ抜粋。

# grunt-html
htmllint:
  all: [
    'src/**/*.html'
  ]

実行

成功

% grunt htmllint
Running "htmllint:all" (htmllint) task
>> 2 files lint free.
Done, without errors.

失敗

% grunt htmllint
Running "htmllint:all" (htmllint) task
Linting src/index.html"... ERROR
[L10:C3] Saw "<" when expecting an attribute name. Probable cause
Linting src/index.html"... ERROR
[L10:C6] End tag had attributes.
Linting src/index.html"... ERROR
[L10:C27] Stray end tag "h2".
Warning: Task "htmllint:all" failed. Use --force to continue.
Aborted due to warnings.

grunt-html-validation

インストール

% npm install --save-dev grunt-html-validation

Gruntfile

一部のみ抜粋。

# grunt-html-validation
validation:
  # options:
  target: [
    'src/**/*.html'
  ]

実行

成功

% grunt validation
Running "validation:target" (validation) task
Validation started for.. src/index.html
>> Validation successful..
Validated skipping..src/sample.html

失敗

% grunt validation
Running "validation:target" (validation) task
Validation started for.. src/index.html
1=> "Saw < when expecting an attribute name. Probable cause: Missing > immediately before." Line no: 10
2=> "End tag had attributes." Line no: 10
3=> "Stray end tag h2." Line no: 10
No of errors: 3
Validation started for.. src/sample.html
>> Validation successful..
Validation report generated: validation-report.json
Done, without errors.

ファイルが生成されていました。
* validation-status.json
* validation-report.json

grunt-html-hint

インストール

% npm install --save-dev grunt-htmlhint

Gruntfile

一部のみ抜粋。

# grunt-htmlhint
htmlhint:
  options:
    'tag-pair': true
    # htmlhintrc: '.htmlhintrc'
  html1:
    src: ['src/**/*.html']

実行

.htmlhintrc がうまくパースされないので、上記の通りダイレクトで書き込んでみた。

% grunt htmlhint
Running "htmlhint:html1" (htmlhint) task
Warning: Unable to parse ".htmlhintrc" file (Unexpected token '). Use --force to continue.
Aborted due to warnings.

成功

% grunt htmlhint
>> Local Npm module "grunt-lib-phantomjs" not found. Is it installed?
Running "htmlhint:html1" (htmlhint) task
>> 2 files lint free.
Done, without errors.

失敗

% grunt htmlhint
Running "htmlhint:html1" (htmlhint) task
Linting src/index.html...ERROR
[L12:C1] Tag must be paired, Missing: [ </h1> ]
</body>
Warning: Task "htmlhint:html1" failed. Use --force to continue.
Aborted due to warnings.

grunt-html-inspector

インストール

% npm install --save-dev grunt-html-inspector
% npm install --save-dev grunt-lib-phantomjs

grunt-lib-phantomjs のインストールに失敗して試せなかった。

結論

grunt-html-hint がいいかなと思うんですが、.htmlhintrc の問題を解決する必要がありますね。

jsonlint で調べる

% npm install --save-dev grunt-jsonlint

Gruntfile.coffee

jsonlint:
  npm:
    src: ['package.json']
  bower:
    src: ['bower.json']
  htmlhint:
    src: ['.htmlhintrc']
% grunt jsonlint:htmlhint
Running "jsonlint:htmlhint" (jsonlint) task
>> File ".htmlhintrc" failed JSON validation.
Warning: Parse error on line 1:
{  'tagname-lowercase':
---^
Expecting 'STRING', '}', got 'undefined' Use --force to continue.
Aborted due to warnings.

mumu.
公式サンプルをコピペしてました。
> * [Usage · yaniswang/HTMLHint Wiki · GitHub](https://github.com/yaniswang/HTMLHint/wiki/Usage)
.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
}

ということで、動いてる方を探してみました。
> * [tribe/.htmlhintrc at master · andrewshawcare/tribe · GitHub](https://github.com/andrewshawcare/tribe/blob/master/.htmlhintrc)
.htmlhintrc

{
"tagname-lowercase": true,
"attr-lowercase": true,
"attr-value-double-quotes": true,
"attr-value-not-empty": true,
"doctype-first": true,
"tag-pair": true,
"tag-self-close": true,
"spec-char-escape": true,
"id-unique": true,
"head-script-disabled": true,
"img-alt-require": true,
"doctype-html5": true,
"id-class-value": "dash",
"style-disabled": true
}

### 再チェック

% grunt jsonlint:htmlhint
Running "jsonlint:htmlhint" (jsonlint) task
>> 1 file lint free.
Done, without errors.

よし!

% grunt htmlhint
Running "htmlhint:html1" (htmlhint) task
Linting src/index.html...ERROR
[L4:C3] The empty tag : [ meta ] must closed by self.
<meta charset="UTF-8">
[L6:C3] The empty tag : [ link ] must closed by self.
<link rel="stylesheet" href="/stylesheets/style.css">
[L9:C11] Special characters must be escaped : [ < ].
<h1>test</h1
[L12:C1] Tag must be paired, Missing: [ </h1> ]
</body>
Linting src/sample.html...ERROR
[L4:C3] The empty tag : [ meta ] must closed by self.
<meta charset="UTF-8">
Warning: Task "htmlhint:html1" failed. Use --force to continue.
Aborted due to warnings.

やったよ。オレ。

補遺

html-inspector

少しさわったんですが、すぐに動かず。
調べようかと思ったけれども、grunt で完結したい気分になって取りやめました。