Best VSCode Extensions For Developers

Related Articles

Developers must often balance their time between two or more team responsibilities. It’s not uncommon to get into a flow, to be interrupted by a meeting, after someone contacts you in person at Slack about some old code you were working on, and then back to sprint work. We are expected to change ties frequently and close tickets before the end of each sprint.

Managing all these different contexts is difficult!

Because of this difficulty, you can easily see the benefits of being more productive with the time you have. Increasing your personal productivity can greatly affect your sprint work without spending overtime at work. In addition, higher impact also leads to higher performance, which usually leads to higher wages, right?

Higher pay and higher impact are exactly why you should be interested in being productive with your time.

Best VS Code Extensions

IDE is one of the most useful productivity tools in the arsenal of web developers. Syntax highlighting, easy search, IntelliSense, file icons and much more are available with this wonderful tool.

There are many to choose from, but without a doubt, Visual Studio Code Has become one of the most popular. It’s loaded with useful features and out-of-the-box items that make our developers’ lives easier. In addition, you can browse the open source plugins created by the community that help fill the gap in productivity needs; But, it can be difficult to quickly choose the ones that will help the most due to the huge number of options.

In other words, a paradox of choice takes place!

At least, that’s exactly what happened to me when I moved sublime Code VS. This is where I hope to help! I have compiled a list of what I believe are the best VSCode extensions to improve your productivity.


1. NPM

It NPM Extension allows you to easily run scripts defined in package.json (or common npm commands) and validates the versions of the packages against the package.json versions.

2. Peacocks

It is common for web developers to open multiple windows of VS code because we are working on multiple repositories at once. For example, one for the back end code and one for our front end. God Peacock expansion Adds color to the various project windows so that developers can quickly identify which repo they are working on.

3. Synchronize settings

When using Visual Studio Code on multiple machines, it can be frustrating to download your plugins and redefine all your settings at once (and other pieces of code like sections). Thanks to syncing settings you no longer need!

This extension Saving everything through GitHub, after you configure the plugin, you can upload any new change on one computer that is downloaded to another machine as soon as you reopen the Visual Studio code, while keeping your settings in sync.

4. Project Manager

God project manager Extension gives you the ability to execute favorite projects, and gives you easy access to reopen them quickly. Additionally, you can specify folders that it scans for git repos to automatically add them to the “Git” tab. The time spent clicking on a file -> Open … Finding the folder, then finally opening the project can add up. The project manager removes this workflow.

project manager

5. Switches profiles

Do you use your VS Code app for various development reasons like creating hot tips tutorials, developing your portfolio site or switching between technology stacks often? Profile Changer allows you to create different profiles that save specific extensions, liTake one for React and one for Angular, so you need to change your configurations for each technical cartridge only once.

Profile changer 1

6. Symbols vs. code

Identifying file types in File Explorer within VS Code makes finding files easy. There are a lot of different icon packs, though VS Code Icons He is loved by many.


7. SonarLint

Is your developer team using SonarQube and waiting for PR or analysis comments to report issues? With SonarLint Error reports are in your IDE so you can fix them in real time before any construction fails.

Lint sonar

8. ESLint

For projects that use ES Linter for static code analysis, maintaining consistent and clean code based on defined rules, ESLint Extension incorporates these rules in the IDE. This will allow you to fix them while coding, seeing problems within the files you are working on instead of waiting for the command line script to tell you.


9. Better notes

Writing notes for TODOs or the reason behind how a particular piece of code is written can really help base code over time. Many people work on a code basis and many decisions are made. This extension helps to document Why These decisions were made.

God Better notes The extension is even color-coded so that the context around comments is clear and recognizable.

Better notes

10. Stylelint

It’s like ESLint, but for CSS. Stylelint Statically analyzes your CSS for common errors based on defined team rules. This extension incorporates lint in your IDE, making their real-time repair easy.


11. Indent Rainbow

We can easily adjust a semicolon or determine where specific blocks of code are within the content of our code thanks to Socket arc ending. It creates different colors for each level of indentation, keeping it beautiful and visible for us while we encode.

Rainbow socket

12. More beautiful

Creating a consistent code design along a large code base can be difficult. Each developer has different opinions about the format that makes the code most readable, which can lead to disagreements in a request for withdrawal during a code review. prettier Created as a means to alleviate this challenge in the team because its opinionated code designer decides for you with a very minimal amount of configuration options.

Once you install the Prettier in the project, along with its configuration, installing the Prettier plugin incorporates this design throughout your development process. Whether you prefer auto-formatting while saving or typing, this extension saves tons of time and even integrates with your ESLint rules.

More beautiful format

13. Color

it’s simple CSS extension Emphasizes the text to the color defined when writing styles, and no longer requires a quick page refresh to test a new color.


14. A peek at CSS

While we create new classes or use new React components, VS Code gives you the option to do so cmd + click On code to navigate to its folder or see a preview. A peek at CSS It gives you the same option when clicking on class names (see how I clicked on an introductory card below).

css peek

15. Expanding live sharing

This extension makes programming or sharing code with a wider audience easier as you make changes much easier. I absolutely love the Live Share plugin, Especially since it removed the need to try to explain which file I’m in, which line I’m currently looking at, and describe what code changes to make during a couple programming session.

Take advantage of this plugin because others can track your cursor, you can track theirs, making your VS code for editing Google Docs with coworkers!

There are so many features in this plugin that it is difficult to show you visually. So check the documentation and read it yourself.

16. Folcode

Polish Creates beautiful images for copying and pasting code snippets so you can easily share and show to others. Easy to use with easy to see results!


17. Turbo console log

If you develop terminal logs, you know those who use terminal logs instead of bug statements. You are lucky that with this plugin you can highlight a variable, use a shortcut key, and set up your journal statements! Contact This extension See how it works.

18. Exclusion of Explorer

Repositories for web development applications can become quite cumbersome over time. Many libraries we use today require a configuration file of points to define or include local development libraries that we hardly change like environment configuration files.

The challenge for developers is to find specific files. This can be annoying when we can not find exactly what we are looking for by searching a huge file directory. one of My favorite extensions Solves this for us nicely by allowing us to set “hidden items” from the main file browser, resulting in an unordered list in code VS.

Explore not included

19. GoLens

Everyone who uses Git as part of their projects benefits greatly from having it GoLens As an extension within VS Code. This plug-in-rich plugin for managing git is absolutely amazing! Need to know who recently changed the currently selected line in your editor? GitLens will show you that. Need to know the history of a specific file based on commitments? GitLens can show you that too! These two features are the tip of the iceberg of other enhancements there are after you install it.

Check out the documentation on its extension page to see all the features and you will not regret it!

Go for a lens

Oops, there are quite a few extensions on the market, and choosing some of the best is no easy task. Everyone has their own workflow, and there are adjustments that need to be made when putting these extensions into your daily routine.

What I do not want you to do is install all these extensions at once and then never use them. Here’s a better way to access this list:

  1. Every Monday install a new extension
  2. Set it in your workflow
  3. Try to use it until it becomes a habit, something that is part of your work process without you having to remind yourself to use it
  4. Repeat for the next expansion!

Being more productive is like evolving your career – you can not do everything at once. It takes time, experience and effort. It requires mistakes and lessons learned. So focus more on the journey and less on the outcome. As your productivity gradually increases, the results will soon come.



Please enter your comment!
Please enter your name here

Popular Articles