Install Windows Subsystem for Linux (WSL)

1. Download and install Ubuntu LTS version 20.x from this site .
2. Note this link for WSL reference. No need to read it now, but keep it in mind in case you’re having issues. **Note:**This is now your primary command-line tool! All the commands in this file should be typed in your Linux terminal, not PowerShell!

Node, NVM and NPM

1. Install nvm (Node Version Manager) in your LTS using the curl command found in the docs .
2. Close and re-open your terminal to use nvm.
3. Install and use the latest version .
   1. Run any suggested updates to npm
   2. If you get permissions errors (here or anywhere else in this doc!), try adding sudo to the beginning of the command (this will require you to enter your password)

Git / GitHub

1. If you don’t have one already, create a GitHub account .
2. If you haven’t already, set up your GitHub account to work with SSH on your laptop .
3. If you haven’t already, set up your Git global user.name and user.email .

VSCode

A. Install and Update

1. Download and install VSCode on your computer.
2. If you already have VSCode, make sure it is up-to-date (Help menu → Restart to Update).

B. Install Extensions

1. Open Extensions with Ctrl+Shift+X
2. Search for and install these extensions. Read about each one to learn what it does.
   1. ESLint
   2. Prettier – Code formatter
   3. GitLens
   4. Bracket Pair Colorizer 2
   5. npm Intellisense
   6. Auto Rename Tag
   7. Auto Close Tag
   8. ES7 React_Redux_GraphQL/React-Native snippets
   9. Markdown Preview Github Styling
   10. Live Share
   11. Auto Comment Blocks
   12. YAML
3. Enable execution of the ESLint extension.

C. Set up ESLint and Prettier

1. Set up VSCode settings:

• Open “Settings” in VSCode by typing ctrl + shift + P, then “Preferences: Open Settings (JSON)”
• In the settings.json file that opens when you click on the above command, add to your existing settings, or replace the empty JSON object {} with this gist .
• Test it out! Important: remove the $ from the beginning of the command! It’s just identifying the line as a command, but shouldn’t be copied as part of the command.
• Initialize an npm project in your src directory (note: ESLint settings are project-specific and not global, which is why it’s necessary to create a new project) $ mkdir -p ~/src $ cd ~/src $ mkdir eslint-test $ cd eslint-test $ npm init -y

2. Install the ESLint dependencies. Note: you will need to follow steps (2) and (3) foreverynew project $ npm install —save-dev eslint prettier eslint-config-airbnb eslint-config-prettier eslint-config-react eslint-plugin-import eslint-plugin-jest-dom eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-simple-import-sort eslint-plugin-testing-library typescript @typescript-eslint_eslint-plugin @typescript-eslint_parser

$ npx install-peerdeps —only=dev eslint-config-airbnb NOTE: if the npx command results in ERR undefined, copy/paste the npm install command from the command output and run that command instead. 3. Open the project in VSCode using this command: code . (notice the . after code). Create a .eslintrc.json file in VSCode and copy the contents of this gist into the file. 4. Create a new file in VSCode called test.js 5. Click the ESLint item in the status bar to check for errors * If there are errors, work with your fellow interns (and Google the errors) to try and resolve them. Bear in mind you may need to restart VSCode to see the effect of changes, such as new npm installs. 6. Type console.log(‘hi’) in the test.js file and then press the Enter key twice. 7. You should get a warning (yellow squiggly line) for the console.log. Hover over it and see information about the warning, including which ESLint rule is causing it.

Note: The warning about the console statement occurs because completed apps should not contain console statements. If a console statement is necessary for your app, you can try the “quick fix” at the bottom of the window that pops up when you mouse over. If you find yourself ignoring certain rules a lot, you can update the rules in .eslintrc.json.

8. Save the file. Since we’ve configured ESLint and Prettier rules to apply on file save (in the VSCode settings):

• the single quotes around hi should turn into double-quotes (a Prettier rule), and
• the extra newline at the end of the file should be removed (Prettier cleans up extra newlines)

Bask in the joy of ESLint and Prettier!

D. Learn / use VSCode Keyboard Shortcuts

Here’s a cheat sheet . While it takes more time in the beginning to learn and remember keyboard shortcuts, they can make you so much more efficient once you’ve learned them. It’s well worth taking the time and effort! A biased list of “most useful shortcuts”: 1. Ctrl + D to select next instance of selection (to edit multiple instances of a term at once) 2. Ctrl + L to select all instances of selection (great for updating every instance of a variable name at once, replacing single quotes with double-quotes, removing newlines, etc) 3. Ctrl + click on a variable/function name to go to its definition (even if it’s in another file!) 4. Ctrl + P to search for a file in the project 5. Ctrl + shift + P to enter a VSCode command 6. Ctrl + shift + F to find a term in all files (and replace, by clicking turndown arrow next to search box) 7. Alt + up arrow / Alt + down arrow to move line with cursor up or down 8. Alt + shift + up arrow / Alt + shift + down arrow to copy line with cursor up or down 9. **Ctrl + ] / Ctrl + [**to indent / outdent line (or selection) 10. Ctrl + / to comment / uncomment line (or selection) 11. Ctrl + G go to a specific line number (option + G/ G on mac) 12. Ctrl + T jump to a symbol 13. Ctrl + B to hide or show the side bar 14. Alt + shift + F to format document 15. Ctrl + K, Ctrl + F to format selection 16. Ctrl + K, W to close all saved windows 17. **Ctrl + **to add new editor side-by-side And a few keyboard shortcuts that aren’t VSCode, but well worth knowing: 1. Alt + Tab to switch applications/windows in Windows 2. Up arrow to see and re-use previous commands in Linux 3. Ctrl + shift + T to reopen a tab that you just closed 4. Alt + right arrow / Alt + left arrow to skip ahead / back one word 5. Double-click to select word 6. Triple-click to select line Do you have other keyboard shortcuts you love? Share with the rest of the interns via Slack.

VSCode Live Share

1. You installed Live Share when you were installing VSCode extensions.
   • Be sure to restart VSCode to activate the extension
   • You should see “Live Share” in the status bar
2. Follow the instructions to sign in via GitHub
3. Find a partner and start a collaboration session !