bananacss / banana-style-guide

:yellow_heart: Banana NodeJS code style guide.

NodeJS code style guide

💛 The BananaCSS NodeJS code style guide.

Table of contents

• Indentation
  • Tab indentation:small_blue_diamond:
• Newlines
  • UNIX-style newlines
• Naming Conventions
  • Avoid single letter names
  • lowerCamelCase:small_blue_diamond:
• Semicolons
  • Always use semicolons:small_blue_diamond:
• Quotes
  • Single quotes:small_blue_diamond:
• Operators
  • The === operator:small_blue_diamond:
  • Spaces for separate operators:small_blue_diamond:
• Line length
  • 80 characters:small_blue_diamond:
• References
  • const:small_blue_diamond:
  • let:small_blue_diamond:
  • One const or let per declaration statement
• Object
  • Literal syntax:small_blue_diamond:
  • x
• Array
  • Literal syntax:small_blue_diamond:
  • x
• Functions
  • Function declarations:small_blue_diamond:
  • Arrow function notation:small_blue_diamond:
• New lines
  • Parentheses () and commas
  • Method chaining
• Braces and Linebreaks
  • Braces with all blocks
  • Multi-line blocks with if and else:small_blue_diamond:
• Descriptive conditions
  • Descriptively named for non-trivial conditions
• Ternary operator
  • Split it up into multiple lines instead
• Comments
  • Write comments that explain higher level mechanisms
  • Don't use comments to trivial things

🔹 == Covered by ESLint rules.

---

Indentation

The unit of indentation is 2 spaces.

ESLint: indent

// Bad
if (condition) {
// statements
}

// Good
if (condition) {
  // statements
}

---

Newlines

Use UNIX-style newlines (\n), and a newline character as the last character of a file.

---

Naming Conventions

Avoid single letter names. Be descriptive with your naming.

// bad
function q() {
  // statements
}

// good
function query() {
  // statements
}

Use lowerCamelCase

ESLint: camelcase

// Bad
let is_cached;

// Good
let isCached;

---

Semicolons

Always use semicolons.

ESLint: semi

// Bad
let foo

// Good
let foo;

---

Quotes

Use single quotes

ESLint: quotes

// Bad
const foo = "bar";

// Good
const foo = 'bar';

---

Operators

Use the === operator

ESLint: eqeqeq

// Bad
const foo = "bar";

if (foo == 45) {
  // statements
}

// Good
const foo = 'bar';

if (foo === 45) {
  // statements
}

Use spaces for separate operators

ESLint: space-infix-ops

// Bad
let foo=4+5;

// Good
let foo = 4 + 5;

---

Line length

Avoid lines longer than 80 characters.

ESLint: max-len

// bad
const exampleMessage = 'This is a super long error that was thrown because of Batman. When you stop to think about how Batman had anything to do with this, you would get nowhere fast.';

// good
const exampleMessage = 'This is a super long error that was thrown because ' +
  'of Batman. When you stop to think about how Batman had anything to do ' +
  'with this, you would get nowhere fast.';

---

References

Use const for all of your references; avoid using var.

ESLint: prefer-const and no-const-assign

// bad
var foo = "bar";
var foo = "bar";

// good
const foo = 'bar';
const foo = 'bar';

If you must reassign references, use let instead of var.

ESLint: no-var

// bad
var count = 1;

if (condition) {
  count += 1;
}

// good, use the let.
let count = 1;

if (condition) {
  count += 1;
}

Declare one const or let per declaration statement

// Bad
const foo = require('./bar'),
      foo = require('./foo');

// Good
const foo = require('./bar');
const foo = require('./foo');

---

Object

Use the literal syntax for object creation.

ESLint: no-new-object

// bad
const foo = new Object();

// good
const foo = {};

x

// bad
const foo = {"good": 'code'
        , is generally: 'pretty'
        };

// Good
const foo = {
  good: 'code',
  'is generally': 'pretty',
};

---

Array

Use the literal syntax for array creation.

ESLint: no-array-constructor

// bad
const foo = new Array();

// good
const foo = [];

x

// Bad
const foo = [
  'hello', 'world'
];

// Good
const foo = ['hello', 'world'];

---

Functions

Use function declarations instead of function expressions.

ESLint: func-style

// bad
const foo = function () {
};

// good
function foo() {
}

When you must use function expressions (as when passing an anonymous function), use arrow function notation.

ESLint: prefer-arrow-callback

// bad
[1, 2, 3].map(function (x) {
  const y = x + 1;
  return x * y;
});

// good
[1, 2, 3].map((x) => {
  const y = x + 1;
  return x * y;
});

---

New lines

Parentheses () and commas , are not followed by indented children on new lines.

// Bad
foo.bar(
  'string',
  () => {
    tatements
  }
);

// Good
foo.bar('string', () => {
  statements
});

Method chaining

// Bad
user
.findOne({ name: 'foo' })
.populate('bar')
.exec(function(err, user) {
  return true;
});

// Bad
user.findOne({ name: 'foo' })
  .populate('bar')
  .exec(function(err, user) {
    return true;
  });

// Good
user
  .findOne({ name: 'foo' })
  .populate('bar')
  .exec(function(err, user) {
    return true;
  });

---

Braces and Linebreaks

Use braces with all blocks.

// Bad
if(condition) doSomething();

while(condition) iterating++;

// Good
if (condition) {
  // statements
}

while (condition) {
  // statements
}

If you're using multi-line blocks with if and else, put else on the same line as your if block's closing brace.

ESLint: brace-style

// bad
if (condition) {
  // statements
}
else {
  // statements
}

// good
if (condition) {
  // statements
} else {
  // statements
}

---

Descriptive conditions

Any non-trivial conditions should be assigned to a descriptively named variable or function:

// Bad
if (password.length >= 4 && /^(?=.*\d).{4,}$/.test(password)) {
  // statements
}

// Good
const isValidPassword = password.length >= 4 && /^(?=.*\d).{4,}$/.test(password);

if (isValidPassword) {
  // statements
}

---

Ternary operator

The ternary operator should not be used on a single line. Split it up into multiple lines instead.

// Bad
const foo = (condition) ? 1 : 2;

// Good
const foo = (condition)
  ? 1
  : 2;

---

Comments

Try to write comments that explain higher level mechanisms or clarify difficult segments of your code.

// Bad

const foo = "var(--bar)";

// Regexp
if (foo.replace(/var\(/, "").replace(/\)/, "") === "--bar") {
  // statements
}

// Good

let foo = 'var(--bar)';

let value = foo
              .replace(/var\(/, '') // Remove the 'var('
              .replace(/\)/, ''); // Remove the ')'

if (foo === '--bar') {
  // statements
}

Don't use comments to trivial things.

// Bad

// Create the AST
const ast = css.parse('.a{color:#000;}');

// Good

const ast = css.parse('.a{color:#000;}');

---

References

Project inspired by idiomatic.js, Node.js Style Guide, Airbnb JavaScript Style Guide and Zeno Rocha Coding Style.

---

License

MIT License © Afonso Pacifer