Skip to content

bananacss/banana-style-guide

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 

Repository files navigation

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

Releases

No releases published

Packages

No packages published