Install Windows Subsystem for Linux (WSL)

1. Download and install the latest Ubuntu LTS release (currently Ubuntu 26.04 LTS, “Resolute Raccoon”) 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. npm Intellisense
   5. Auto Rename Tag
   6. Auto Close Tag
   7. ES7+ React/Redux/React-Native snippets
   8. Markdown Preview Github Styling
   9. Live Share
   10. Auto Comment Blocks
   11. YAML
3. If the ESLint status bar item shows that execution is blocked, click it and choose “Allow Everywhere” so the ESLint extension can run in your project. See the ESLint extension docs for details.

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 and Prettier dependencies. Note: you will need to follow steps (2) and (3) foreverynew project $ npm install –save-dev eslint prettier eslint-config-prettier eslint-config-airbnb eslint-config-airbnb-typescript 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 @eslint/js @eslint/eslintrc globals

NOTE: if the install fails with peer dependency errors, add --legacy-peer-deps to the end of the command above and try again.

3. ESLint 9 and later use a “flat config” file instead of the old .eslintrc.json. Create a file called eslint.config.js in the root of your project (next to package.json) and paste in the following:

const { FlatCompat } = require("@eslint/eslintrc");
const js = require("@eslint/js");
const globals = require("globals");

const compat = new FlatCompat({
  baseDirectory: __dirname,
  recommendedConfig: js.configs.recommended,
});

module.exports = [
  js.configs.recommended,
  ...compat.extends("airbnb", "airbnb-typescript", "plugin:prettier/recommended"),
  {
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.node,
      },
    },
    rules: {
      "prettier/prettier": "warn",
    },
  },
];

4. Open the project in VSCode using this command: code . (notice the . after code). 5. Create a new file in VSCode called test.js 6. 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. 7. Type console.log(‘hi’) in the test.js file and then press the Enter key twice. 8. You should get a warning (yellow squiggly line) for the console 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 eslint.config.js.

9. 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 !