Topic 2F: VS Code: Recommended Extensions

Free Visual Studio Code Tutorial

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

This exercise is excerpted from Noble Desktop’s front-end web development (Visual Studio Code) training materials and is compatible with updates through 2022. To continue learning web development with hands-on training, check out our coding bootcamps in NYC and live online.

Note: These materials are provided to give prospective students a sense of how we structure our class exercises and supplementary materials. During the course, you will get access to the accompanying class files, live instructor demonstrations, and hands-on instruction.

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).

Full-Stack Web Development Certificate: Live & Hands-on, In NYC or Online, 0% Financing, 1-on-1 Mentoring, Free Retake, Job Prep. Named a Top Bootcamp by Forbes, Fortune, & Time Out. Noble Desktop. Learn More.

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.

How to Learn Coding

Master coding with hands-on training. Learning how to code in JavaScript, Python, and other popular languages can pave the way to a job in tech, such as web development, data science & analytics, or software engineering.

Yelp Facebook LinkedIn YouTube Twitter Instagram