The are some favous and most used VS Code Extensions for Developers are as follow:
Material Icon Theme
Sometimes you can feel lost when you are trying to figure out a structure of your project in a code editor. However, with this extension this process will become more user-friendly. Material Icon Theme gives your files and folders simple icons which increase the clarity of this list.
Download here: Material Icon Theme
Bracket Pair Colorizer
Having tons of nested code can be painful for most coders, especially when a project is big. Trying to match brackets with each other is definitely time-consuming but in some cases it may even seem to be impossible. Therefore, I highly recommend taking advantage of using this extension.
Download here: Bracket Pair Colorizer
Auto-Close Tag
This extension is a must-have. Missing a close tag can be very irritating, especially if you’ve just started your coding adventure. At the beginning this kind of mistake occurs commonly. Auto-Close Tag adds the closing bracket of the opening tag automatically, so that you can be sure that no bugs appear!
Download here: Auto-Close Tag
Auto-Rename Tag
Instead of changing open and close tags by yourself, you can use Auto-Rename Tag and do this simultaneously. Start changing an open tag and its close tag will change automatically. This is very useful, especially when you have a lot of nested code.
Download here: Auto-Rename Tag
Quokka.js
Quokka is a very useful extension which lets you write your JavaScript code and test if it does what it should in real time. Results of these verifications are displayed in your IDE, on the right side of your code.
Download here: Quokka.js
ESLint
It allows you to forget about common errors.The difference between ESLint and Prettier is the fact that the first extension is more focused on detecting errors while the second one is rather focused on correcting formatting. It manages your code pretty easily and auto-formats it after pressing a save button. If there are any problems, ESLint shows you warnings with more detailed information and/or hints. What is more, you’re able to fully customize it. When you’re ready with your own settings, you need to be sure that automatic fixes work on saving by adding { “eslint.autoFixOnSave”: true } to settings.json.
Download here: ESLint
Material Icon Theme
Sometimes you can feel lost when you are trying to figure out a structure of your project in a code editor. However, with this extension this process will become more user-friendly. Material Icon Theme gives your files and folders simple icons which increase the clarity of this list.
Download here: Material Icon Theme
TabNine
TabNine is one of the greatest shocks I experienced when it comes to VS code extensions. It is based on machine learning technology and helps you to write your code by autocompleting it. It works with all languages and the relevance of its hints is astounding. When you start using TabNine, you’ll be amazed how quickly it learns and how much faster and easier your work will become.
Download here: TabNine
Path Intellisense
Remembering a whole file’s path that you want to import is completely redundant. Unfortunately, it can cause issues and that is why this is the moment where Path Intellisense comes to aid. After having been installed, it’ll start showing you hints of next directories or files you can use.
Download here: Path Intellisense
ES7 React/Redux/GraphQl/React-Native snippets
This is one of those extensions which can make your code writing process significantly faster. If you are not a great fan of writing boilerplate code or you’d just want to become more efficient – this is definitely for you. In your VS code you can check a list of commands very easily, which ES7 provides.
Download here: ES7
Prettier
Prettier is considered to be one of the crucial plugins in daily work as a programmer. It lets you save a lot of time which in other case you would waste formatting your code and taking care of its readability. Prettier works very well with JavaScript, TypeScript, HTML, CSS, Markdown and others.
Download here: Prettier
Connect with me
LinkedIn : https://www.linkedin.com/in/durgesh4993/
GitHub : https://github.com/Durgesh4993
LeetCode : https://leetcode.com/durgesh4993/
Profile : https://linktr.ee/durgesh4993
Keep Supporting :)
Top comments (24)
Thank you for the post! 👏
There are small mistakes to fix, to make it even better:
Use Indent Rainbow by @orderwat
Bracket Pair Colorizer is deprecated because it is now a native feature in vscode. No need for any extension for this anymore.
Yep! I've used it and it's very helpful.
Sorry, looks like this list was compiled in a randomizer...
Thought so too. Came here for this comment.
Quokka is nice, just tried it out :D
I also commented on another thread, just copy-pasting it might help you
I'll share a few extensions which helped me.
Quokka is good, but Console Ninja is a much better option.
Here are the fews which should be in the list
I would like to suggest more cool extensions to try out :)
With error lens, no need to hover the errror, it's inlined in the code!
You can also match colors in indent rainbow and in params of bracket pair colorizer (directly in vscode config) to see easily where you are. Indent rainbow also helps when you choose a 2 spaces indentation.
For me, better comments is a must have to highlignt importants comments, TODO, etc.
Code runner can be useful if you want to run quickly small programs.
GitLens to see faster who has made a modification so I can ask him directly.
tabnine ,emmmm,not so smart= =
"Bracket Pair Colorizer" This extension is deprecated as this functionality is now built-in to VS Code.
I also use Auto Import, Better Comments, Error Lens, Highlight Matching Tag, Import Cost and so on.
Some comments may only be visible to logged-in visitors. Sign in to view all comments.