Style Guide

JavaScript

• Type with flow

• Style with prettier (see section below)

• Lint with eslint and use eslint:recommended at a minimum

• Test with jest and enzyme

• 2 spaces (instead of tabs)

• Promises (not callbacks)

• No decorators

• No mobx

• Place tests alongside the file(s) it tests (not in a separate directory)

• End test files with .test.js

React/Redux

• Lint with tslint-react or eslint’s plugin:react/recommended at a minimum.

• No unnecessary and empty <div>’s

• If this.props.<variable name> is used more than once, dereference it at the top of render.

• Extract variables used in render() to the top of render()

• API calls should lie in a testable file outside of components.

• Components should not wait for promises to resolve, instead listen on props via redux’ mapStateToProps().

• Declare and export components in separate places (otherwise the web inspector cannot name components properly)

Flowtype

• Any types used in more than one file should be placed in src/types.js

• Add flow linting via eslint-plugin-flowtype

• Disallow “any” with eslint no-weak-types (use “Obect” and “Function” to cover complicated use-cases)

• In components which use mapStateToProps, separate OwnProps from ConnectedProps into separate types. Join them with type Props = OwnProps & ConnectedProps. In addition, if using mapDispatchToProps, create a type DispatchProps and join that with Props.

𝓣𝓢 TypeScript 𝓣𝓢

• Lint with tslint:recommended at a minimum.

• No implicit any (type everything that’s not inferable)

• Any variable declared without an initial value should be typed

Prettier

Add the following to package.json:

  "prettier": {
    "overrides": [
      {
        "files": ["*.js", "*.scss", "*.css", "*.pcss"],
        "options": {
          "singleQuote": true,
          "trailingComma": "all"
        }
      }
    ]
  }

The following information about prettier is better described on the prettier documentation here. Use lint-staged to auto-call prettier in a precommit “script”:

  "lint-staged": {
    "src/**/*.scss": ["prettier --parser scss --write", "git add"],
    "src/**/*.{js,css}": ["prettier --parser flow --write", "git add"],
    "nightwatch/**/*.js": ["prettier --write", "git add"]
  }

Npm

• Support the following script’s in your root package.json:

1. “watch”: Starts the dev server
2. “build”: Builds static assets (if they exist) “/src” -> “/build”
3. “test”: Runs all tests (linting first, then unit tests)