10 Best JavaScript Style Guides Including Airbnb and Idiomatic

JavaScript style guide

There are many JavaScript style guides out there on the web, created and published by experts as open source for JavaScript community.  Therefore, we do not intend to develop a new one here but go through the style guides that developers from airbnb, Google, jQuery community and many other organizations are using to write beautiful, maintainable and performant JavaScript code.  

Answering the basic question!! Why do we need coding style guide in the first place?

We need coding style guide because code changes many hands and eyes over its lifecycle. If there are no coding standards then everyone ends up writing code that they only can understand.

Using a standard style guide helps ensure that code is shared easily among developers and any new developer can get up to speed with a given piece of code within no time. Popular open source projects communities like jQuery, Dojo etc. create and publish common style guides so that code written by anyone in the community is understood and updated by everyone else, as required, with ease.

Let us look at some of the most popular and useful JavaScript style guides -  

1. airbnb JavaScript Style Guide

airbnb JavaScript style guide is my personal favorite and ranks at the top in my listing of 10 best coding style guides. It was released by Harrison Shoff of airbnb back in 2012 as open source under MIT license. airbnb labels it as “mostly reasonable approach to JavaScript”.

Ever since its release, airbnb’s style guide has gained popularity and is one of the most followed and comprehensive pack of coding standards for writing JavaScript. 

The best thing I like about airbnb style guide is that it covers all aspects of coding in JavaScript right from guidelines for variable declaration, functions, events, test code to performance related tips.

You can get airbnb style guide at – github.com/airbnb/javascript.

2. Idiomatic.js JavaScript Style Guide

I will put this second only to airbnb coding standards. Idiomatic.js is developed by some of the most experienced JavaScript developers out there in the wild and is one of the oldest and most comprehensive Javascript coding standards available for use as open source.

The style guide is available in multiple languages including German, French, Italian, Korean, Russian and Romanian.

"they” say that this style guide covers “principles of writing consistent, idiomatic JavaScript” and “they” are the experts like Rick Waldro, Mathias Bynens, Kit Cambridge and many more.

Fork it, make changes, if required, and use in your next project or use it as a base style to build one for your organization.

You can get idiomatic.js style guide at - github.com/rwaldron/idiomatic.js/.

3. jQuery Core Style Guidelines

jQuery people write JavaScript by following this style guide are are doing this for years now. jQuery folks are working on to put together a module as well that can be used to check if code is written as per the jQuery standard style guide.

Till then, read the rules, write JavaScript per their guidelines and do review the code manually before you commit. There are tons of jQuery projects and modules that follow jQuery core JavaScript style guidelines. 

You can read more on this at - jquery.org/style-guide/js/.

4. Google JavaScript Style Guide

The best thing about Google is that they share what they do. Google’s JavaScript style guide was released in 2012 and is maintained and upgraded by Robby walker, Bob Jervis, Dan Pupius and team. Many of Google’s open source JavaScript projects are already following this style guide.

Google’s style guide is divided in two parts, one focuses on JavaScript language rules (variables, functions) and the other one focuses purely on JavaScript style rules (cosmetic aspects).

You can read about this style guide at - googlecode.com.

5. Dojo Style Guide

Dojo toolkit was at its peak somewhere back in 2012, it may not be growing at the same pace now in 2015 but is still very popular and the reason for that can be attributed to the perfectionism Dojo community believes in. There is a comprehensive style guide that core Dojo developers have created for the community.  

It derives its basics from the Java programming convention guide, you can check out the java guide at – geosoft.no.

This style guide smells a lot like Dojo and you might want to make necessary changes to make it a standard for your team of developers working on non Dojo projects. You will not find many coding standards as comprehensive as Dojo JavaScript Style guide. 

You can read more on this at - hdojotoolkit.org.

6. JavaScript "Standard" Style

This is one style to rule them all as stated by “Feross Abukhadijeh”, the one who created and released it as open source under MIT license. There is a node package “standards.js” available to do the styling for you.

You write JavaScript your way and run it past "standards" node package to auto format the code and It’s all done. This style guide does only the minimal and doesn't go deep into your JavaScript to pin point performance related aspects or do test code review.

You can get this package at - github.com.

7. Node.js Style Guide

Felix Geisendorfer has come up with this style guide by picking up the most commonly used coding practices of Node.js community and adding additional bits as required.  If you are working on a node package, you can follow this as is.

If you want to use it for some other project, you can fork it, change it as per your preferences and start using it. It’s free under creative commons license and you can get it at - node-style-guide.

8. Crockfords’s Coding Standards for JavaScript 

This one is the creation of Douglus Crockford, a JavaScript enthusiast. The argument behind defining the style guide is that “long term value of the software is directly proportional to the quality of codebase”.  

Crockford's style guide is based on java standards with enhancements made as necessary, you can follow it as is or use it as a base to create a standard for your community. You can get it at - crockford.com.

9. NPM's 'funny' Coding Style

They say, it is a bit unconventional but carefully crafted style guide to reduce the visual clutter. Any contributions to npm are supposed to follow these coding standards.

NPM style guide contains only minimal set of guidelines and talks about using commas, semicolons, indentation, white space, tabs etc. and doesn't go into guidelines around test code coverage and performance.

You can get npm style guide at - docs.npmjs.com.

10. WordPress JavaScript Coding Standards

WordPress has a huge ecosystem with almost 18% of all the websites on planet built on top of WordPress, but let us not go there right now.

WordPress has its own style guide for writing JavaScript. The style guide is derived from jQuery core style guidelines with minor modifications to suit the overall development landscape of WordPress.

You can get WordPress coding standards at - make.wordpress.org.

Conclusion

Any big community or organization where code is shared among developers and is meant to be reused needs to have a defined style guide. If you look at the coding standards mentioned in this article, you will find that many of these have 70-80% similarities and look very easy to follow.

However, the key is to follow the standards of the community or the project for which one is writing the code instead of leaving personal style traces.  Do share with the community your javascript coding standard via comments!! Happy Coding!

About The Author: noeticsunil

Sunil is the founder and contributing editor at noeticforce.com. He writes about anything and everything that makes modern mobile apps, web apps and websites possible. Passionate about coding in any language including Python, Swift, JavaScript, PHP, Java, Android & iOS dev, not excluding CSS/HTML. 

If you like this article, you can connect with noeticforce on Twitter or subscribe to noeticforce feed via RSS.