15 Best VS Code Extensions for 2021
Overnight, Visual Studio Code became my go-to IDE and one of the most popular code editors on the planet. Mostly due to it`s powerfull extensibillity.
For this week`s post, I have prepared a list of my 15 favorite Visual Studio Code extensions, so here they are in no particular favorite order.
1. Prettier
Let`s start with one of the most downloaded extensions on Visual Studio Code marketplace. Prettier is an opinionated code formatter. That means it enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
2. Bracket Pair Colorizer 2
This extension allows matching brackets to be identified with colours. The user can define which tokens to match, and which colors to use. It`s really helpful when you have a lot of nested elements.
3. Visual Studio Intellicode
This extension provides AI-assisted IntelliSense by showing recommended completion items for your code context at the top of the completions list. The example below shows this in action for Python code.
Contextual recommendations are based on practices developed in thousands of high quality, open-source projects on GitHub each with high star ratings. This means you get context-aware code completions, tool-tips, and signature help rather than alphabetical or most-recently-used lists. By predicting the most likely member in the list based on your coding context, AI-assisted IntelliSense stops you having to hunt through the list yourself.
4. Live Server
Live Server launches a local development server with a live reload feature both for static and dynamic pages.
Every time you save your code, you`ll instantly see the changes reflected in the browser. You`ll be much faster at spotting errors and it`s much easier to do some quick experiments with your code.
5. Remote SSH
The Remote — SSH extension lets you use any remote machine with a SSH server as your development environment. This can greatly simplify development and troubleshooting in a wide variety of situations. You can:
- Develop on the same operating system you deploy to or use larger, faster, or more specialized hardware than your local machine.
- Quickly swap between different, remote development environments and safely make updates without worrying about impacting your local machine.
- Access an existing development environment from multiple machines or locations.
- Debug an application running somewhere else such as a customer site or in the cloud.
No source code needs to be on your local machine to gain these benefits since the extension runs commands and other extensions directly on the remote machine. You can open any folder on the remote machine and work with it just as you would if the folder were on your own machine.
6. Polacode
Polacode is a Visual Studio Code extension that lets you create unique and sharable screenshots of your code. While using Polacode, it retains your existing theme and fonts and renders them for an awesome layout. Check this out:
Open VS Code, on the menu select View then click on Command Palette. In the input box, enter Polacode and select from the drop-down menu. Polacode will be opened to the side of the editor.
Highlight and copy the code you would like to make a screenshot of. Click on the screenshot button below the box. You will be asked for a path to save. Choose a path and save your newly created screenshot.
7. GitLens
GitLens supercharges the Git capabilities of Visual Studio Code. This is a powerful extension that allows you to see who, why, and how lines of code have changed over time (among lots of other features).
GitLens is a highly customizable extension. If you don’t like a particular setting, you can easily turn it off in settings.
8. Peacock
Subtly change the color of your Visual Studio Code workspace. Ideal when you have multiple VS Code instances, use VS Live Share, or use VS Code`s Remote features, and you want to quickly identify your editor.
9. Settings Sync
This one allows you to sync pretty much everything you customize on VSCode to Github, from settings to keyboard shortcuts to other VSCode extensions.
This way, you`ll have access to your preferred IDE from whichever device you want, instead of having to program from a vanilla VSCode environment on new devices or having to manually set up everything again.
10. CSS Peek
This extension extends HTML and ejs code editing with Go To Definition and Go To Symbol in Workspace support for css/scss/less (classes and IDs) found in strings within the source code.
The extension supports all the normal capabilities of symbol definition tracking, but does it for css selectors (classes, IDs and HTML tags). This includes:
- Peek: load the css file inline and make quick edits right there. (Ctrl+Shift+F12)
- Go To: jump directly to the css file or open it in a new editor (F12)
- Hover: show the definition in a hover over the symbol (Ctrl+hover)
In addition, it supports the Symbol Provider so you can quickly jump to the right CSS/SCSS/LESS code if you already know the class or ID name.
11. JavaScript (ES6) Code Snippets
While VSCode includes built-in JS IntelliSense, JS Code Snippets enhances that experience by adding a slew of import/export triggers, class helpers, and method triggers.
The extension supports JS, TypeScript, JS React, TS React, HTML, and Vue. In the VSCode Marketplace, code snippets for other flavors, such as Angular, are also readily available.
12. Regex Previewer
Regular expressions can be quite the puzzle to get right. Regex Previewer gives you a side document that matches your regex.
The extension gives multiple examples to match, so it becomes much easier to quickly and accurately write a regex for a variety of use cases.
13. Chrome Debugger
A VS Code extension to debug your JavaScript code in the Google Chrome browser, or other targets that support the Chrome DevTools Protocol.
Supported features:
- Setting breakpoints, including in source files when source maps are enabled
- Stepping, including with the buttons on the Chrome page
- The Locals pane
- Debugging eval scripts, script tags, and scripts that are added dynamically
- Watches
- Console
14. Auto Import
Auto import is a great extension which automatically imports files. You don’t have to do it manually anymore. It’s excellent primarily if you work on a component-based project. It’s enough to put the component name, and the plugin will import it
15. ES7 React / Redux/ GraphQL / React-Native snippets
This extension provides you JavaScript and React/Redux snippets in ES7 with Babel plugin features for VS Code
And there you have it! Some of the most useful VSCode extensions. Keep an eye for another list soon, which will focus on producitivity extensions. Take care and happy coding!
For more articles, visit:
