VS Code Editor

Visual Studio Code (VS Code) is a free code editor from Microsoft, and the most popular editor among web developers.

Why VS Code?

Free, and works on Windows, macOS and Linux
Fast and light, even on older laptops
Colours your code and suggests completions as you type
Thousands of free extensions for every language
Built-in terminal and Git support

Download it from the official VS Code website and install it with the default options. On Windows, tick Add "Open with Code" so you can right-click any folder to open it.

Open a Folder, Not a File

Always open your whole project folder with File, Open Folder. The Explorer on the left then shows every file, and features like search and Git work across the project.

Part of the screen	What it is for
Activity Bar (far left)	Explorer, Search, Source Control, Extensions
Side Bar	The file tree or the selected tool
Editor	Where you write code, with tabs for open files
Panel (bottom)	Terminal, Problems, Output
Status Bar (bottom line)	Current branch, errors, language, line number

Shortcuts That Save Hours

Shortcuts are for Windows and Linux. On a Mac, use Cmd instead of Ctrl.

Shortcut	Action
`Ctrl+P`	Quickly open a file by name
`Ctrl+Shift+P`	Command Palette: run any command
`Ctrl+S`	Save
`Ctrl+/`	Comment or uncomment the line
`Alt+Up` / `Alt+Down`	Move a line up or down
`Shift+Alt+Down`	Copy a line down
`Ctrl+D`	Select the next copy of the current word
`Alt+Click`	Add another cursor
`Ctrl+F` / `Ctrl+H`	Find / find and replace
`Ctrl+Shift+F`	Search in all files
`Ctrl+Backtick`	Open the terminal (the backtick key is under Esc)
`Shift+Alt+F`	Format the whole document

Learn two new shortcuts each week. In a month you will be noticeably faster.

Emmet: Write HTML Faster

Emmet is built into VS Code. In an .html file, type an abbreviation and press Tab:

Example

text

ul>li.item*3

Output

<ul>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
</ul>

Type ! and press Tab in an empty HTML file to get a complete page template.

Useful Extensions

Open the Extensions view (Ctrl+Shift+X), search by name, and click Install.

Extension	What it does
Prettier	Formats your code neatly on save
ESLint	Finds mistakes in JavaScript
Live Server	Opens your page in the browser and reloads it when you save
Python	Python support, running and debugging
GitLens	Shows who changed each line and when
Error Lens	Shows errors right next to the line

Only install extensions you need, from well-known publishers. Too many extensions slow down the editor.

Settings

Open settings with Ctrl+,. You can search for any setting, or click the icon at the top right to edit the JSON file directly:

Example

json

{
  "editor.fontSize": 15,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.wordWrap": "on",
  "files.autoSave": "onFocusChange"
}

These settings make the text bigger, format code each time you save, wrap long lines and save files when you switch away.

The Built-in Terminal

Press Ctrl+Backtick (the key under Esc) to open a terminal inside VS Code, already in your project folder. You can run commands like npm install or git status without leaving the editor. The terminal lesson explains the basic commands.

Exercise

Which shortcut opens the Command Palette in VS Code on Windows?

Ctrl+PCtrl+Shift+PCtrl+SAlt+F4