From 23c861ad99910679371ea0cfbd615fb93da0f843 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pete=20Nyk=C3=A4nen?= Date: Wed, 24 May 2017 23:14:55 +0300 Subject: [PATCH] Use Prettier along with ESLint for maximum :dark_sunglasses: (#35) * Starting work on 7.0.0 Signed-off-by: petetnt * Fix post-install scripts Signed-off-by: petetnt * Do everything automatically Signed-off-by: petetnt * Fix package.json issues Signed-off-by: petetnt * Remove trailing comma Signed-off-by: petetnt * Correct script folder Signed-off-by: petetnt * Add +x for script files Signed-off-by: petetnt * Use node hashbang in the js file Signed-off-by: petetnt * remove preinstall script, use the whole cammand instead Signed-off-by: petetnt * Simpler installation, add trailing commas, allow jsx in js files Signed-off-by: petetnt * v7.0.2 Signed-off-by: petetnt * Add note about yarn Signed-off-by: petetnt * fix urls in package json Signed-off-by: petetnt * Update README.md --- .eslintrc.js | 7 +++- README.md | 85 ++++++++++++++++++++------------------- bin/motley-eslint-init.sh | 14 ------- lib/postinstall.js | 72 +++++++++++++++++++++++++++++++++ package.json | 28 +++++++++---- 5 files changed, 141 insertions(+), 65 deletions(-) delete mode 100755 bin/motley-eslint-init.sh create mode 100755 lib/postinstall.js diff --git a/.eslintrc.js b/.eslintrc.js index ef67596..3a2f441 100644 --- a/.eslintrc.js +++ b/.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"] }], } diff --git a/README.md b/README.md index 7fbc90d..90c93c9 100644 --- a/README.md +++ b/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/ -``` diff --git a/bin/motley-eslint-init.sh b/bin/motley-eslint-init.sh deleted file mode 100755 index 2ee5490..0000000 --- a/bin/motley-eslint-init.sh +++ /dev/null @@ -1,14 +0,0 @@ -#!/bin/bash - -PKG=eslint-config-airbnb - -# Default to installing using npm -INSTALL="npm install --save-dev" - -# Is this a yarn project and yarn is found in PATH, then install using yarn -if [[ -f $(PWD)/yarn.lock && -x $(which yarn) ]] -then - INSTALL="yarn add --dev" -fi - -npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs $INSTALL "$PKG@latest" diff --git a/lib/postinstall.js b/lib/postinstall.js new file mode 100755 index 0000000..dc0c06e --- /dev/null +++ b/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); +}); \ No newline at end of file diff --git a/package.json b/package.json index 4e7bdf1..24f8257 100644 --- a/package.json +++ b/package.json @@ -1,14 +1,12 @@ { "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" @@ -16,12 +14,28 @@ "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 ", "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" }