Addy Osmani's Recommended JavaScript Style Guides & Beautifiers

gistfile1.md

For developers interested in improving the code style consistency of the JavaScript they write, I'm happy to recommend the following style guides:

1. Idiomatic.js https://github.com/rwldrn/idiomatic.js/ (highly recommended, very comprehensive and includes contributions by +Rick Waldron , +Mathias Bynens and more)

2. jQuery Core Style Guide http://docs.jquery.com/JQuery_Core_Style_Guidelines (used by jQuery core, QUnit and many other projects)

3. Google JavaScript Style Guide - http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml with some further comments http://blog.founddrama.net/2010/08/annotated-google-javascript-style-guide/

4. Dojo Style Guide http://dojotoolkit.org/community/styleGuide (another very comprehensive alternative)

5. Aloha Editor JavaScript Style Guide http://aloha-editor.org/guides/style_guide.html (recommends jQuery style guide, but has some useful additions)

I've reviewed all of the above and discarded other guides that were either entirely too brief/vague or not that useful at all (the GitHub JS style guide).

##Beautifiers

Whilst maintaining consistent style while writing your code is extremely important, it can also be useful to use a formatter or beautifier to enforce style rules for you.

The first tool I recommend playing with is called CodePainter (https://github.com/fawek/codepainter). This is a JavaScript beautifier that can infer coding style from a sample you provide it (so rather than giving it a complete style guide, give it a sample with the rules already enforced and it can do the rest).

I can also recommend jsbeautifier.org, which most people are already aware of. One of the nice things about it is that you can plug it into your favorite code editor (e.g SublimeText https://github.com/kriswill/sublime-text-jsbeautifier), use it in a Chrome extension or in a bunch or other ways.

Hope these are useful!