Tools for coding conventions and analyzing HTML, CSS, Javascript client side code

Question

I use various code checkers for Java development but I haven't used one for HTML,. CSS, Javascript.

Do any exist. That flag bad practices or similar tool.

Answer 1

Firebug with the YSlow addon from Yahoo is pretty effective at pointing out your inefficiencies.

Also try the web developer addon and hitting ctrl+shift+a - it'll load your local code straight into the w3c validator.

Read up on 508C compliance - you can't test for it but it's good to know.

Answer 2

W3C has a Markup Validation Service for validating (X)HTML.

Also, W3C has tools:

• For CSS
• For Atom & RSS feeds

And JSLint is a tool for checking your JavaScript.

Answer 3

Do you mean lint-like tools?

JavaScript

• JavaScript Lint looks like it might be useful.

  With JavaScript Lint, you can check all your JavaScript source code for common mistakes without actually running the script or opening the web page.

  JavaScript Lint holds an advantage over competing lints because it is based on the JavaScript engine for the Firefox browser. This provides a robust framework that can not only check JavaScript syntax but also examine the coding techniques used in the script and warn against questionable practices.

• JSLint is the same sort of thing.

  JSLint takes a JavaScript source and scans it. If it finds a problem, it returns a message describing the problem and an approximate location within the source. The problem is not necessarily a syntax error, although it often is.
  JSLint looks at some style conventions as well as structural problems. It does not prove that your program is correct. It just provides another set of eyes to help spot problems.

HTML

• HTML::Lint, a Perl module (perldocs and example)
• W3 Validator

CSS

• CSSCheck (although it hasn't been updated since 2005)
• W3 validator for CSS

Answer 4

js2-mode for Emacs will catch and highlight some common Javascript errors while you're editing your code. It's not as thorough as the external lint tools, but it's a lot more immediate in its feedback.

Answer 5

Firebug with CodeBurner gives you reference material for your HTML and CSS. You can lookup HTML elements, attributes, and CSS properties quickly without leaving the page.