Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/saagie/javascript
JavaScript Style Guide
https://github.com/saagie/javascript
eslint eslint-config eslint-config-airbnb
Last synced: 7 days ago
JSON representation
JavaScript Style Guide
- Host: GitHub
- URL: https://github.com/saagie/javascript
- Owner: saagie
- License: mit
- Created: 2020-06-04T13:38:04.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2020-07-17T13:16:08.000Z (over 4 years ago)
- Last Synced: 2024-10-30T08:04:24.902Z (2 months ago)
- Topics: eslint, eslint-config, eslint-config-airbnb
- Language: JavaScript
- Homepage:
- Size: 34.2 KB
- Stars: 3
- Watchers: 6
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Saagie JavaScript Style Guide() {
At Saagie, we love the [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript)
and we follow most of the rules defined by Airbnb.
## Table of Contents
1. [Overrides](#overrides)
1. [React](#react)
## Overrides
- [1.1](#comma-dangle) **Comma dangle**: trailing commas are required in every
multiline structure. This is mostly to avoid a git difference and pollute git
diffs.
```javascript
// 👎 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](#func-names) **Function name**: function's name is not mandatory.
```javascript
// 👍 allowed code
Foo.prototype.bar = function() {};
const cat = {
meow: function() {}
}
(function() {
// ...
}())
export default function() {}
```
- [1.3](#function-paren-newline) **Function paren newline**: Disable consistent
linebreaks inside function parentheses.
- [1.4](#implicit-arrow-linebreak) **Implicit arrow linebreak**: Enforce the
location of arrow function bodies with implicit returns.
```javascript
// 👎 bad
(foo) =>
bar;
(foo) =>
(bar);
(foo) =>
bar =>
baz;
(foo) =>
(
bar()
);
// 👍 good
(foo) => bar;
(foo) => (bar);
(foo) => bar => baz;
(foo) => (
bar()
);
```
- [1.5](#import/no-extraneous-dependencies) **No extraneous dependencies**:
Disable forbid the use of extraneous packages.
- [1.6](#import/prefer-default-export) **Prefer default export**:
Disable the prefer default export rule.
- [1.7](#indent) **Indentation**: Will warn if the indentation is not equal to 2
- [1.8](#max-len) **Max line length**: Enforce a maximum line length
- [1.9](#no-console) **No console**: Disallow the use of console
```javascript
// 👎 contains console
console.error("foo");
```
- [1.10](#no-multiple-empty-lines) **No multiple empty lines**:
Disallow multiple empty lines
```javascript
import foo from "bar"
// 👎 contains too much empty lines
foo();
```
- [1.11](#no-trailing-spaces) **No trailing spaces**: a greatly configured
`.editorconfig` that remove trailing spaces should take precedence over this
eslint rule.
- [1.12](#no-underscore-dangle) **No underscore dangle**:
This rule is disabled, underscore dangle is allowed.
```javascript
// 👍 allowed
var foo_;
var __proto__ = {};
foo._bar();
```
- [1.13](#no-unused-vars) **No unused variables**:
Unused variables are not allowed and will be declared as warnings.
- [1.14](#no-use-before-define) **No variable use before define**:
Variables should not be used before defined.
[⬆️ Back to top](#table-of-contents)
## React
- [2.1](#react/forbid-prop-types) **Forbid PropTypes**:
Disable this rule so developers can use `any`.
- [2.2](#react/jsx-filename-extension) **JSX filename extensions**:
Allow `.js` and `.jsx` to be extensions for JSX files.
- [2.3](#react/jsx-one-expression-per-line) **JSX one expression per line**:
Disable this rule so developers can use multiple JSX expression per line.
- [2.4](#react/jsx-props-no-spreading) **JSX props spreading**:
Allow developers to spread `props`.
```javascript
// 👍 allowed
```
- [2.5](#react/prefer-stateless-function) **Prefer stateless function**:
Enforce stateless React Components to be written as a pure function.
```javascript
// 👎 error
var Hello = createReactClass({
render: function() {
return
Hello {this.props.name};
}
});
// 👍 ok
const Foo = function(props, context) {
const {
location
} = context.router;
return
{props.foo};
};
```
- [2.6](#jsx-a11y/label-has-associated-control) **Label has associated control**:
Enforce that a label tag has a text label and an associated control.
[⬆️ Back to top](#table-of-contents)
# }