开发者

Javascript based HTML/CSS Lint

Are there any html/css checkers that are j开发者_StackOverflow中文版avascript based like JSLINT?


Unless you have some very specific requirement preventing it, your best bet here is to go the non-javascript route: W3C Validator

If your interest is in running it elsewhere, it's source code is available.


I wrote HTML lint in Javascript recently, to be used together with HTML minifier (source is on github). It's based on a tweaked version of Resig/Arvidsson HTML parser.


Updated Info

  • CSSLint - Javascript based linter for CSS. Works on Rhino, Node.js,
  • CSSLint for Windows Script Host - a modified version that works on WSH

Sample error message from the latter:

C:\dev\html>cscript //E:JScript c:\users\dino\bin\csslint-wsh.js --format=compiler style\basic.css

CSSLINT
style\basic.css(5,1) CSSLINT: warning: Heading (h1) has already been defined.
h1           { font-size: 20pt }
style\basic.css(6,1) CSSLINT: warning: Heading (h2) has already been defined.
h2           { font-size: 18pt; font-weight:bold; color: navy }
style\basic.css(7,1) CSSLINT: warning: Heading (h3) has already been defined.
h3           { font-size: 16pt; font-weight:bold; color: #483d8b;}
style\basic.css(8,1) CSSLINT: warning: Heading (h4) has already been defined.
h4           { font-size: 14pt; font-weight:bold; color:#C71585; margin-bottom:2px; }
style\basic.css(9,1) CSSLINT: warning: Heading (h5) has already been defined.
h5           { font-size: 12pt; font-weight:bold; color:#6495ED; margin-bottom:2px; }
style\basic.css(10,1) CSSLINT: warning: Heading (h6) has already been defined.
h6           { font-size: 10pt; font-weight:bold; color:navy }
style\basic.css(12,1) CSSLINT: warning: Element (td.head) is overqualified, just use .head without element name.
td.head      { font-size: 12pt; color: #c71585;   font-weight: bold; }
style\basic.css(39,4) CSSLINT: warning: Broken box model: using width with padding.
   width: 48%;
style\basic.css(44,4) CSSLINT: warning: Broken box model: using width with border.
   margin: 0.2em 0 0.2em 0;

Example when used within Emacs with flymake:

Javascript based HTML/CSS Lint


HTML Inspector is a JavaScript HTML validator that can run in the browser or Node: https://github.com/philipwalton/html-inspector

It is the same validator CodePen uses.


I have recently started using grunt-html after several hours of debugging only to have been missing a closing bracket > which caused my html-minifier to hang.

I'm not sure it's perfect, nor do I expect it to be 100% compliant with W3C standards. It does however help catch syntax / simple errors.

I have also came across a W3C varian,t grunt-html-validation, of it as well.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