Visual Studio Code is a lightweight code editor that includes features for debugging, task execution, and version management. It seeks to give developers only the tools they need for a rapid code-build-debug cycle, leaving more sophisticated workflows to full-featured IDEs like Visual Studio IDE. Visual Studio Code extensions can be used to add new features, themes, and other customizations.
In this article, I’ll show you how to use some of the most popular VS code extensions to increase your productivity and make your work easier in a variety of ways.
Let’s have a look at some VS Code extensions we will cover in this article:
- Prettier
- Brackets Colorizer
- Live Server
- Git Lens
- Javascript ES6 Code Snippets
- TabNine
- Vetur
- Code Spell Checker
- Auto Rename Tag
- Git History
- Markdown All in One
- Import Cost
Prettier
Prettier ensures that you don’t have to bother about retyping your code. It’s a powerful, opinionated code formatter that lets you format your code in a logical manner. It saves time and energy because the code is formatted. By using CTRL+SHIFT+P, you can customize your formatting.
You can checkout the extension in the marketplace Prettier
Brackets Colorizer
With so much nested code, brackets are a developer’s worst nightmare. It’s nearly impossible to see which brackets match up with which other bracket pair colorizer colors matching brackets to make your code a lot easier to understand.
You can checkout the extension in the marketplace Brackets Colorizer
Live Server
When writing code, we frequently switch between our IDE and the browser to inspect the results of our most recent code changes. Your browser updates when it needs to with the help of a live server. Every time you save your code, the changes are immediately visible in the browser. It starts a local development server that supports both static and dynamic page reloading.
You can checkout the extension in the marketplace Live Server
Git Lens
Eric Amodio invented, developed, and maintains GitLens, an open-source addon for Visual Studio Code.
It’s a fantastic git management add-on that allows you to do a lot of things.You look at the git history, line, and commit logs.
You can checkout the extension in the marketplace Git Lens
JavaScript ES6 Code Snippets
Es6 code snippets is a little library addition that gives the idle developer a useful sample of javascript code. It just converts ordinary javascript functions into hotkeys. It has the potential to boost your present productivity significantly.
TabNine
TabNine is a code autocomplete application that anticipates the rest of the code programmers are typing, similar to how Google search autocomplete predicts words or phrases. It is more than simply an extension; it’s a fantastic experience that I hope to use frequently in the future. I would recommend TabNine for JavaScript or any other language you might write in your editor to any developers who use one of the supported editors. It also aids in the acceleration of your coding.
You can checkout the extension in the marketplace TabNine
Vetur
For all of your Vue source code files, Vetur provides syntax highlighting. Single File Component allows you to blend multiple forms of code, such as CSS, JavaScript, and HTML, in the same file.
You can checkout the extension in the marketplace Vetur
Code Spell Checker
This spell checker’s purpose is to help you catch common spelling mistakes while minimizing false positives. It, like Grammarly for word documents, highlights misspelled technical terms or variables within comments and strings. Hit F1 in VS Code and type ext select install, then code-spell-checker. To enable, press enter and reload the window.
You can check out the extension in the marketplace.
Auto Rename Tag
By default, whenever you rename an opening tag in HTML, you must also replace the closing tag manually. However, with this tool, your open and close tags are renamed automatically.
You can checkout the extension in the marketplace Auto Rename Tag
Git History
This program allows you to see line-by-line commit history as well as prior versions of the file. To get started, simply import the result of your git-log.
You can checkout the extension in the marketplace Git History
Quokka
Quokka.js is a developer productivity tool for prototyping JavaScript and TypeScript in a short amount of time. As you type, runtime values are updated and shown in your IDE next to your code.
You can checkout the extension in the marketplace Quokka
Markdown All in One
Markdown All in One is a simple extension that handles all of your markdown requirements, including auto-preview, shortcuts, and autocomplete. When it comes to dealing with markdown files, many companies have started utilizing markdown as one of their document editors, therefore markdown extension is the ideal when it comes to working with markdown files.
You can get the extension here Markdown All in One
Import Cost
Import Cost is an extension that displays the size of the import package in your code as an estimate. It’s critical not to jeopardize the user experience by importing hefty packages when working on a project. Keeping track of the size of additional dependencies in your code is one method to avoid this.
You can checkout the extension the marketplace Import Cost
Conclusion
In this article, we have reviewed some VS Code extensions that can help in boosting your productivity as a developer and also save time. Thanks for reading and don’t forget to try out these extensions.
