VS Code for JavaScript

VS Code

https://code.visualstudio.com

open source IDE

independent of Visual Studio itself

Basics

  • opening a folder
  • file explorer

Command palette

F1 or Ctrl + Shift + P: display command palette

  • searchable
  • displays keyboard shortcuts

Command palette

example commands:

  • View: Toggle Terminal
  • Format Document
  • Find
  • Search: Find in Files
  • Preferences: Open Settings (UI)
  • Toggle line comment / Toggle block comment
  • Go to definition / Peek definition (only for certain file types)
  • Rename symbol (only for certain file types)

Configuration

Via File - Preferences - Settings

Is split into User Settings and Workspace Settings

Configuration options for JavaScript

Recommendations:

  • Accept Suggestions on Commit Character (Autocomplete on other keys than Enter): deactivate if you're working with JavaScript / TypeScript
  • Tab Size: 2

Further options:

  • Auto Save
  • Format on Save
  • Word Wrap
  • EOL

Extensions

VS Code extensions for JavaScript

open the extensions view in the sidebar: fifth symbol on the left

recommended extensions for JavaScript development:

  • Prettier (code formatter)
  • ESLint (linter)

Prettier

  • code formatting according to strict rules
  • for JavaScript, HTML, CSS
  • shortcut: Shift + Alt + F

ESLint

Linter with more functionality than VS Code's default linter

Debugging JavaScript

Debugging JavaScript

possibilities:

  • start a node.js debug terminal; run JS code there
  • run a JavaScript file in the node.js debugger (configured via .vscode/launch.json)
  • connect to a browser's debugger (configured via .vscode/launch.json)

accessible via the Run tab in the sidebar

Debugger configuration

debugger configuration via .vscode/launch.json

To create a debugger configuration file: In the Run sidebar, select create a launch.json file

Debugging with node.js

example launch.json configuration entries for node.js:

{
  "name": "Launch Node.js Program",
  "type": "node",
  "request": "launch",
  "skipFiles": ["<node_internals>/**"],
  "program": "${workspaceFolder}/index.js"
}

Debugging in the browser

example launch.json configuration entries for debugging in Chrome / Edge:

{
  "name": "Launch Chrome",
  "type": "pwa-chrome",
  "request": "launch",
  "url": "http://localhost:8080",
  "webRoot": "${workspaceFolder}"
}

{
  "name": "Launch Edge for React",
  "type": "pwa-msedge",
  "request": "launch",
  "url": "http://localhost:3000"
}