Skip to main content

[[TOC]]

Install VSCode

Hotkeys for JS

Ctrl+Tab: Switches between windows Alt + Right/Left Arrows - navigate forward or backward Alt + Up/Down arrows - moving lines up and down Ctrl + / - toggling comments Hold Alt - multiple cursors Hold Shift + Alt - column selection

  

Tips

  • Include/Exclude - node_modules folder is excluded because of the .gitignore file - you can toggle this on or off as needed.
  • Terminal
    • Ctrl + Tick - to open a terminal
    • Ctrl + Shift + 5 - to split the terminal
  • Format document - installing Prettier - can use custom standards
  • Format on save
  • Auto Save

Workspace settings

Make the changes on the workspace tab and then save as a workspace

Themes

I use Dark Green :)

Installing Node.js

Open an admin terminal and run choco install nodejs Restart your terminal session and run these commands: node --version or node -v npm --version or npm -v and you should get the below:

image.png

REPL - Read, Evaluate, Print, Loop

Typing node into your console enters you into REPL mode. This gets you right into the console. image.png You can also use this to execute scripts

Differences between Node.js and npm​

  • node.js is the javascript runtime
  • npm is a package manager

Package managers

yarn - run npm install --global yarn pnpm - run npm install --global pnpm

image.png

npm​

Commands that you might want to remember:

  • npm install
  • npm install packagename
  • npm update packagename
  • npm uninstall packagename

package.json file​

Package ID and version constraints: image.png Package-lock.json - used to lock specific versions of packages - contains the EXACT dependencies

image.png

npm install​

What this command does is gathers all of the dependencies listed in the package.json file and downloads them into the node_modules folder. If there is a package-lock.json file, it will download the EXACT dependencies

Extensions

Prettier -ES Lint​

Install this extension, follow the steps listed in the readme for this. You will need to install the dependencies - yarn add -D prettier@^3.1.0 eslint@^8.52.0 prettier-eslint@^16.1.2 2. Open up your settings.json, and paste this in:

{
  "editor.defaultFormatter": "rvest.vs-code-prettier-eslint",
  "editor.formatOnType": false, // required
  "editor.formatOnPaste": true, // optional
  "editor.formatOnSave": true, // optional
  "editor.formatOnSaveMode": "file", // required to format on save
  "files.autoSave": "onFocusChange", // optional but recommended
  "vs-code-prettier-eslint.prettierLast": false // set as "true" to run 'prettier' last not first
}

Format document should format according to the Prettier - ES Lint extension after this is done.

Note: To test this: Open up a .js file and type in some javascript and leave off the semicolons. Save the file. It should put in the semicolons and format the document using Prettier. You may need to select a default formatter, select Prettier ESLint from the dropdown.

Sample Code:

let x
console.log(x) //undefined
let y = null
console.log(y) //null

ES-Lint​

You will need to configure this by hitting Ctrl+Alt+P and selecting the config options. image.png

Note: To test ESLint by opening up a .js file and typing in let x = 7; It should flag that the variable is never used. image.png

What it's doing​

It installs these dependencies into a node_modules folder within your working directory. image.png image.png

Ready to continue?

Once you have node.js, npm, yarn and pnpm installed, Prettier formatting the code, ESLint calling out your errors, and your theme picked out in VS Code, your development environment is ready.

Troubleshooting