Development Environment

# Development Environment

Discuss options and configure development environment for session
- [ ] Install [Node](http://nodejs.org), [Git](http://git-scm.com).
- [ ] Git overview
- [ ] Select a JS editor
- [ ] [VS Code](https://code.visualstudio.com)
- [ ] [Webstorm](https://www.jetbrains.com/webstorm/)
- [ ] [Codesandbox](https://codesandbox.io)
- [ ] [Demoboard](https://frontarm.com/demoboard/)
- [ ] [Stackblitz](https://stackblitz.com)
- [ ] [ReKit](http://rekit.js.org)
- [ ] Dev environment
- [ ] Install [react dev tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)
- [ ] [Review dev env options](https://www.javascriptstuff.com/react-starter-projects/)
- [ ] Install [create-react-app](https://github.com/facebookincubator/create-react-app) and explore
- [ ] Add recommended extensions
- [ ] [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
- [ ] [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Add this setting: `"editor.formatOnSave": true`
- [ ] [Glean](https://marketplace.visualstudio.com/items?itemName=wix.glean)
- [ ] [Quokka](https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode)
- [ ] [React Code Snippets](https://marketplace.visualstudio.com/items?itemName=xabikos.ReactSnippets)
- [ ] [Snapshot Tools](https://marketplace.visualstudio.com/items?itemName=asvetliakov.snapshot-tools)
- [ ] Add [storybook](https://storybook.js.org) for creating components and documenting component states (fosters reuse by documenting what exists, [clarifies prop behaviors](https://medium.com/redmart-engineering/how-we-use-storybook-for-documentation-and-code-reviews-550a522543f1), supports automated UI testing)
- [ ] Configure proxy in package.json to avoid CORS calls and shorten paths when working with create-react-app
- [ ] [JS vs TypeScript - My take](https://twitter.com/housecor/status/1082458332693176320)
- [ ] [Use npm-check-updates](https://www.npmjs.com/package/npm-check-updates) to check for updates on CI on some cadence and generate report. Consider breaking CI build for outdated deps. Also consider [outdated](https://docs.npmjs.com/cli/outdated).
- [ ] Use [license-checker](https://www.npmjs.com/package/license-checker) to check and disallow certain licenses

## Monorepo tools

See #170

## Debugging in VS Code

This adds [integrated VSCode debugging support](https://code.visualstudio.com/docs/editor/debugging) to our project.

To use:
1. Install [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)
2. [Click the gutter to set a breakpoint (a red dot will appear)](https://www.dropbox.com/s/ajekfydl2cdo6yh/Screenshot%202019-12-12%2007.37.01.png?dl=0)
3. [Click the bug to open the debug panel](https://www.dropbox.com/s/gjmjvjbkyk7nhub/Screenshot%202019-12-12%2007.37.22.png?dl=0)
4. Click play to start debugging in Chrome (make sure Chrome is selected in the dropdown next to the play button). This will open a new browser window and pause on your breakpoint.
5. [You can hover over any variables to see their values](https://www.dropbox.com/s/zceb9ezf6c5bhd6/Screenshot%202019-12-12%2007.39.43.png?dl=0). The variables window on the left is handy too.
6. Click on [Debug console](https://www.dropbox.com/s/hbsv63cjubhmpzf/Screenshot%202019-12-12%2007.41.32.png?dl=0) to display a console where you can run code while debugged.

This is a handy way to debug because:
1. You don't have to change the code (to add a debugger or console statement for instance) to debug.
2. You can set [conditional breakpoints](https://code.visualstudio.com/docs/editor/debugging#_conditional-breakpoints) and [logpoints](https://code.visualstudio.com/blogs/2018/07/12/introducing-logpoints-and-auto-attach#_introducing-logpoints).

## Recommended ESLint rules

- [ ] [eslint-plugin-promise](https://github.com/xjamundx/eslint-plugin-promise)
- [ ] See Cypress section in Automated testing for Cypress related plugins