Shopgate Eslint Configuration

Shopgate's reasonable approach to JavaScript.

This configuration is an extension of the airbnb codestyle which is available here.

Installation

npm i @shopgate/eslint-config --save-dev

Usage

Add the following to the .eslintrc in your project:

{
  "extends": "@shopgate/eslint-config",
  ...
}

Rules

1. General 1.1. Commented out code 1.2. Comma dangle 1.3. Multiple empty lines
2. Comments 2.1. Capitalized comments
3. Functions 3.1. Point free
4. Objects 4.1. Single line objects
5. Documentation 5.1. JSDoc requirement
6. React 6.1 Prop Types

General

Commented out code

No code should be left commented out.

/**
 * static propTypes = {
 *   width: PropTypes.string.isRequired,
 *   color: PropTypes.string,
 *   height: PropTypes.string.isRequired,
 * };
 */

⬆ back to top

Comma dangle

Dangling commas are required for objects with multiple items or properties. This applies to Array, Object, Import and Export.

// bad
const myObject = {
  a: 1,
  b: 2
};

// good
const myObject = {
  a: 1,
  b: 2,
};

// bad
import { var1, var2, var3 } from 'Variables';

// good
import {
  var1,
  var2,
  var3,
} from 'Variables';

⬆ back to top

Multiple empty lines

There should not be multiple empty lines between code blocks.

// bad
const a = 1;
const b = 1;


while (...) {
  ...
}

// good
const a = 1;
const b = 2;

while (...) {
  ...
}

⬆ back to top

Comments

Capitalized comments

All comments should beging with a capital letter. This makes comments more readable and forces more care when constructing comments.

// bad
/**
 * toString() needs to be called here because...
 */

// good
/**
 * This string now needs to be lowercase so that...
 */

⬆ back to top

Functions

Point free

A function should not simply call another function.

const funcA = (params) {
  ...
};

const funcB = (params) {
  funcA(params);
};

⬆ back to top

Objects

Single line objects

If an object is defined with multiple properties then each property should occupy a new line.

// bad
const x = { a: 1, b: 2, c: 3 };

// good
const w = { a: 1 };
const x = {
  a: 1,
  b: 2,
  c: 3,
};

⬆ back to top

Documentation

JSDoc requirement

Every Function, Class, Method and Arrow Function definition should include a valid JSDoc specification.

// bad (missing parameter descriptions)
/**
 * This is funcA. It does something complicated.
 */
const funcA = (param1, param2) {
  ...
};

// bad (invalid specification)
/**
 * This is funcB. It also does something complicated.
 * @param {Object} parameters
 */
const funcB = (param1, param2) {
  ...
};

// good
/**
 * It does something simple because we are using our heads.
 * @param {string} param1 - My first parameter.
 * @param {boolean} param2 - My Second parameter.
 */
const funcC = (param1, param2) {
  ...
};

⬆ back to top

React

Prop Types

Proptypes should be sorted by type (required or not) and alphabetically.

// bad
static propTypes = {
  width: PropTypes.string.isRequired,
  color: PropTypes.string,
  height: PropTypes.string.isRequired,
};

// good
static propTypes = {
  height: PropTypes.string.isRequired,
  width: PropTypes.string.isRequired,
  color: PropTypes.string,
};

⬆ back to top