[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.
公式サンプルをコピペしてました。

.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
}

ということで、動いてる方を探してみました。

.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 で完結したい気分になって取りやめました。

いろいろできるみたい。