# eslint-config-acando 

A shared [ESLint](http://eslint.org/) 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):

```sh
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:

```json
{
  "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](http://eslint.org/docs/user-guide/configuring) for more configuration options.

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

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

#### A11Y

Static AST checker for accessibility rules on JSX elements.

```json
{
  "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:

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

Then install [`eslint-plugin-inferno`](https://github.com/infernojs/eslint-plugin-inferno):

```sh
yarn add eslint-plugin-inferno --dev
```

### React configuration

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

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

Then install [`eslint-plugin-react`](https://github.com/yannickcr/eslint-plugin-react):

```sh
yarn add eslint-plugin-react --dev
```

#### React JSX

Configure `eslint` to lint files matching the `.jsx` extension:

```sh
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