Toolchain

Code editor or IDE

Ultimately, it's your choice. VSCode is used by the teachers.

Visual Studio Code (VSCode)

free & open source code editor by Microsoft (!= Visual Studio IDE)
wide extension support
lightweight, multiplatform support
good docs & instructions
choice of many Web developers

Install Extensions

Press ctrl-shift-x or click extensions icon on the left panel.

Search and install:

Prettier
EditorConfig for VS Code
Auto Import
ESLint
vscode-icons
Live Server
Optional: JavaScript (ES6) Code Snippets

VSCode - Basic Usage

Active project is the folder open on the left side panel (File -> Open folder...)

Handy keyboard shortcuts (finnish layout, check File -> Preferences -> Keyboard shortcuts for more)

Multiline comment: ctrl-'
Delete line: ctrl-shift-k
Move line(s): alt-up/down
Copy line(s): alt-shift-up/down
Auto format code: alt-shift-f
Open integrated console: ctrl-ö
Quick find/open files: ctrl-p
Split editor: ctrl-§

WebStorm

free for Metropolia students. Apply for license here
- @metropolia.fi email address needed for a free license
- then install ToolBox app
full-featured IDE
quite ready out of the box. No need for plugins.
based on IntelliJ IDEA, just like PyCharm

Browser & debugging

Chrome & Chrome DevTools
Safari & Safari Develop menu

Terminal

Windows: Click on the start or search icon and type "PowerShell" in the search box
Mac: press command-space to open search then type 'Terminal'