Development Environment

[coryhouse]

Development Environment

Discuss options and configure development environment for session

• Install Node, Git.
• Git overview
• Select a JS editor
  • VS Code
  • Webstorm
  • Codesandbox
  • Demoboard
  • Stackblitz
  • ReKit
• Dev environment
  • Install react dev tools
  • Review dev env options
  • Install create-react-app and explore
  • Add recommended extensions
    • ESLint
    • Prettier - Add this setting: "editor.formatOnSave": true
    • Glean
    • Quokka
    • React Code Snippets
    • Snapshot Tools
  • Add storybook for creating components and documenting component states (fosters reuse by documenting what exists, clarifies prop behaviors, 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
• Use 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.
• Use license-checker to check and disallow certain licenses

Monorepo tools

See #170

Debugging in VS Code

This adds integrated VSCode debugging support to our project.

To use:

1. Install Debugger for Chrome
2. Click the gutter to set a breakpoint (a red dot will appear)
3. Click the bug to open the debug panel
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. The variables window on the left is handy too.
6. Click on Debug console 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 and logpoints.

Recommended ESLint rules

• eslint-plugin-promise
• See Cypress section in Automated testing for Cypress related plugins