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
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.
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.