@shopgate/eslint-config

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

• General 1.1. Commented out code 1.2. Comma dangle 1.3. Multiple empty lines
• Comments 2.1. Capitalized comments
• Functions 3.1. Point free
• Objects 4.1. Single line objects
• Documentation 5.1. JSDoc requirement
• 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