HTMLInspector.js

HTML Inspector.js


Github: https://github.com/philipwalton/html-inspector
ローカルでも動作可能なHTMLの品質チェックツール。
カスタマイズ製が高いことが特徴。
W3C validtor等ではチェック不可能な
このプロジェクトのHTMLのマークアップ規則はこうである
といったことに対応可能。
例えば、このプロジェクト内では、`data-id`をつかってはいけないや、クラスに`btn-danger`を付ける場合は、必ず`data-confirm`をつけるなどのチェックが可能。


インストール


bower install html-inspector

または、ソースコードをコピーしてローカルに`html-inspector.js`として保存する


チュートリアル


以下の様なHTMLがあるとする。


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Language" content="ja">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="author" content="namakesugi" />
<title>NAMAKESUGI</title>
<script src="jquery.1.10.1.js"></script>
</head>
<body>
<ul>
<div><span>a</span></div>
</ul>
<script src="html-inspector.js"></script>
<script> HTMLInspector.inspect() </script>
</body>
</html>

これをChromeなり、Firefoxなりで開き、Javascriptコンソールを表示すると以下のように表示される。
html-inspector-01.png


カスタムバリデーター


ここでは、 btn-dangerというclassが与えられている場合は、`data-confirm`を必要とするというバリデーションを書いてみる。


bodyの中身を以下のようにする


<a class="btn btn-danger" data-confirm="are you sure?">btn-danger1</a>
<a class="btn btn-danger">btn-danger2</a>

以下のようにスクリプトを定義する


<script>
HTMLInspector.rules.add(
"btn-danger-need-data-confirm",
{},
function(listener, reporter, config) {
listener.on('class', function(className, domElement) {

if(!/btn-danger/.test(className) || $(domElement).attr('data-confirm') !== undefined)
return;
reporter.warn(
"btn-danger-need-data-confirm",
"class 'btn-danger' need 'data-confirm'.",
domElement
);
}
)
});
HTMLInspector.inspect();
</script>

とすると、以下のように、`'btn-danger' need 'data-confirm'`と表示されるようになる。
html-inspector-02.png

スポンサーサイト
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。