JavaScript Style Guides

JavaScript Style GuidesEveryone has their own style when coding. For some people, the style they use might be so inconsistent that it looks like they used a program to randomize the code layout so it would confuse everyone as much as possible. In general it’s best to use a consistent coding style, for your own sake, and for the sake of everyone else who might look at your code. To keep things consistent you can use a style guide, which will help you remember and use your rules.

The Guides

There are style guides all over the internet, and even plenty that aren’t shown publicly that are used inside companies to control the consistency of code between their employees. Google, jQuery, Dojo, Douglas Crockford, and many others have come up with their own style guides and they’re each slightly different in their own ways. Each guide is great in its own right, but you might never find one that is right for you.

Part of the reason there are so many style guides out there is because every person is different and has their own preferences. I’ve seen this a lot in programming, even between myself and my twin brother. If two people should have identical coding styles, it should be identical twins right? The point of coding style guides is consistency, which allows people to be able to read your code more quickly and easily. Usually, most coding styles are pretty similar so that even if people didn’t share the same guidelines, it would be simple enough to read.

If you’re working in a large group of people, try to get everyone to adopt the same set of guidelines, but also realize these are guidelines and not rules. If your team has a particularly difficult time determining guidelines that will work for all of the members, you could go the way of the NPM style guide (though I personally wouldn’t recommend that particular guide), which is pretty minimal and offers a basic set of guidelines rather than a comprehensive set. Guides can be strayed away from for the sake of individual circumstances that would actually be more readable if they’re done a different way, though I would consult with your team members to decide the best course of action.

My Personal Guide

Personally I don’t currently use a well-defined style guide, which, I’m sure, is the case for many people. Part of the reasoning behind this is that as I mature in my programming, I see more and more styles and change the style of my programming based on those experiences, but overall I’ve had a pretty consistent style. I’ve always preferred 4-space tabs, semi-liberal spacing (though not as liberal as many other programmers), and other such commonplace things.

Beautification

If you ever run into some very nasty-looking or minified code, you can always use tools like Online JavaScript Beautifier to clean it up a lot, though it can’t make it perfect because it probably doesn’t follow all of your guidelines, but the point is getting the code to a mostly readable format. You could also use Code Painter to format your code according to certain rules that you can set.

End Braces on Their Own Line

JavaScript style guides are a useful tool, especially on public code or code used within teams, but don’t put too much faith in them. It’s not they’re Jesus and gave up their lives to save yours or anything. Just remember they’re guidelines, not laws, but they’re there for a reason. If you don’t have a style guide, just keep chanting “readability” as you code, though still remember the functionality is far more important than the readability of the code. If you’re too busy worrying about readability to be able to write code that actually does something, then you’re doing it wrong. Just have fun and Happy Coding!

About the Author

Author: Joe Zim

Joe Zim

Joe Zimmerman has been doing web development ever since he found an HTML book on his dad's shelf when he was 12. Since then, JavaScript has grown in popularity and he has become passionate about it. He also loves to teach others though his blog and other popular blogs. When he's not writing code, he's spending time with his wife and children and leading them in God's Word.


  • http://browniefed.com/ browniefed

    Looks like someone just read maintainable javascript haha, but I’m surprised you did not say anything about idiomatic javascript(https://github.com/rwldrn/idiomatic.js/)

    • http://www.joezimjs.com Joe Zimmerman

       I considered listing Idiomatic, but opted out for no really good reason.

  • pixelBender67

    a lot of discussion about leaving the semi-colons off lately, I myself use them, just makes things more readable (for me) 

  • Steve V

    Which notepad++ plugins are you using to work with html and js ? I am watching your backbone tutorials (btw, they are great!) and would like to recreate an environment just like yours (js auto-completion etc)
    Thank you!

    • http://www.joezimjs.com Joe Zimmerman

      The only Notepad++ plugin I use is Zen Coding, which I don’t think is used much at all in the videos, but it’s awesome for writing html. Look it up. The auto-completion is not a plugin. Go to Settings->Preferences->Backup/Auto-Completion tab and check the box labeled “Enable auto-completion on each input”. Soo many people ask me this. I would think that programmers would be techy enough that the first thing they’d do when they get a text editor is check to see what options they can change.