Visual Studio Code is the most used development tool of today. What sets it apart from other code editors is its built-in cross-platform and language support. Additionally, it has a vast marketplace with immensely helpful extensions that allow developers to save time and get stuff done with ease.
I’m someone who’s relatively new to web development but I’m learning quite a few things every day about the evolution of web development to how it actually is today. Here are my top ten picks for the must-have VS code extensions in 2022. The merit for this list is simple, all of these extensions have changed the VS code experience for the better and made dev lives easier. And In my opinion, they deserve all the praise that they can get.
Settings Sync
Starting the list with a classic one. Settings Sync is a great extension that allows you to maintain a consistent IDE experience across multiple machines. It happens quite often when you try to access a project that you’re working on, through another machine. It becomes a hectic task to redo all of the configuration and your usual extension set-ups. Settings sync is simple, yet very helpful in situations where time is of great essence.
Check out Settings sync:
https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync
Note: Now, Settings sync is also a part of the core editor due to its usability.
Live Share
Live Share is another great extension that lets multiple devs collaborate on a project in real-time where they can edit and debug together. It helps to start collaborating right away by giving you the necessary context of the developer environment, without the need to clone any repos or install any SDKs.
https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare
Tailwind CSS IntelliSense
Tailwind CSS IntelliSense enhances the Tailwind development experience with advanced features such as autocomplete, syntax highlighting, and linting. For developers who prefer Tailwind CSS as their primary front-end solution, IntelliSense is a great tool that provides key development features. Tailwind CSS is becoming a top priority for a great number of front-end devs. The future looks bright for this one.
Check out Tailwind CSS IntelliSense: https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
GitLens
GitLens has been a part of the “best extensions” for quite a while. Recently, they’ve joined hands with Gitkraken to expand the possibilities of a single extension in the development process. GitLens allows you to visualize code authorship through Git blame annotations and code lens. It also helps you navigate and explore Git repositories for valuable insights through powerful comparison commands, and much more. In a nutshell, GitLens makes the Git experience seamless with VS code.
Check out GitLens: https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
Test runner for Java
This entry is for Vue.js enthusiasts. In VS code, you add new files to develop new functionalities for your application. This extension provides an easier way to add the boilerplate code for you so you can focus on the logic of the code. It also helps you add boilerplate code for vue files, methods, watchers, etc.
Give Vue VSCode Snippets a go: https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets
blox
This is the newest addition to the VS Code marketplace. I see some potential in this extension as the idea is great behind this. blox has an extensive library of ready-made code blocks for different UI components within VS code. There are previews for different components that you can just click on to make them a part of your project. It supports Tailwind CSS, Angular, and Vue. And they say that they’ll have other front-end integrations in the future as well.
Check out blox: https://marketplace.visualstudio.com/items?itemName=vsblox.blox&ssr=false#overview
Dendron
Dendron is another new extension in VS Code library. It is a great note-taking tool with all the necessary features. What sets it apart is its seamlessness of taking notes out in comparison to the other note-taking tools.
Check out Dendron:
https://marketplace.visualstudio.com/items?itemName=dendron.dendron
Enfocando
Enfocando is “how themes should be”. It allows you to set themes according to your taste and that surely helps a developer to focus on the code itself. Enfocando comes with other features of color alerts, schemes, syntax highlights, and styles.
VS code Marketplace link:
https://marketplace.visualstudio.com/items?itemName=wuelnerdotexe.vscode-enfocado
Test runner for Java
Test runner is a must-have for quick testing in Java. This extension comes with tons of important capabilities including building scopes tree views, highlighting shared scopes on the stack graph, inspecting any number of frame contexts, revealing reference source code, evaluating elements of a dynamically allocated array, and searching for references to variables.
Check it out:
https://marketplace.visualstudio.com/items?itemName=vscjava.vscode-java-test
CSS Peek
This extension simplifies some key aspects of front-end development. CSS Peek enables devs to extend the HTML and ejs file to show CSS/SCSS/LESS code right within the source code. So you can quickly jump to the right CSS code through the class or ID name.
Check out CSS Peeks:
https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek
These are my top picks for the must-have VS code extensions in 2022. What are yours?
Top comments (3)
Maybe you will also like the VSCode extension "Blockman". It highlights nested code blocks based on curly/square/round brackets, html/xml tags and Python/Yaml indentation. (I am the author of Blockman).
Damned. One more post best vscode addons and once more a fully obsolete addon. Did you read posts of other users ?
Thank you for considering and recommending Enfocado !! 👁️