feat(confs): Base, React, Flowtype & Vue confs

There are now individual configurations for each type of project.

The README has been reformatted to ease setup.

I removed direct dependencies and we now enforce the
user to install what he needs.

The default setup is always: ESLint + prettier

Then some custom plugins are used.

The way the various config files are written may be a bit weird but I am
unsure how multiple extends works (how the order is done) and we need to always have prettier
last, so it might sometime be a bit redundant having prettier
everywhere, seems to be working still.

I'll publish this on the @next tag so you can try it:

```sh
yarn add eslint-config-algolia@next --dev
```

Then follow the README

.eslintrc.js

@@ -1,3 +1,3 @@
 module.exports = {
-  extends: './index.js',
+  extends: './base.js',
 };

.travis.yml

@@ -1,5 +1,5 @@
 language: node_js
-node_js: "6"
+node_js: stable
 cache:
   yarn: true
   directories:

README.md

@@ -2,91 +2,208 @@
 
 [![Version][version-svg]][package-url] [![Build Status][travis-svg]][travis-url] [![License][license-image]][license-url] [![Downloads][downloads-image]][downloads-url]
 
-This is [Algolia](https://www.algolia.com/)'s [ESLint](http://eslint.org/) configuration.
+This is [Algolia](https://www.algolia.com/)'s linting and formatting of
+JavaScript projects (Vanilla, React, Vue) repository.
+
+It explains to you how to setup your project to use it and never
+worry again about indentation, curly spaces, let vs const etc...
+
+This code style is only as useful as you activate travis for your project
+so that it runs linting in your test phase and warns you.
+
+Just **focus** on coding.
 
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 **Table of Contents**
 
-- [Linting (ESLint)](#linting-eslint)
-- [Auto formatting staged files](#auto-formatting-staged-files)
+- [Setup your project](#setup-your-project)
+  - [Base requirements](#base-requirements)
+  - [Vanilla](#vanilla)
+  - [React](#react)
+  - [Flow](#flow)
+  - [Vue](#vue)
+- [Existing codebase setup](#existing-codebase-setup)
+- [Automatically fixing errors](#automatically-fixing-errors)
+  - [In your editor](#in-your-editor)
+  - [Before committing](#before-committing)
 - [Ignoring files](#ignoring-files)
 - [Test](#test)
 - [Release](#release)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
-## Linting (ESLint)
+## Setup your project
+
+### Base requirements
+
+```sh
+yarn add \
+eslint babel-eslint prettier \
+eslint-config-algolia eslint-config-prettier \
+eslint-plugin-import eslint-plugin-jest eslint-plugin-prettier \
+--dev
+```
+
+### Vanilla
+
+**.eslintrc.js**
+```js
+module.exports = {
+  extends: 'algolia'
+};
+```
+
+**package.json**
+```json
+{
+  "scripts": {
+    "test": "npm run lint",
+    "lint": "eslint .",
+    "lint:fix": "npm run lint -- --fix",
+  }
+}
+```
+
+### React
+
+**terminal**
+```sh
+yarn add eslint-plugin-react --dev
+```
+
+**.eslintrc.js**
+```js
+module.exports = {
+  extends: 'algolia/react'
+};
+```
+
+**package.json**
+```json
+{
+  "scripts": {
+    "test": "npm run lint",
+    "lint": "eslint .",
+    "lint:fix": "npm run lint -- --fix",
+  }
+}
+```
 
-We use linting as a way to ease our development mostly, getting info on a variable being global in your editor
-is better than discovering it in production.
+### Flow
 
+**terminal**
 ```sh
-yarn add eslint-config-algolia babel-eslint eslint eslint-plugin-import eslint-plugin-jest eslint-config-prettier eslint-plugin-prettier --dev
-# if you are using them:
-# yarn add eslint-plugin-react --dev
-# yarn add eslint-import-resolver-webpack --dev
+yarn add eslint-plugin-flowtype --dev
 ```
 
-create an `.eslintrc.js` file:
+**.eslintrc.js**
 ```js
 module.exports = {
-  extends: ['algolia']
+  extends: 'algolia/flowtype'
 };
 ```
 
-Then add [an editor plugin](http://eslint.org/docs/user-guide/integrations.html#editors) that will show you linting errors.
+### Flow with React
 
-Do activate "fix on save" option of your plugin, it will automatically fix and format your file as much as possible.
+**terminal**
+```sh
+yarn add eslint-plugin-flowtype eslint-plugin-react --dev
+```
 
-## Auto formatting staged files
+**.eslintrc.js**
+```js
+module.exports = {
+  extends: ['algolia/flowtype', 'algolia/react']
+};
+```
 
-Please add [Prettier](https://github.com/prettier/prettier) to your JavaScript project, along
-with precommit tooling:
+**package.json**
+```json
+{
+  "scripts": {
+    "test": "npm run lint",
+    "lint": "eslint .",
+    "lint:fix": "npm run lint -- --fix",
+  }
+}
+```
+
+### Vue
 
+**terminal**
 ```sh
-yarn add prettier lint-staged husky --dev
+yarn add eslint-plugin-html --dev
 ```
 
-Then add this to your package.json:
+**.eslintrc.js**
+```js
+module.exports = {
+  extends: 'algolia/vue'
+};
+```
 
+**package.json**
 ```json
 {
   "scripts": {
-    "precommit": "lint-staged"
-  },
-  "lint-staged": {
-    "*.js": [
-      "eslint --fix",
-      "git add"
-    ]
+    "test": "npm run lint",
+    "lint": "eslint --ext .js,.vue .",
+    "lint:fix": "eslint --ext .js,.vue . --fix",
   }
 }
 ```
 
-This will automatically reformat staged files. Do not use a prettier plugin for your IDE, you only need the ESLint one.
+Drawbacks: prettier will format first line of script tags badly,
+they are working on it.
+
+We will soon afterwards switch to good prettier formatting for vue
+and proper eslint-plugin-vue. Those are all in the works but
+this setup already provides good defaults.
+
+Please also check "Lint HTML files" in your linter, that should lint
+'.vue' files.
 
-### Reformating all files
+## Existing codebase setup
 
-When installing linting on an existing project, you might want to reformat all files:
+If you have a lot of files already written and wants to now use
+our linting tools, you might have a lot of errors. There's hope!
 
+Just reformat all the files automatically and then manually fix remaining
+errors.
+
+**terminal**
 ```sh
-./node_modules/.bin/eslint . --fix
+npm run lint:fix
 ```
 
+That line is overly complicated, should get easier when prettier new
+version is released.
+
+## Setup autofix in IDE
+
+Don't overlook this part, autofixing on save is a huge productivity boost.
+
+Use any [ESLint integration](http://eslint.org/docs/user-guide/integrations)
+and activate "Fix on save" option.
+
+Also activate "Lint HTML files" when dealing with `.vue` components.
+
 ## Ignoring files
 
 See "Ignoring Files and Directories" on [ESLint website](http://eslint.org/docs/user-guide/configuring.html#ignoring-files-and-directories).
 
-## Test
+## Contibuting
+
+### Test
 
 We have a [sample-project](sample-project).
 
 ```sh
 yarn test
 ```
 
-## Release
+### Release
 
 ```sh
 npm run release

index.js → base.js

@@ -6,7 +6,7 @@ module.exports = {
     node: true,
     jest: true,
   },
-  parser: 'babel-eslint', // https://github.com/babel/babel-eslint#why-use-babel-eslint
+  parser: 'babel-eslint', // allows both flowtype and static class properties
   parserOptions: {
     ecmaVersion: 6,
     sourceType: 'module',
@@ -16,15 +16,13 @@ module.exports = {
       jsx: true,
     },
   },
-  plugins: ['react', 'import', 'jest', 'prettier'],
+  plugins: ['import', 'jest', 'prettier'],
   extends: [
     'eslint:recommended',
-    'plugin:react/recommended',
     'plugin:import/errors',
     'plugin:jest/recommended',
-    './rules.js',
-    'prettier', // enforce prettier rules to pass after our rules, so it disables useless rules
-    'prettier/react',
+    './rules/base.js',
+    'prettier',
   ],
   settings: {
     'import/extensions': ['.js'],

flowtype.js

@@ -0,0 +1,10 @@
+// eslint-disable-next-line import/no-commonjs
+module.exports = {
+  extends: [
+    './base.js',
+    'plugin:flowtype/recommended',
+    'prettier',
+    'prettier/flowtype',
+  ],
+  plugins: ['flowtype'],
+};

package.json

@@ -6,42 +6,31 @@
   "scripts": {
     "test": "./scripts/test.sh",
     "release": "./scripts/release.sh",
-    "precommit": "lint-staged"
-  },
-  "lint-staged": {
-    "*.js": [
-      "eslint --fix",
-      "git add"
-    ]
+    "lint": "eslint . --ignore-pattern sample-project",
+    "lint:fix": "npm run lint -- --fix"
   },
   "keywords": [
     "eslint",
     "eslintconfig",
     "es6",
     "algolia"
   ],
-  "main": "index.js",
-  "author": "Algolia <support@algolia.com>",
+  "main": "base.js",
+  "author": "Algolia, Inc.",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/algolia/eslint-config-algolia"
   },
   "homepage": "https://github.com/algolia/eslint-config-algolia",
-  "dependencies": {
-    "babel-eslint": "^7.2.3",
+  "devDependencies": {
+    "conventional-changelog-cli": "^1.2.0",
+    "doctoc": "^1.2.0",
     "eslint": "^4.0.0",
+    "eslint-config-algolia": "^10.1.0",
     "eslint-config-prettier": "^2.1.1",
     "eslint-plugin-import": "^2.3.0",
     "eslint-plugin-jest": "^20.0.3",
-    "eslint-plugin-prettier": "^2.1.1",
-    "eslint-plugin-react": "^7.0.1",
-    "prettier": "^1.4.4"
-  },
-  "devDependencies": {
-    "conventional-changelog-cli": "^1.2.0",
-    "doctoc": "^1.2.0",
-    "husky": "^0.13.4",
-    "json": "^9.0.4",
-    "lint-staged": "^3.6.1"
+    "eslint-plugin-prettier": "^2.1.2",
+    "json": "^9.0.4"
   }
 }

react.js

@@ -0,0 +1,11 @@
+// eslint-disable-next-line import/no-commonjs
+module.exports = {
+  extends: [
+    './base.js',
+    'plugin:react/recommended',
+    './rules/react.js',
+    'prettier',
+    'prettier/react',
+  ],
+  plugins: ['react'],
+};

rules.js → rules/base.js

@@ -257,9 +257,6 @@ module.exports = {
     'template-curly-spacing': ['error'],
     'yield-star-spacing': ['error'],
 
-    'react/no-danger': ['off'],
-    'react/display-name': ['off'],
-    'react/jsx-key': ['error'],
     'import/no-amd': ['error'],
     'import/no-commonjs': ['error'],
     'import/no-extraneous-dependencies': ['error'],

rules/react.js

@@ -0,0 +1,8 @@
+// eslint-disable-next-line import/no-commonjs
+module.exports = {
+  rules: {
+    'react/no-danger': ['off'],
+    'react/display-name': ['off'],
+    'react/jsx-key': ['error'],
+  },
+};

sample-project/.eslintrc.js

@@ -1,3 +1,3 @@
 module.exports = {
-  extends: '../index.js'
+  extends: '../react.js'
 }

sample-project/package.json

@@ -5,6 +5,10 @@
   "main": "index.js",
   "private": true,
   "keywords": [],
+  "scripts": {
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
+  },
   "author": "Algolia <support@algolia.com> (https://github.com/algolia/)",
   "license": "MIT",
   "dependencies": {