Use Prettier along with ESLint for maximum 🕶️ (#35)

* Starting work on 7.0.0

Signed-off-by: petetnt <pete.a.nykanen@gmail.com>

* Fix post-install scripts

Signed-off-by: petetnt <pete.a.nykanen@gmail.com>

* Do everything automatically

Signed-off-by: petetnt <pete.a.nykanen@gmail.com>

* Fix package.json issues

Signed-off-by: petetnt <pete.a.nykanen@gmail.com>

* Remove trailing comma

Signed-off-by: petetnt <pete.a.nykanen@gmail.com>

* Correct script folder

Signed-off-by: petetnt <pete.a.nykanen@gmail.com>

* Add +x for script files

Signed-off-by: petetnt <pete.a.nykanen@gmail.com>

* Use node hashbang in the js file

Signed-off-by: petetnt <pete.a.nykanen@gmail.com>

* remove preinstall script, use the whole cammand instead

Signed-off-by: petetnt <pete.a.nykanen@gmail.com>

* Simpler installation, add trailing commas, allow jsx in js files

Signed-off-by: petetnt <pete.a.nykanen@gmail.com>

* v7.0.2

Signed-off-by: petetnt <pete.a.nykanen@gmail.com>

* Add note about yarn

Signed-off-by: petetnt <pete.a.nykanen@gmail.com>

* fix urls in package json

Signed-off-by: petetnt <pete.a.nykanen@gmail.com>

* Update README.md

.eslintrc.js

@@ -1,8 +1,11 @@
 module.exports = {
-  "extends": "airbnb",
+  "extends": [
+    "airbnb",
+    "prettier",
+    "prettier/react"
+  ],
   "rules": {
     "indent": ["error", 2],
-    "quotes": [1, "double"],
     "no-underscore-dangle": ["error", { "allow": ["__DEV__"] }],
     "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
   }

README.md

@@ -1,74 +1,75 @@
 # eslint-config-motley
 
-Motley Agency's `.eslintrc.js`, based on [eslint-config-airbnb](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb).
+[Motley's](motley.fi) JavaScript styleguide, using `eslint` and `prettier` with zero configuration.
+Based on `eslint-config-airbnb`.
 
 Supports the following features out of the box:
 
-- ES2015
+- Prettier autoformatting on precommit stage via `husky`.
+- ES2015+
 - Imports and exports
 - React
 - a11y
-
-with following changes to the base config:
-
 - `__DEV__` is a valid underscore-dangle value
-- Double quotes are preferred over single quotes
-- 2 spaces instead of 4
+- `js` is a valid filename for `JSX` files
 
 ## Installation
 
-Install with `npm` (or `yarn`:
-
-``` bash
-npm install eslint-config-motley
-
-# or
+> Note that currently the script will override your `.eslintrc.js` file and override your `precommit` and `lint-staged` scripts in `package.json` if there's one.
 
-yarn add eslint-config-motley
-```
+Run the following command:
 
-Then add the installation script to your `package.json`:
+``` bash
+(
+  export PKG=eslint-config-motley
+  npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "$PKG@latest"
+)
 
-```
-{
-  "scripts": {
-    "motley-eslint-init": "motley-eslint-init",
-    "eslint": "eslint"
-  }
-}
-```
+# or with yarn
 
-and run it:
+(
+  export PKG=eslint-config-motley
+  npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs yarn add --dev "$PKG@latest"
+)
 
 ```
-npm run motley-eslint-init
 
-# or
+Windows users can use [`install-peerdeps`](https://github.com/nathanhleung/install-peerdeps) tool:
 
-yarn run motley-eslint-init
+``` bash
+npm install -g install-peerdeps
+install-peerdeps --dev eslint-config-motley
 ```
 
-Then add it to your projects `.eslintrc.js`:
+If all went well, you should see the following in your `.eslintrc.js`:
 
-``` javascript
+``` js
 module.exports = {
-  "extends": "motley",
+  extends: "motley",
 }
 ```
-## Run eslint
 
-You can now run eslint locally using `eslint-config-motley`.
+and the following in your `package.json`:
 
-``` bash
-# yarn
-
-yarn run eslint
+``` json
+{
+  "scripts": {
+    "precommit": "lint-staged"
+  },
+  "lint-staged": {
+    "*.js": [
+      "prettier --write",
+      "git add"
+    ]
+  }
+}
+```
 
-# npm
+## Acknowledgements
 
-npm run eslint
+We would like to thank the creators, maintainers and contributors of following libraries for making this possible:
 
-# raw bash
+[`eslint-config-airbnb`](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb) for being the base and providing a handy way to install `peerDependencies` from a package.
+[`prettier`](https://github.com/prettier/prettier) for being :dark_sunglasses: and providing [a way to disable some eslint configurations from above](https://github.com/prettier/eslint-config-prettier)
+[`husky`](https://github.com/typicode/husky) and [`lint-staged`](https://github.com/okonet/lint-staged) for making precommit hooks easy
 
-./node_modules/.bin/eslint path/to/js/src/
-```

lib/postinstall.js

@@ -0,0 +1,72 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+
+const writeEslintRc = (new Promise((resolve, reject) => {
+  const eslintPath = path.join(path.resolve('..', '..'), '.eslintrc.js');
+  const content = `module.exports = {
+  extends: 'motley',
+};
+`
+
+  fs.writeFile(eslintPath, content, 'utf-8', (err) => {
+    if (err) {
+      return reject(err); 
+    }
+
+    return resolve();
+  });
+}));
+
+const writeToPackageJson = (new Promise((resolve, reject) => {
+  const packageJsonPath = path.join(path.resolve('..', '..'), 'package.json');
+
+  fs.readFile(packageJsonPath, 'utf-8', (err, content) => {
+    if (err) {
+      console.log('🤔 package.json not found, have you ran `npm init`?');
+      return reject(err); 
+    }
+
+    const packageJson = JSON.parse(content);
+
+    const lintStaged = {
+      '*.js': [
+        'prettier --single-quote --trailing-comma all --write',
+        'git add'
+      ]
+    };
+
+    if (!packageJson.scripts) {
+      packageJson.scripts = {};
+    }
+
+    packageJson.scripts.precommit = 'lint-staged';
+
+    if (!packageJson['lint-staged']) {
+      packageJson['lint-staged'] = {}; 
+    }
+
+    packageJson['lint-staged'] = lintStaged;
+
+    const jsonString = JSON.stringify(packageJson, null, 2);
+
+    return fs.writeFile(packageJsonPath, jsonString, 'utf-8', (err) => {
+      if (err) {
+        return reject(err); 
+      }
+
+      return resolve();
+    });
+  });
+}));
+
+Promise.all([writeEslintRc, writeToPackageJson]).then(() => {
+  console.log('😎 motley-styleguide was configured');
+  process.exit();
+}).catch((err) => {
+  console.log('😬 something went wrong:');
+  console.error(err.message);
+
+  process.exit(1);
+});

package.json

@@ -1,27 +1,41 @@
 {
   "name": "eslint-config-motley",
-  "version": "6.1.0",
-  "description": "Motley Agency's ESLint configuration",
+  "version": "7.0.2",
+  "description": "Motley's JavaScript styleguide using `eslint` and `prettier`",
   "main": ".eslintrc.js",
   "scripts": {
+    "postinstall": "lib/postinstall.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "bin" : {
-    "motley-eslint-init" : "./bin/motley-eslint-init.sh"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/motleyagency/eslint-config-motley.git"
   },
   "keywords": [
     "eslint",
     "config",
-    "motley"
+    "motley",
+    "husky",
+    "git",
+    "prettier",
+    "lint-staged"
   ],
+  "peerDependencies": {
+    "eslint": "^3.19.0",
+    "eslint-config-airbnb": "^15.0.1",
+    "eslint-config-airbnb-base": "^11.2.0",
+    "eslint-plugin-jsx-a11y": "^5.0.3",
+    "eslint-plugin-import": "^2.2.0",
+    "eslint-config-prettier": "2.1.1",
+    "eslint-plugin-react": "^7.0.1",
+    "husky": "^0.13.3",
+    "lint-staged": "^3.4.2",
+    "prettier": "^1.3.1"
+  },
   "author": "Pete Nykänen <pete.a.nykanen@gmail.com>",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/motleyagency/eslint-config-motley/issues"
   },
-  "homepage": "https://github.com/motleyagency/eslint-config-motley#readme"
+  "homepage": "https://github.com/motleyagency/eslint-config-motley/#readme"
 }