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