There are a lot of extensions available in the Visual Studio Marketplace to improve your web development experience. With that many options, it can be difficult to find the best extensions.
Visual Studio Code is an open-source text editor that’s quickly becoming the top choice of developers for all their project needs. It has a wide range of extensions that extends its functionality, but if you’re looking to develop web projects in it, here are some great extensions you should try.
So I put together this post with my top Visual Studio Code extensions for web development.
Visual Studio Code Extensions
Visual studio code, arguably the best code editor to use at the present time. Due to its wide range of extensions and support from Microsoft this editor is widely adopted.
Visual studio code is built on top of an open-source Monaco editor by Microsoft.
Visual studio code offers a wide range of extensions. Here is how to install the extension.
Press SHIFT+COMMAND (or Windows)+X or just click on the extension icon of visual studio code.
Prettier
Prettier is an opinionated code formatter. With more than 38.5k stars on GitHub, it’s one of the most popular code formatters available. Having consistent formatting and styling across your code can save a lot of time, especially when collaborating with other developers.
Consider the following code block:
You may notice a handful of formatting issues with this code, including:
- A mix of single and double-quotes
- Irregular use of semicolons (
;) - Improper indentation of the console statement on line 6
Here’s how Prettier would format and fix the above code:
This extension supports Prettier plugins when you’re using a locally resolved version of Prettier.
You can configure this extension further to suit your formatting needs and even trigger it with autosave.
Do you think you’re opinionated?! Check out Prettier as it most likely has some critique about your code. It enforces a consistent style by refactoring your code with its own rules that take the maximum line length into account, wrapping code when necessary. It is recommended that you use it in conjunction with ESLint to ensure it follows your own linting configuration.
Import Cost
Import Cost is an extension that shows you an estimated size of the import package in your code. When working on a project, it’s important not to compromise the user experience by importing heft packages. One way to avoid this is to keep track of the size of additional dependencies in your code.
When the import is too large, Import Cost warns you by displaying the size in red. You can configure what size should be considered small, medium, or large.
Profile Switcher
Profile Switcher enables you to switch between and set up multiple profiles in your VS Code with various configurations and settings.
This extension is especially useful for content creators such as technical bloggers, YouTubers, etc. Instead of changing your settings/configurations every time you need to show your VS Code screen, you can set up a profile required settings.
Here’s how to switch between two profiles: Default and Content Creation.
GitLens
GitLens is an open-source extension for Visual Studio Code created, developed, and maintained by Eric Amodio. It combines the capabilities of Git with VS Code.
One of the best features of this extension is the ability to visualize code authorship via Git blame annotations and code lens.
Below is a screenshot from the React example docs of the Final Space API.
Here’s an expanded version of the code authorship:
This is just one of the many features of GitLens extension. Other notable features include:
- Revision navigation (backward and forward) through the history of a file
- An unobtrusive current line blame annotation at the end of the line showing the commit
- A status bar blame annotation showing the commit and author who last modified the current line
Live Server
Live Server extension provides the live preview of your web application right within the editor.
This is very handy and useful for front-end developers.
Link: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
You can install it by searching the name on the extension section of the visual studio code.
Debugger for Chrome
This extension brought the powerful chrome debugger right into the visual studio code.
It is very useful for front-end developers to perform the testing and debugging.https://giphy.com/embed/f9S2xIFYN2y8yN1qHa
via GIPHY
Link: https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
You can install it by searching the name on the extension section of the visual studio code.
Better Comments
This extension helps you to create more human-friendly and easy-to-read comments.
Link: https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments
You can install it by searching the name on the extension section of the visual studio code.
Code time
This extension tracks your development time and provides you with useful stats such as how many hours you have code today etc.
It’s pretty useful to keep track and see the progress. This is not strictly for web development only, anyone can use this extension.
Link: https://marketplace.visualstudio.com/items?itemName=softwaredotcom.swdc-vscode
You can install it by searching the name on the extension section of the visual studio code.
Settings Sync
I use a different machine for my work and personal use. I use visual studio code in both machines, however, I don’t want to repeat the same steps to configure the editor every time.
Enters Setting Sync extension. It creates and stores your configuration in Github gist and synchronizes wherever you want. Simple and awesome!
Link: https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync
You can install it by searching the name on the extension section of the visual studio code.
Polacode
Like code snippet like this?
Then this extension is for you. We can use this extension to create a beautiful code polaroid and share it.
Link: https://marketplace.visualstudio.com/items?itemName=pnp.polacode
You can install it by searching the name on the extension section of the visual studio code.
Other Sweet Extentions
TabNine
TabNine is your polyglot AI coding assistant. Based on a GPT-2 model, TabNine uses machine learning to help you write code faster and better. There’s no configuration necessary just install and start typing. The AI will typically auto-complete your code in under 10ms.
Live Share
If you tend to work collaboratively on your code, this official Microsoft extension for VS Code is one you need. It allows instant sharing of current projects alongside debugging sessions, terminal instances, web apps using localhost, and more.
Quokka.js
Quokka.js is a live scratchpad for JavaScript. It checks your JavaScript code in real-time and lets you know which blocks have already executed and which have not.
Code Spell Checker
Typos make for particularly annoying bugs. This extension can prevent this particular type of annoyances by underlining spelling errors in your code. Code Spell Checker works well with camelCase code while keeping the number of false positives low.
Auto-Close Tag
Another particularly unpleasant type of bug common in web development are open tags. Auto-Close Tag, as the name suggests, closes your tags automatically. When you open a tag like <p>, the </p> is instantly added and your cursor is placed between the two.
GitLens
VS Code comes with Git support baked in. However, if you want to supercharge it, GitLens help adds several features that help you visualize, navigate, and better understand a project’s Git history.
GitHub Extension
If you tend to work a lot with GitHub, Microsoft has got you covered. With the GitHub extension you can clone, create, or publish repos without ever exiting VS Code.
Beautify
An alternative to Prettier, Beautify will reformat code written in Javascript, JSON, Sass, CSS, and HTML.
Material Icon Theme
Add the Material Design icons to your VS Code with this helpful extension.
ESLint
Another extension to keep your code clean and consistent is ESLint. Covering both code quality and coding style issues, ESLint is a static code analysis tool for identifying problematic patterns in your code.
Bracket Pair Colorizer
Does exactly as the name says and colors pairs of brackets for easier recognition of nested component bracket pairs. It also looks fun and colorful on your screen and can be fully customized.
Color Highlight
Do you use hex values for colors in frontend development and don’t automatically translate hex to shade in your head? Then you need this extension to highlight web colors in your VS Code editor.
Color Picker
Another helpful extension for color selection and assignment is the color picker that adds a UI option to generate color codes.
TODO Highlight
Leaving notes for yourself in code comments is not a bad practice. However, they are very easy to forget and ignore. To ensure you do not, this handy extension will highlight comments for you.
Remote – Containers
Containers have gained popularity in development and if you make use of remote containers, this extension is for you. It provides a full-fledged tool and a well-defined runtime stack to be used for containerizing your programs directly from the VS Code UI.
Path Intellisense
Path Intellisense is a Visual Studio Code plugin that autocompletes filenames. It adds Intellisense-style completion to filenames, letting you easily type long path names.
Path Autocomplete
Similar to Path Intellisense, this extension provides path completion for VS Code so you don’t have to memorize those long paths.
Settings Sync
If you work on multiple machines or simply want to have your VS Code settings and preferences backed-up, the Settings Sync extension is one you should install. It lets you synchronize settings, snippets, themes, file icons, keybindings, workspaces and extensions across machines by using a simple Gist.
Debugger for Chrome
This extension is a must-have for front-end developers. It lets you debug front-end code in the Google Chrome browser (or other targets that support the Chrome DevTools Protocol) directly in your VS Code environment.
Browser Preview
Launching numerous different browsers manually to preview changes across platforms can be a drag. Browser Preview might help. This extension creates a debuggable real browser preview inside your editor.
JavaScript (ES6) Code Snippets
Code snippets are a great way to save keystrokes. This extension contains code snippets for JavaScript in ES6 syntax for VS Code editor (supporting both JavaScript and TypeScript).
ES7, React, Redux & GraphQL Snippets
This extension provides you with another collection of JavaScript and React/Redux snippets in ES7 with Babel plugin features.
Reactjs Code Snippets
A collection of code snippets for Reactjs development in ES6 syntax, sourced from a collection originally created for the Sublime text editor.
Filesize
This extension can help keep your bundle size under check. It will display inline in the editor the import/require package size.
How fat is your code? This extension can help you find out. This extension displays the size of the focused file in the status bar of the editor. If you click on the status bar component it will display more information about the file.
Auto Rename Tag
Very simply automatically renames paired HTML/XML tags.
TinyPNG
If your project has a lot of visual assets, you may need to compress them. This extension uses the TinyPNG API to compress your JP(E)G and PNG images directly inside VSCode.
Image Optimizer
An alternative to TinyPNG is Image Optimizer that also offers support for animate GIF compression in addition to JPEG, PNG file formats.
Conclusion
At the heart of its popularity, Visual Studio Code is a code editor. But it’s also a well-featured tool that can be used for web development. In this article, I’m going to list five editor extensions that you’ll find useful for web development. These extensions will help you improve your productivity and organize your projects better.