aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorDawson Botsford <dawsonbotsford@gmail.com>2018-05-09 11:34:52 -0700
committerGitHub <noreply@github.com>2018-05-09 11:34:52 -0700
commit9b8337558b7c0ce51193fbd462ee3479e73d6d1f (patch)
tree539b368d95e1d5cf0c1ae5827758629f35ec459d
parentad005cc242fff885a4e40fb8b62bf2b2ba8db2e1 (diff)
downloadbest-practices-9b8337558b7c0ce51193fbd462ee3479e73d6d1f.tar.gz
best-practices-9b8337558b7c0ce51193fbd462ee3479e73d6d1f.tar.bz2
best-practices-9b8337558b7c0ce51193fbd462ee3479e73d6d1f.zip
Add prettier info
-rw-r--r--readme.md50
1 files changed, 41 insertions, 9 deletions
diff --git a/readme.md b/readme.md
index 8dcf66d..b2888f7 100644
--- a/readme.md
+++ b/readme.md
@@ -9,14 +9,17 @@ Make your code ๐Ÿ’ฏ - A collection of best practices for software
## โ˜•๏ธ JavaScript โ˜•๏ธ
+* Type with flow
+* Style with [prettier](https://prettier.io/) ([see section below](#prettier))
+* Lint with eslint and use `eslint:recommended` at a minimum
+* Test with [jest](https://facebook.github.io/jest/) and enzyme
+
* 2 spaces (instead of tabs)
-* Lint with `eslint:recommended` at a minimum
* Promises (not callbacks)
* No [decorators](https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841)
* No [mobx](https://mobx.js.org/)
-* Test with [jest](https://facebook.github.io/jest/)
- * Place jest tests alongside the file(s) it tests (not in a separate directory)
- * End test files with `.test.js`
+* Place tests alongside the file(s) it tests (not in a separate directory)
+* End test files with `.test.js`
### โš›๏ธ React/Redux โš›๏ธ
@@ -33,8 +36,9 @@ Make your code ๐Ÿ’ฏ - A collection of best practices for software
* Any types used in more than one file should be placed in `src/types.js`
* Add flow linting via [eslint-plugin-flowtype](https://github.com/gajus/eslint-plugin-flowtype)
-* Disallow `any` with [eslint no-weak-types](https://github.com/gajus/eslint-plugin-flowtype#no-weak-types)
-* In components which use `mapStateToProps`, separate `OwnProps` from `ConnectedProps` into separate interfaces. Join them with `type Props = OwnProps & ConnectedProps`. In addition, if using `mapDispatchToProps`, create a type `DispatchProps` and join that with `Props`.
+* Disallow "`any`" with [eslint no-weak-types](https://github.com/gajus/eslint-plugin-flowtype#no-weak-types) (use "`Obect`" and "`Function`" to cover complicated use-cases)
+
+* In components which use `mapStateToProps`, separate `OwnProps` from `ConnectedProps` into separate types. Join them with `type Props = OwnProps & ConnectedProps`. In addition, if using `mapDispatchToProps`, create a type `DispatchProps` and join that with `Props`.
### ๐“ฃ๐“ข TypeScript ๐“ฃ๐“ข
@@ -42,6 +46,35 @@ Make your code ๐Ÿ’ฏ - A collection of best practices for software
* No implicit any (type everything thatโ€™s not inferable)
* Any variable declared without an initial value should be typed
+### Prettier
+
+Add the following to `package.json`:
+
+```json
+ "prettier": {
+ "overrides": [
+ {
+ "files": ["*.js", "*.scss", "*.css", "*.pcss"],
+ "options": {
+ "singleQuote": true,
+ "trailingComma": "all"
+ }
+ }
+ ]
+ }
+```
+
+The following information about prettier is better described on the prettier documentation [here](https://prettier.io/docs/en/precommit.html#option-1-lint-staged-https-githubcom-okonet-lint-staged).
+Use `lint-staged` to auto-call prettier in a `precommit` "`script`":
+
+```json
+ "lint-staged": {
+ "src/**/*.scss": ["prettier --parser scss --write", "git add"],
+ "src/**/*.{js,css}": ["prettier --parser flow --write", "git add"],
+ "nightwatch/**/*.js": ["prettier --write", "git add"]
+ }
+```
+
## ๐Ÿ’… CSS ๐Ÿ’…
* Prefer Flexbox
@@ -52,7 +85,6 @@ Make your code ๐Ÿ’ฏ - A collection of best practices for software
## HTML
-* Use `<button>` tags over `<a>` tags for actions.
* Use svg's over all other image formats when possible.
* All `<img>` tags should have `โ€œaltโ€` text.
* Only use tables for tabular data (not for layout)
@@ -63,8 +95,8 @@ Make your code ๐Ÿ’ฏ - A collection of best practices for software
* Support the following `script`'s in your root `package.json`:
1. `โ€œwatchโ€`: Starts the dev server
-2. `โ€œbuildโ€`: Builds static assets (if they exist)
-4. `โ€œtestโ€`: Runs all tests (linting first, then unit tests)
+2. `โ€œbuildโ€`: Builds static assets (if they exist) "`/src`" -> "`/build`"
+3. `โ€œtestโ€`: Runs all tests (linting first, then unit tests)
## ๐Ÿ•ธ Browsers ๐Ÿ•ธ