feat(formatting): use eslint-plugin-prettier

Before this change, we were no more able to have some ESLint rules auto
fixed along with prettier formatting. We only got prettier auto formatting (with the IDE plugin).

With this change, you now only have to use the eslint editor plugin of
your choice and activate "autofix on save". It will:
- fix all possibles ESLint errors (that won't conflict with prettier)
- fix formatting following prettier config (that is stored inside the
module).

Upgrade guide:
- remove prettier plugin from your IDE, use eslint editor plugin with
autosave on
- `yarn add eslint-config-algolia babel-eslint eslint eslint-plugin-import eslint-plugin-jest eslint-config-prettier eslint-plugin-prettier --dev`
- switch lint-staged command to `eslint --fix`

Author: vvo

README.md

@@ -22,7 +22,10 @@ We use linting as a way to ease our development mostly, getting info on a variab
 is better than discovering it in production.
 
 ```sh
-yarn add eslint-config-algolia babel-eslint eslint eslint-plugin-import eslint-plugin-jest eslint-config-prettier eslint-plugin-react eslint-import-resolver-webpack --dev
+yarn add eslint-config-algolia babel-eslint eslint eslint-plugin-import eslint-plugin-jest eslint-config-prettier eslint-plugin-pretteir --dev
+# if you are using them:
+# yarn add eslint-plugin-react --dev
+# yarn add eslint-import-resolver-webpack --dev
 ```
 
 create an `.eslintrc.js` file:
@@ -32,12 +35,14 @@ module.exports = {
 };
 ```
 
-Then add [an editor plugin](http://eslint.org/docs/user-guide/integrations.html#editors) that will show you linting errors, do not activate
-auto formatting fix, we use prettier for this.
+Then add [an editor plugin](http://eslint.org/docs/user-guide/integrations.html#editors) that will show you linting errors.
 
-## Formatting (Prettier)
+Do activate "fix on save" option of your plugin, it will automatically fix and format your file as much as possible.
 
-Please add [Prettier](https://github.com/prettier/prettier) to your JavaScript project:
+## Auto formatting staged files
+
+Please add [Prettier](https://github.com/prettier/prettier) to your JavaScript project, along
+with precommit tooling:
 
 ```sh
 yarn add prettier lint-staged husky --dev
@@ -52,29 +57,21 @@ Then add this to your package.json:
   },
   "lint-staged": {
     "*.js": [
-      "prettier --write --single-quote --trailing-comma es5",
+      "eslint --fix",
       "git add"
     ]
   }
 }
 ```
 
-This will automatically reformat staged files.
-
-Rules:
-  - single-quote true
-  - trailing-comma es5
-
-Add [an editor plugin](https://github.com/prettier/prettier#atom), configure the rules, done.
+This will automatically reformat staged files. Do not use a prettier plugin for your IDE, you only need the ESLint one.
 
 ### Reformating all files
 
-When installing prettier on an existing project, you might want to reformat all files:
+When installing linting on an existing project, you might want to reformat all files:
 
 ```sh
