Explore various extensions that can enhance your experience with Visual Studio Code, such as Live Server, Git Graph and FontSize Shortcuts. These extensions provide features like automatic browser refreshing, visual representation of your Git commits, and a more easier way to control your font size without altering the interface.
Key Insights
- Visual Studio Code offers a variety of free extensions that enhance the user interface and functionality.
- The 'open in browser' extension allows users to open an HTML file in a browser by using specific keyboard shortcuts.
- The 'Live Server' extension refreshes your web browser automatically whenever you save changes in Visual Studio Code.
- 'Live Preview' extension enables editing HTML and CSS files with changes instantly appearing without having to save your files.
- 'FontSize Shortcuts' extension modifies keystrokes to scale up only the text, not the entire interface.
- 'Git Graph' and 'GitLens' extensions provide advanced Git features, including a visual graph of commits and branches, and additional Git features in Visual Studio Code.
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.
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.
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.
