Indentation Character

Always use spaces characters where two (2) spaces are used for indentation. The usage of tab characters is disallowed. A tab could be a different number of columns depending on the environment, but a space is always one column. Adhering to this rule increases the code readability and maintainability significantly.

ESLint: indent

Examples

Note: The » character represents a tab.

⇣ Incorrect code for this rule:

function winter() {
 » let snow;
}

function winter() {
    let snow;
}

function winter() {
 let snow;
}

⇡ Correct code for this rule:

function winter() {
  let snow;
}

Before Blocks

Place one (1) space before the leading brace.

ESLint: space-before-blocks

Examples

⇣ Incorrect code for this rule:

function snow(){
  console.log("snow");
}

winter.set("snow",{
  density: 20,
  frozen: false
});

⇡ Correct code for this rule:

function snow() {
  console.log("snow");
}

winter.set("snow", {
  density: 20,
  frozen: false
});

Around Keywords

Place one (1) space before the opening parenthesis in control statements (if, while etc.). Place no space between the argument list and the function name in function calls and declarations.

ESLint: keyword-spacing

Examples

⇣ Incorrect code for this rule:

if(isWinter) {
  snow ();
}

function snow () {
  console.log ("falling");
}

⇡ Correct code for this rule:

if (isWinter) {
  snow();
}

function snow() {
  console.log("falling");
}

Infix Operator Spacing

Set off operators with spaces.

ESLint: space-infix-ops

Examples

⇣ Incorrect code for this rule:

const snowflakes=snow+5;

⇡ Correct code for this rule:

const snowflakes = snow + 5;

Newline

End files with a single newline character. Prefer the LF control character (*nix based OS) and avoid the usage of CRLF characters (mostly Microsoft Windows based OS).

ESlint: eol-last

Examples

⇣ Incorrect code for this rule:

import { snow } from "./Winter";
export default snow;

import { snow } from "./Winter";
export default snow;¬
¬

⇡ Correct code for this rule:

import { snow } from "./Winter";
export default snow;¬

Chains

Use indentation when making long method chains. Use a leading dot, which emphasizes that the line is a method call, not a new statement.

ESLint: newline-per-chained-call and no-whitespace-before-property

Examples

⇣ Incorrect code for this rule:

const elements = ["snow", "frost", "ice"];
elements.map(element => `sparkling ${element}`).find("snow").highlight().tokenize(2).end().updateCount();

const elements = ["snow", "frost", "ice"];
elements.map(element => `sparkling ${element}`).
  find("snow").
    highlight().
    tokenize(2).
  end().
    updateCount();

const elements = ["snow", "frost", "ice"];
elements.map(element => `sparkling ${element}`).find("snow").highlight().tokenize(2).find("frost")
    tokenize(3).highlight(false).find("ice").tokenize(1)
    .find("wind").highlight().tokenize().updateCount()
    .toString();

⇡ Correct code for this rule:

const elements = ["snow", "frost", "ice"];
elements
  .map(element => `sparkling ${element}`)
  .find("snow")
  .highlight()
  .tokenize(2)
  .end()
  .updateCount();

const elements = ["snow", "frost", "ice"];
elements
  .map(element => `sparkling ${element}`)
  .tokenize(2)
  .updateCount();

After Blocks

Leave a blank line after blocks and before the next statement.

Examples

⇣ Incorrect code for this rule:

if (winter) {
  return snow;
}
return frost;

const winter = {
  snow() {},
  frost() {}
};
return winter;

const winter = [
  function snow() {},
  function frost() {}
];
return winter;

⇡ Correct code for this rule:

if (winter) {
  return snow;
}

return frost;

const winter = {
  snow() {},

  frost() {}
};

return winter;

const winter = [function snow() {}, function frost() {}];

return winter;

Padded Blocks

Do not pad blocks with blank lines.

ESLint: padded-blocks

Examples

⇣ Incorrect code for this rule:

function winter() {

  console.log(snow);

}

if (winter) {

  console.log(snow);
} else {
  console.log(frost);

}

class Winter {

  constructor(snow) {
    this.snow = snow;
  }
}

⇡ Correct code for this rule:

function winter() {
  console.log(snow);
}

if (winter) {
  console.log(snow);
} else {
  console.log(frost);
}

class Winter {
  constructor(snow) {
    this.snow = snow;
  }
}

Inside Parentheses

Do not add spaces inside parentheses.

ESLint: space-in-parens

Examples