-./node_modules/.bin/prettier --write --single-quote --trailing-comma es5 "*.js"
-# ./node_modules/.bin/prettier --write --single-quote --trailing-comma es5 "folder/**/*.js"
-# ./node_modules/.bin/prettier --write --single-quote --trailing-comma es5 "{folder,folder}/**/*.js"
+./node_modules/.bin/eslint . --fix
 ```
 
 ## Ignoring files

index.js

@@ -16,7 +16,7 @@ module.exports = {
       jsx: true,
     },
   },
-  plugins: ['react', 'import', 'jest'],
+  plugins: ['react', 'import', 'jest', 'prettier'],
   extends: [
     'plugin:react/recommended',
     'plugin:import/errors',

package.json

@@ -10,7 +10,7 @@
   },
   "lint-staged": {
     "*.js": [
-      "prettier --write --single-quote --trailing-comma es5",
+      "eslint --fix",
       "git add"
     ]
   },
@@ -28,19 +28,20 @@
   },
   "homepage": "https://github.com/algolia/eslint-config-algolia",
   "dependencies": {
-    "babel-eslint": "^7.2.1",
-    "eslint": "^3.18.0",
-    "eslint-config-prettier": "^1.5.0",
+    "babel-eslint": "^7.2.3",
+    "eslint": "^3.19.0",
+    "eslint-config-prettier": "^2.0.0",
     "eslint-plugin-import": "^2.0.1",
-    "eslint-plugin-jest": "^19.0.1",
-    "eslint-plugin-react": "^6.10.3",
-    "prettier": "^0.22.0"
+    "eslint-plugin-jest": "^20.0.0",
+    "eslint-plugin-prettier": "^2.0.1",
+    "eslint-plugin-react": "^7.0.0",
+    "prettier": "^1.3.1"
   },
   "devDependencies": {
     "conventional-changelog-cli": "^1.2.0",
     "doctoc": "^1.2.0",
     "husky": "^0.13.3",
     "json": "^9.0.4",
-    "lint-staged": "^3.4.0"
+    "lint-staged": "^3.4.1"
   }
 }

rules.js

@@ -171,5 +171,6 @@ module.exports = {
     'import/no-amd': ['error'],
     'import/no-commonjs': ['error'],
     'import/no-extraneous-dependencies': ['error'],
+    'prettier/prettier': ['error', { trailingComma: 'es5', singleQuote: true }],
   },
 };

sample-project/index.js

@@ -1,4 +1,4 @@
 import connect from './src/connect.js';
 import Provider from './src/Provider.js';
 
-export {Provider, connect};
+export { Provider, connect };

sample-project/package.json

@@ -8,16 +8,18 @@
   "author": "Algolia <support@algolia.com> (https://github.com/algolia/)",
   "license": "MIT",
   "dependencies": {
-    "react-addons-shallow-compare": "^15.2.1"
+    "prop-types": "^15.5.9",
+    "react": "^15.5.4",
+    "react-addons-shallow-compare": "^15.5.2"
   },
   "devDependencies": {
-    "babel-eslint": "^7.1.1",
-    "eslint": "^3.17.1",
-    "eslint-config-algolia": "^6.0.1",
-    "eslint-config-prettier": "^1.5.0",
+    "babel-eslint": "^7.2.3",
+    "eslint": "^3.19.0",
+    "eslint-config-algolia": "^7.0.3",
+    "eslint-config-prettier": "^2.0.0",
     "eslint-plugin-import": "^2.2.0",
-    "eslint-plugin-jest": "^19.0.1",
-    "prettier": "^0.22.0",
-    "react": "^15.2.1"
+    "eslint-plugin-jest": "^20.0.0",
+    "eslint-plugin-prettier": "^2.0.1",
+    "prettier": "^1.3.1"
   }
 }

sample-project/src/Provider.js

@@ -1,4 +1,5 @@
-import {Component, PropTypes, Children} from 'react';
+import { Component, Children } from 'react';
+import PropTypes from 'prop-types';
 
 import createStore from './createStore.js';
 import storeShape from './storeShape.js';

sample-project/src/connect.js

@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import shallowCompare from 'react-addons-shallow-compare';
 
 import storeShape from './storeShape.js';
@@ -9,7 +9,7 @@ const getDisplayName = WrappedComponent =>
 export default function connect(mapStateToProps) {
   return WrappedComponent =>
     class Connect extends Component {
-      static contextTypes = {algoliaStore: storeShape.isRequired};
+      static contextTypes = { algoliaStore: storeShape.isRequired };
       static displayName = `AlgoliaSearchHelperConnect(${getDisplayName(WrappedComponent)})`;
 
       constructor(props, context) {

sample-project/src/createStore.js

@@ -6,13 +6,12 @@ export default function createStore(helper) {
     searchError: null,
   };
   const listeners = [];
-  const dispatch = () => { listeners.forEach(listener => listener()); };
+  const dispatch = () => {
+    listeners.forEach(listener => listener());
+  };
 
   helper.on('change', searchParameters => {
-    const {
-      coucou,
-      ...otherProps
-    } = searchParameters;
+    const { coucou, ...otherProps } = searchParameters;
     dispatch(coucou, otherProps);
   });
 

sample-project/src/storeShape.js

@@ -1,4 +1,4 @@
-import {PropTypes} from 'react';
+import PropTypes from 'prop-types';
 
 export default PropTypes.shape({
   getHelper: PropTypes.func.isRequired,