Skip to main content
Dan Rodney/2 min read

Topic 2F: VS Code: Recommended Extensions

Free Extensions Worth Installing

Live Server / Live Preview

Auto-refreshes browser as you edit HTML and CSS — Live Preview opens inside VS Code.

Open in Browser

Opens HTML in your default browser via Option-B (Mac) or Alt-B (Windows).

GitLens / Git Graph

GitLens adds inline blame and history; Git Graph visualizes commits and branches.

FontSize Shortcuts

Cmd/Ctrl + or - changes only text size, not the whole interface.

Build Web Development Skills at Noble Desktop

Noble Desktop's Full-Stack Web Development Certificate teaches the modern web stack — VS Code is the editor used throughout.

Explore helpful extensions for Visual Studio Code, including "Open in Browser, " "Live Server, " "Live Preview, " and more that can enhance your coding efficiency.

Recommended Extensions

Visual Studio Code has some great free extensions. Here are some we recommend:

Open in Browser

In the setup instructions of this book we recommended this extension. It lets you open an HTML file in a browser by hitting Option–B (Mac) or ALT–B (Windows).

Live Server

Tired of refreshing a browser every time you update your HTML and CSS? This extension lets you CTRL–Click (Mac) or Right–Click (Windows) on an HTML file and choose Open with Live Server. Your web browser will open (using a local server from the extension) and will refresh automatically when you save in vs. Code!

Live Preview

Tired of refreshing a browser every time you update your HTML and CSS? This extension adds a Live Preview button at the top right of the window, which will open a browser window directly in vs. Code! As you edit HTML and CSS files, the changes will instantly show up without even having to save your files!

FontSize Shortcuts

In vs. Code you can change the font size by holding Cmd (Mac) or CTRL (Windows) and pressing plus (+) or minus (–) to make the text bigger or smaller. While this is useful, it also scales up the interface which we don’t like. This extension changes those keystrokes to only scale up the text, not the interface! NOTE: Cmd–0 (Mac) or CTRL–0 (Windows) resets to the normal font size.

HTML End Tag Labels

Adds a comment-like label for each HTML end tag (so you know which particular tag it’s ending).

Image Preview

Shows an image thumbnail in the gutter (by the line numbers).

Git Graph

Adds a visual graph of your commits, branches, etc. with features for reverting to a commit and much more.

GitLens

Adds even more Git features to vs. Code.