aboutsummaryrefslogtreecommitdiff
path: root/guides/javascript.md
diff options
context:
space:
mode:
Diffstat (limited to 'guides/javascript.md')
-rw-r--r--guides/javascript.md95
1 files changed, 95 insertions, 0 deletions
diff --git a/guides/javascript.md b/guides/javascript.md
new file mode 100644
index 0000000..bb363ac
--- /dev/null
+++ b/guides/javascript.md
@@ -0,0 +1,95 @@
+## 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)
+
+- Promises (not callbacks)
+
+- No [decorators](https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841)
+
+- No [mobx](https://mobx.js.org/)
+
+- Place tests alongside the file(s) it tests (not in a separate directory)
+
+- End test files with `.test.js`
+
+### React/Redux
+
+- Lint with [`tslint-react`](https://github.com/palantir/tslint-react) or eslint's [`plugin:react/recommended`](https://github.com/yannickcr/eslint-plugin-react) at a minimum.
+
+- No unnecessary and empty `<div>`’s
+
+- If `this.props.<variable name>` is used more than once, dereference it at the top of `render`.
+
+- Extract variables used in `render()` to the top of `render()`
+
+- API calls should lie in a testable file outside of components.
+
+
+- Components should not wait for promises to resolve, instead listen on props via redux’ `mapStateToProps()`.
+
+- Declare and export components in separate places (otherwise the web inspector cannot name components properly)
+
+### Flowtype
+
+- 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) (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 𝓣𝓢
+
+- Lint with [`tslint:recommended`](https://github.com/palantir/tslint) at a minimum.
+
+- 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"]
+ }
+```
+
+### Npm
+
+* Support the following `script`'s in your root `package.json`:
+
+1. `“watch”`: Starts the dev server
+2. `“build”`: Builds static assets (if they exist) "`/src`" -> "`/build`"
+3. `“test”`: Runs all tests (linting first, then unit tests)