eslint-config-acando

A shared ESLint configuration for and by JavaScript developers at Acando.

Installation

Get started by running this command in the root of your project (npm is also supported):

yarn add eslint eslint-config-acando --dev

Then add an .eslintrc.json file to the root of your project (see Documentation below) before running the eslint command, with the following:

{
  "extends": [
    "acando"
  ]
}

NOTE: eslint plugins are available for most modern text editors, like Atom, emacs, vim, Sublime Text, etc.

Documentation

Basic configuration

eslint is configured by adding an .eslintrc.json file to the root of a project where env and extends are specified. Refer to the eslint documentation for more configuration options.

The following example shows a typical setup for linting both browser and Node.js (CommonJS) code:

{
  "env": {
    "browser": true,
    "node": true
  },
  "extends": [
    "acando"
  ]
}

A11Y

Static AST checker for accessibility rules on JSX elements.

{
  "env": {
    "browser": true,
    "node": true
  },
  "extends": [
    "acando/rules/a11y"
  ]
}

Prettier

Prettier is an opinionated JavaScript formatter, and works well in combination with Eslint. To apply prettier on git commit, install the following packages:

yarn add --dev prettier eslint-plugin-prettier prettier-eslint babel-eslint husky lint-staged

Then add this config to your package.json:

"lint-staged": {
  "*.js": [
    "prettier --single-quote --bracket-spacing=true --print-width=50 jsxBracketSameLine=true tabWidth=2 --write",
    "git add"
  ],
  "*.jsx": [
    "prettier --single-quote --bracket-spacing=true --print-width=50 jsxBracketSameLine=true tabWidth=2 --write",
    "git add"
  ]
},

Sample yarn prettier command in your run-scripts:

  "scripts": {
    "prettier": "prettier --single-quote --bracket-spacing=true --print-width=50 jsxBracketSameLine=true tabWidth=2 source/**/*.js* --write"
  }

Inferno configuration

For supporting Inferno projects, add the acando/rules/inferno extension:

{
  "env": {
    "browser": true,
    "node": true
  },
  "extends": [
    "acando",
    "acando/rules/inferno"
  ]
}

Then install eslint-plugin-inferno:

yarn add eslint-plugin-inferno --dev

React configuration

For supporting React projects, add the acando/rules/react extension:

{
  "env": {
    "browser": true,
    "node": true
  },
  "extends": [
    "acando",
    "acando/rules/react"
  ]
}

Then install eslint-plugin-react:

yarn add eslint-plugin-react --dev

React JSX

Configure eslint to lint files matching the .jsx extension:

eslint . --ext=.js,.jsx

Sample .eslintrc.json for Inferno

{
  "root": true,
  "parser": "babel-eslint",
  "extends": [
    "plugin:inferno/recommended",
    "acando",
    "acando/rules/inferno"
  ],
  "plugins": [
    "inferno",
    "prettier"
  ],
  "parserOptions": {
    "ecmaVersion": 7,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  }
}

Sample .eslintrc.json for React

{
  "root": true,
  "parser": "babel-eslint",
  "extends": [
    "acando",
    "acando/rules/react",
    "acando/rules/jsx"
  ],
  "plugins": [
    "prettier",
    "react"
  ],
  "parserOptions": {
    "ecmaVersion": 7,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  }
}

Sample project

This a sample project using React, Eslint and Prettier

https://github.com/svenanders/AdvancedReactJS_Chapter1