Working with VS Code

Learning Goals

At the end of this Tutorial, you will be able to:

• Download and install the free Microsoft Visual Studio Code (VS Code) application for creating web pages.
• Change Visual Studio Code default settings, such as line length and HTML tag auto-complete.

Installing Microsoft Visual Studio Code

Follow these steps to download and install VS Code on your computer.

1. Use your web browser to go to this web address:   https://code.visualstudio.com
2. Click the Download (for Window/Mac/Linux) button.
3. Follow the usual download and installation instructions for your computer.

Visual Studio Code will install and then open on your computer. You will see that VS Code has added an icon to your Windows desktop and is listed with your other applications on your Windows Start menu.

Changing user settings in VS Code

Follow these steps to set the most convenient preferences in Visual Studio Code for working with HTML and CSS files.

1. At the bottom-left of the VS Code screen, click the Gears icon.
2. From the pop-up menu displayed, click the Settings command.
3. VS Code opens a new window named Settings. At its top, you can see a Search settings box.

You can now change various settings in VS Code.

Typical VS Code settings for web designers

Here are some settings you may wish to change:

1. In the Search settings box, enter ‘font size’ (without quotes), and increase the size to 16.
2. In the Search settings box, enter ‘word wrap’ (without quotes), and select on.
3. In the Search settings box, enter ‘HTML auto’ (without quotes), and deselect HTML: Auto Closing Tags.
4. In the Search settings box, enter ‘match brackets’ (without quotes), and select never.
5. In the Search settings box, enter ‘editor hover enabled’ (without quotes), and deselect the checkbox.

You can now close the Settings window.

Pinning VS Code to your Windows Taskbar

As you will use VS Code frequently, it makes sense to ‘pin’ it to your Windows Taskbar. You can then launch it with a single click.

Follow these steps:

1. In the Search Box at the left of the Taskbar, enter "Visual Studio Code" (without quotes).
2. When the application name is displayed, right-click on it.
3. Choose Pin to taskbar from the list of options displayed.

In future, when you need to launch VS Code, you can simply and quickly click the relevant icon on the Taskbar.