Coding style

To enforce coding rules, we used ESLint, which we integrated with our continuous integration builds to ensure no commit breaking the rules would go unnoticed. This may seem a little bit overkill, but when an app reaches ~100k lines of code, you definitely want to enforce consistency in your code base. Smart ESLint rules also allow to prevent some sources of annoying bugs, such as variables badly scoped, or unhanded cases in your program's control flow.

We mostly chose to follow Airbnb's coding rules, although we chose to disable some, or to make some stronger (trigger errors instead of warnings). The process we followed when implementing a new ESLint rule, or updating to a newer version, was often the following :

• enable a rule as a warning (showing up in the builds results and on our internal messaging app),
• progressively fix all the new warnings,
• switch the rule to trigger an error so that it never appears again.

This is, in a way, close to the approach we had when working with Flow : we cleaned our codebase one linting rule at a time, by integrating stricter rules progressively. This process participated in making the coding style consistent, independently of who wrote the file one is reading.

Sample ESLint configuration

Here is an extract of what we found useful when developing our front-end with React :

{
  "extends": "airbnb",
  "parser": "babel-eslint",
  "rules": {
    "strict": 0, // Unnecessary because we're using ES6 modules
    "react/no-multi-comp": 0, // We allow multiple components in the same file (be smart though...)
    "max-len": 0, // We have big screens (be smart though...)
    "react/jsx-filename-extension": 0, // We voluntarily use .js for JSX

    // Maybe later but not sure
    "react/jsx-curly-spacing": 0,
    "no-prototype-builtins": 0,
    "jsx-a11y/label-has-for": 0,
    "import/no-named-as-default": 0,
    "no-return-assign": 0,
    "no-case-declarations": 0,

    "no-underscore-dangle": [2, { "allow": ["_class"] }], // Allow for reserved words
    "no-mixed-operators": [2, {"allowSamePrecedence": true}],
    "space-before-function-paren": [2, "never"],
    "indent": [2, 2, { "SwitchCase": 1 }],
  },
  "env": {
    "mocha": true,
    "browser": true,
  }
}