From 876fccbbde53e27b3fb820808d2c336ca71aa7e1 Mon Sep 17 00:00:00 2001
From: Jakob Odersky <jakob@driver.xyz>
Date: Fri, 14 Sep 2018 17:59:21 -0700
Subject: Make this repo a standalone website

These changes add the ability to generate a full website from
individual style guides. The website can be viewed
[here](drivergroup.github.io/best-practices).

Also included, are the following additions:

- Improve recommendations for Scala.

- Add more recommendations for Git.

- Add recommendations for Shell Script.
---
 guides/javascript.md | 95 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 95 insertions(+)
 create mode 100644 guides/javascript.md

(limited to 'guides/javascript.md')

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)
-- 
cgit v1.2.3