Saagie JavaScript Style Guide() {

At Saagie, we love the Airbnb JavaScript Style Guide and we follow most of the rules defined by Airbnb.

Table of Contents

1. Overrides
2. React

Overrides

• 1.1 Comma dangle: trailing commas are required in every multiline structure. This is mostly to avoid a git difference and pollute git diffs.

// 👎 bad, missing comma
var foo = {
    bar: "baz",
    qux: "quux"
};

// 👍 good
var foo = {
    bar: "baz",
    qux: "quux",
};

// 👎 bad, unnecessary commas
var foo = { bar: "baz", qux: "quux", };
var arr = [1,2,];
var arr = [1,
    2,];

// 👍 good
var foo = {bar: "baz", qux: "quux"};
var arr = [1,2];
var arr = [1,
    2];

// 👎 bad, missing commas
var arr = [
    1,
    2
];

foo({
  bar: "baz",
  qux: "quux"
});

// 👍 good
var arr = [
    1,
    2,
];

foo({
  bar: "baz",
  qux: "quux",
});

• 1.2 Function name: function's name is not mandatory.

// 👍 allowed code
Foo.prototype.bar = function() {};

const cat = {
  meow: function() {}
}

(function() {
    // ...
}())

export default function() {}

• 1.3 Function paren newline: Disable consistent linebreaks inside function parentheses.

• 1.4 Implicit arrow linebreak: Enforce the location of arrow function bodies with implicit returns.

// 👎 bad
(foo) =>
  bar;

(foo) =>
  (bar);

(foo) =>
  bar =>
    baz;

(foo) =>
(
  bar()
);

// 👍 good
(foo) => bar;

(foo) => (bar);

(foo) => bar => baz;

(foo) => (
  bar()
);

• 1.5 No extraneous dependencies: Disable forbid the use of extraneous packages.

• 1.6 Prefer default export: Disable the prefer default export rule.

• 1.7 Indentation: Will warn if the indentation is not equal to 2

• 1.8 Max line length: Enforce a maximum line length

• 1.9 No console: Disallow the use of console

// 👎 contains console
console.error("foo");

• 1.10 No multiple empty lines: Disallow multiple empty lines

import foo from "bar"
// 👎 contains too much empty lines



foo();

• 1.11 No trailing spaces: a greatly configured .editorconfig that remove trailing spaces should take precedence over this eslint rule.

• 1.12 No underscore dangle: This rule is disabled, underscore dangle is allowed.

// 👍 allowed
var foo_;
var __proto__ = {};
foo._bar();

• 1.13 No unused variables: Unused variables are not allowed and will be declared as warnings.

• 1.14 No variable use before define: Variables should not be used before defined.

⬆️ Back to top

React

• 2.1 Forbid PropTypes: Disable this rule so developers can use any.

• 2.2 JSX filename extensions: Allow .js and .jsx to be extensions for JSX files.

• 2.3 JSX one expression per line: Disable this rule so developers can use multiple JSX expression per line.

• 2.4 JSX props spreading: Allow developers to spread props.

// 👍 allowed
<App {...props} />

• 2.5 Prefer stateless function: Enforce stateless React Components to be written as a pure function.

// 👎 error
var Hello = createReactClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

// 👍 ok
const Foo = function(props, context) {
  const {
    location
  } = context.router;

  return <div>{props.foo}</div>;
};

• 2.6 Label has associated control: Enforce that a label tag has a text label and an associated control.

⬆️ Back to top

}