Getting started with Visual Studio Code

Video outline

In this tutorial, we walk you through setting up Visual Studio Code and give an overview of the basic features.

0:00 Intro

0:20 Open folder / Set workspace

0:52 UI Tour

2:00 Create new JavaScript file

2:20 Intellisense

2:55 Save / Autosave

3:25 Create python file

3:45 Add python extension

4:28 Drag & drop external HTML file

5:00 Preview HTML output with Live Preview extension

6:00 Changing themes

6:50 Summary

Download and install VS Code.
- From https://code.visualstudio.com/download
Open a folder
- File > Open Folder (unassigned)
File Explorer
- View > Explorer (⇧⌘E)
Search view
- View > Search (⇧⌘F)
Source Control
- View > Source Control (SCM) (⌃⇧G)
Run and Debug
- View > Run (⇧⌘D)
Extensions view
- View > Extensions (⇧⌘X)
Open the Command Palette.
- View > Command Palette... (⇧⌘P)
Output panel
- View > Output (⇧⌘U)
Debug Console
- View > Debug Console (⇧⌘Y)
Problems panel
- View > Problems (⇧⌘M)
Integrated Terminal
- View > Terminal (⌃`)
Create a new file
- File > New File (⌘N)
Save a file
- File > Save (⌘S)
Auto Save
- File > Auto Save
Run
- Run > Start Debugging (F5)
Programming language extensions
- Python - IntelliSense, linting, debugging, code formatting, refactoring, and more.
- Live Preview - Hosts a local server to preview your webpages.
Zoom
- Zoom out (⌘-)
- Zoom in (⌘=)
Customize your editor with color themes.
- Code > Settings > Theme > Color Theme (⌘K ⌘T)