⇣ Incorrect code for this rule:

function winter( element ) {
  return element;
}

if ( winter ) {
  console.log(snow);
}

⇡ Correct code for this rule:

function winter(element) {
  return element;
}

if (winter) {
  console.log(snow);
}

Inside Brackets

Do not add spaces inside brackets.

ESLint: array-bracket-spacing

Examples

⇣ Incorrect code for this rule:

const winter = [ "snow", "frost", "ice" ];
console.log(winter[ 0 ]);

⇡ Correct code for this rule:

const winter = ["snow", "frost", "ice"];
console.log(winter[0]);

Inside Braces

Add spaces inside curly braces.

ESlint: object-curly-spacing

Examples

⇣ Incorrect code for this rule:

const season = {name: "winter"};

⇡ Correct code for this rule:

const season = { name: "winter" };

Maximum Line Length

Avoid having lines of code that are longer than 100 characters including whitespaces. Adhering to this rule increases the code readability and maintainability significantly.

Note that the rule for long strings is exempt from this rule, and should not be broken up.

ESLint: max-len

Examples

⇣ Incorrect code for this rule:

const season = winter && winter.elements && winter.elements.snow && winter.elements.snow.state && winter.elements.snow.state.temperature && winter.elements.snow.state.temperature.celsius;

season({ name: "winter", elements: ["snow", "frost"] }).load(() => console.log("Sparkling")).catch(() => console.log("Melting"));

⇡ Correct code for this rule:

const season =
  winter &&
  winter.elements &&
  winter.elements.snow &&
  winter.elements.snow.state &&
  winter.elements.snow.state.temperature &&
  winter.elements.snow.state.temperature.celsius;

season({
  name: "winter",
  elements: ["snow", "frost"]
})
  .load(() => console.log("Sparkling"))
  .catch(() => console.log("Melting"));

Inside Blocks

Use consistent spacing inside an open block token and the next token on the same line. This rule also enforces consistent spacing inside a close block token and previous token on the same line.

ESLint: block-spacing

Examples

⇣ Incorrect code for this rule:

function snow() {return true;}
if (snow) { flakes = 0;}

⇡ Correct code for this rule:

function snow() { return true; }
if (snow) { flakes = 0; }

Around Commas

No spaces before commas and require a space after commas.

ESLint: comma-spacing

Examples

⇣ Incorrect code for this rule:

var snow = 1,flakes = 2;
var winter = [1 , 2];

⇡ Correct code for this rule:

var snow = 1, flakes = 2;
var winter = [1, 2];

Inside Computed Properties

Use spacing inside of computed property brackets.

ESLint: computed-property-spacing

Examples

⇣ Incorrect code for this rule:

winter[snow ];
winter[ "snow"];
var flakes = {[ frost ]: cold};
winter[snow[ ice ]];

⇡ Correct code for this rule:

obj[snow];
obj["snow"];
var flakes = { [frost]: cold };
winter[snow[ice]];

Around Function Signatures

No spaces between functions and their invocations.

ESLint: func-call-spacing

Examples

⇣ Incorrect code for this rule:

func ();

func
();

⇡ Correct code for this rule:

func();

Inside Object Literal Properties

Use spacing between keys and values in object literal properties.

ESLint: key-spacing

Examples

⇣ Incorrect code for this rule:

var winter = { "snow" : 42 };
var arctic = { "ice":42 };

⇡ Correct code for this rule:

var winter = { "snow": 42 };

Trailing At The End Of Lines

No trailing spaces at the end of lines.

ESLint: no-trailing-spaces

Multiple Empty Lines

No multiple empty lines, only allow one (1) newline at the end of files, and no newline at the beginning of files. Also do not use multiple blank lines to pad code.

ESLint: no-multiple-empty-lines

Examples

⇣ Incorrect code for this rule:

var winter = 1;


var snow = 2;

// 2+ newlines at end of file.
var winter = 1;
var snow = 2;


// 1+ newline(s) at beginning of file.

var winter = 1;
var snow = 2;

const snow = winter => {
  // code padded with 2+ newlines
  const snow = winter.getSnow();


  const frost = winter.getFrost();



  const ice = winter.getIce();
}

⇡ Correct code for this rule:

var winter = 1;
var snow = 2;

const snow = winter => {
  // code padded with 2+ newlines
  const snow = winter.getSnow();

  const frost = winter.getFrost();

  const ice = winter.getIce();
};

results matching ""

    No results matching ""