Using VS Code

Organising your workspace

You can subdivide you workspace into multiple editors, each with containing its own files. To move the current file editor to a new section of the screen, simply drag it to the desired location. You can also drag and drop files between editors. Just like in any browser, you can switch between editors using the keyboard shortcut ctrl + 1 to ctrl + 9.

Shortcut galore

If you are looking for anything on VS Code, the cmd + shift + P shortcut is your friend. It will open the command palette, where you can search for anything you need. From there, you can run commands like "Open with Live Server" to open a local preview of your website, change the theme of the editor, run a command to format your code, in short, anything you can do with VS Code.

VS Code also comes with some neat built-in shortcuts and features. Here are just a few of my favourites:

Tag creation

Instead of manually typing the open and closing tag, you can start typing the tag name. VS Code will automatically suggest the tag name. Press enter to create the tag. You can also directly create a tag with a class or ID by typing the tag name and its attribute like you would in a CSS selector. For example, to create a <div> tag with a class-name attribute, type div.class-name and press enter. Same goes for an id, just type div#id-name and press enter.

Advanced: advanced tag creation

You can also create tags with any attribute by typing the tag name and its attribute and value surrounded by square brackets. For example, to create a <a> tag with a href attribute, type a[href] and press enter. You can also create tags with multiple attributes by separating them with a comma. For example, to create a <img> tag with a src and alt attribute, type img[src alt] and press enter.

This feature uses a built-in extension called Emmet. The extension can do much more than single tag creation, you can directly create children using > and multiple tags using *. For example, to create a <ul> tag with 6 <li> tags as children, type ul>li*6 and press enter.

Find and replace

Just like in InDesign, you can use the cmd + F shortcut to open the find and replace panel. You can then search for a specific string, and replace it with another string within the current file. You can also use cmd + shift + H to find and replace within the entire codebase (be careful though, this action is not reversible).

Run a live server

To open your website, use the Live Server extension to open a local preview: cmd + shift + P, search for "Open with Live Server", and press enter. The website will open in your default browser.

You can also simply open the index.html file using your browser of choice.

Advanced: live preview on mobile

If both your computer and mobile device are connected to the same network, you can preview your website on your mobile device by running a live server on your computer's ip address.

1. Either right click the folder in the finder and select "Services" → "New Terminal at Folder" or (more advanced) et get the path to your website's folder: opt + right click the folder in your file explorer, and select "Copy folder-name as Pathname". Then, open the terminal and navigate to the folder: cd /path/to/folder
2. Run the live server on your computer's ip address: npx http-server -p 8000 -c-1
3. Open the http://xxx.xxx.x.xxx:8000 URL on your phone.

Multicursor editing

One killer feature of VS Code is its multi-cursor editing. You can select multiple lines of code and edit them at the same time. This is incredibly useful when you want to change multiple lines of code at once. Simply opt + click all the places you want to change, and start typing.

Similarly to find and replace, you can select a string of text and either use the cmd + D shortcut to select the next occurrence of the string, or use cmd + shift + L to select all occurrences of the string.

Opening and navigating files

Open any file with the keyboard only by using the cmd + P shortcut. Then, type the name of the file you want to open and press enter to open it.

Jump to a specific line in a file by using the ctr + G shortcut. Then, type the line number and press enter to jump to the desired line.

Wrap with a tag

Instead of manually adding a tag and cut-and-pasting it content, select the content you want to wrap and search for "Wrap with abbreviation" in the command palette (cmd + shift + P). Then, type the abbreviation (tag name) you want to use and press enter.