diff options
Diffstat (limited to 'readme.md')
-rw-r--r-- | readme.md | 50 |
1 files changed, 41 insertions, 9 deletions
@@ -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 ๐ธ |