• Home
  • blog
  • Why I Use a JavaScript Style Guide and Why You Should Too

Why I Use a JavaScript Style Guide and Why You Should Too

Let’s take a look at JavaScript Standard Style by @feross, a JavaScript style guide that’s gaining popularity. It may help you reduce friction on teams and increase programmer happiness.

It’s a set of rules to make JavaScript code more consistent and can prevent boring discussion of the merits of tabs over spaces. It’s one of many styles that you can adopt and sits in the same category as other JavaScript linters such as JSLint, JSHint and ESLint.

If you’re not sure what linters are, or why you’d need one, check out our comparison of JavaScript linting tools

The Importance of Style

If you’ve been coding for a while, you’ll no-doubt have a style that you’ve grown to like. This is what happens when you write certain patterns hundreds or thousands of times, you start to find your way of coding aesthetically pleasing. All of a sudden someone else comes along and starts throwing brackets down in odd places and leaves spaces hanging off the end of lines. There may need to be words. Breathe deeply, your placement of brackets or choice of white-space doesn’t make your programs any more correct, it’s personal preference.

Each programming language has a dominant style, sometimes like in the case of Python an official style guide is presented as the correct way to author programs. Hold on, did you say 4 spaces for indentation?

Coding in the dominant style of a language will help your program fit into the language’s ecosystem. You’ll also find it easier to contribute to open source projects and have others contribute to your own if things are familiar and agreed upon at the outset.

JavaScript doesn’t have an official style guide, perhaps a de-facto standard came out of Douglas Crockford’s The Good Parts. His book presented a way to write reliable JavaScript programs and he highlighted features that we should actively avoid. He released JSLint to support these opinions and the other linters followed suit. Most of the linters are highly configurable and let you choose a style that suits you best and better yet, enforce it on others! JavaScript Standard Style is different. The style that you like best is irrelevant, what’s important is that something, anything is chosen that everyone can understand and work with.

JavaScript Style Guide

Adopting standard style means ranking the importance of code clarity and community conventions higher than personal style. This might not make sense for 100% of projects and development cultures, however open source can be a hostile place for newbies. Setting up clear, automated contributor expectations makes a project healthier.

If you’re writing a program for yourself that no-one else has to contribute to, use the tools and style that make you the happiest. When working on a team you should always aim to reduce friction where possible, be professional and don’t sweat the small stuff.

Take the time to learn the style of the existing code base before introducing your own style.

JavaScript Standard Style

  • 2 spaces – for indentation
  • Single quotes for strings – except to avoid escaping
  • No unused variables – this one catches tons of bugs!
  • No semicolons
  • Never start a line with (, [, or `
  • Space after keywords if (condition) { ... }
  • Space after function name function name (arg) { ... }
  • Always use === instead of == – but obj == null is allowed to check null || undefined.
  • Always handle the Node.js err function parameter
  • Always prefix browser globals with window – except document and navigator are okay
    • Prevents accidental use of poorly-named browser globals like open, length,
      event, and name.

See the complete list of rules

Continue reading %Why I Use a JavaScript Style Guide and Why You Should Too%