Javascript based HTML/CSS Lint

Question

有没有像JSLINT一样基于javascript的html / css检查器？

Answer 1

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 .

Answer 2

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.

Answer 3

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:

Answer 4

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.

Answer 5

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.