A web designer’s IDE is one of the most staggering handiness instruments in daily work. This fantastic gadget gives us the superpowers of things like syntax highlighting, quick searching, IntelliSense, file icons, and so much more.
There are various to peruse, but without a doubt, Visual Studio Code has become one of the most popular. It’s jam-stacked with significant features and out-of-the-case comforts that make our dev life more effortless. Additionally, one can scrutinize the open-source developments made by the community that helps fill the gap in productivity needs; regardless, it can quickly turn out to be challenging to pick the ones that will be of significant value due to the sheer number of choices.
A Catch 22 of choice occurs!
Regardless, that is the thing that happened to me when I changed from Sublime to VS Code. So that is where I want to help! I’ve coordinated a summary of what I acknowledge is the best VSCode Extensions to chip away at your productivity.
Configuration
1. NPM
This NPM expansion allows you to run scripts described in package.json (or ordinary npm arranges) and endorses the variations of groups against the package.json transformations.
2. Project Manager
Yet again, the Project Manager increase grants you the ability to most cherished projects, giving you essential permission to open them quickly. Additionally, you can demonstrate folders it channels for git repos to add them to the “Git” tab. The time spent clicking File → Open, finding the folder, and finally opening the endeavor can add up. The project manager removes that workflow.
3. Profile Switcher
Do you use your VS Code application for various progression reasons like making creating hot tip tutorials, developing your portfolio site, or switching between tech stacks often? Profile switcher allows you to create different profiles that save specific extensions, like one for React and one for Angular, so you need to change your game plans for each tech stack once.
4. Peacock
It’s typical for web devs to open various windows of VS Code as we work on different repos all the while. For example, one for the backend code and one for our front end. The Peacock extension adds tone to the other endeavor windows, so devs can quickly recognize which repo they are working on.
5. Settings Sync
While using Visual Studio Code across various machines, downloading your expansions might be puzzling, and reconfigure your settings every single time (and multiple bits versus code-like pieces). However, by Settings Sync, you at absolutely no point in the future need to!
Yet again, this development saves everything through GitHub; when you set up the increase, you can move any new changes on one machine, which will be downloaded on another device once you open visual studio code, keeping your settings in sync.
6. Vs Code icons
Recognizing record types in the report traveler inside VS Code makes finding records a breeze. There are different image packs, but VS Code Icons is the main of many.
Code Quality
7. SonarLint
Does your dev bunch use SonarQube and hold on for PR comments or assessments to report issues? With SonarLint, bumble reports are in your IDE so that you can fix them logically before any structures misfire.
8. ESLint
For projects that use ES Linter for static code assessment, keeping code unsurprising and clean considering the rules organized, the ESLint increase facilitates those principles in the IDE. In addition, this will permit you to fix them as you code, seeing issues inside the archives you’re working on instead of keeping things under control for the request line content to tell you.
9. Better Comments
Recording comments for TODOs or clarifying how a specific code was made can help a codebase after some time. Numerous people work on a codebase, and various decisions are made. This increase helps with it were settled on to report why those decisions.
The Better Comments extension is, in any event, concealing coded, so the setting around comments is clear and conspicuous.
10. Stylelint
It’s like ESLint, yet for CSS. Stylelint statically takes apart your CSS for typical misunderstandings considering many organized rules. This development consolidates linting into your IDE, making fixing them ceaselessly basic.
Code Readability
11. Indent Rainbow
We can, without a doubt, match semi-colons or sort out where express squares of code are inside the substance of our code as a result of the Indent Rainbow extension. Moreover, it makes different colors for every level of the space, keeping it very clear for us as we code.
12. Prettier
Making unsurprising code planning all through a massive codebase can be extreme. Each dev has contrasting notions on what arrangement makes code the clearest, which can provoke clashes inside pull request discussions during code studies. Prettier was created as a means of alleviating this challenge on a team because its opinionated code formatter decides for you with a very minimum amount of configuration options.
Once you have Prettier installed in a project, along with its configuration, installing the Prettier extension integrates that formatting throughout your dev process. Whether you prefer automatic formatting on save or while typing, this extension saves tons of time and even integrates with your ESLint rules.
CSS Extensions
13. Colorize
This simple CSS extension highlights the text to the defined color when writing styles, no longer requiring a quick page refresh to test out a new color.
14. CSS Peek
While we make new classes or use new React patterns, VS code gives you the decision to cmd + click on code to jump to its folder or see a preview. CSS Peek is all about giving you that same option when clicking on class names.
15. CSS Stacking Contexts
Investigating CSS can be annoying, especially while endeavoring to stack content suitably using the z-list property. By using this extension, you can visually see the newly created contexts while writing your styles — speeding up the time it takes when debugging or complicated styles that require stacking contexts.
Pairing/Debugging Code
16. Live Share Extension
This increase makes pair programming or offering code to a broader group as you make changes SO MUCH EASIER. I absolutely love the Live Share extension, especially as it has removed the need for trying to explain which file I’m in, which line I’m currently looking at, and describing what code changes to make during a pair programming session.
Please take advantage of this expansion as others can follow your cursor; you can follow theirs, which changes your VS Code into Google Docs, adjusting with associates!
There are such incalculable components inside this increase that it’s challenging to show you ostensibly. So take a gander at the documentation and read it through for yourself.
17. Polacode
Polacode makes brilliant pictures of copy and pastes code scraps, so you can deal and show others without a very remarkable stretch. Easy to use with easy-to-get results!
18. Turbo Console Log
If you are a console log dev, you know those who use console logs instead of debugger statements. You are in luck because with this extension you can highlight a variable, use a hotkey, and set up your logger statements! Head over to this extension to see how it works.
File Extensions
19. Explorer Exclude
Storage facilities for web improvement applications can be poorly arranged after some time. Various libraries we use these days require a spot config archive to set up or consolidate close-by progress vaults we hardly change like environment configuration records.
The challenge for devs is finding specific files. It can be irritating when we can’t find exactly what we’re looking for via search in a huge directory of files. One of my favorite extensions solves this nicely for us by letting us configure “hidden items” from the main file browser, resulting in a decluttered list in VS Code.
20. GitLens
Anyone using Git inside their daily work benefits colossally from including GitLens as an increase inside VS Code. This incorporation of rich development for administering Git is thoroughly impressive!
Need to know who last changed the currently selected line within your editor? GitLens will show you that. Need to know the history of a specific file based on commits? GitLens can show you that too! These two features are the tip of the huge iceberg of other improvements one has once you have it installed.
Research the documentation on its increase page for grokking the features in general, and you will adore it!
Intellisense
The going with expansions are connected to giving you applicable auto-satisfaction as you type on VS Code. I didn’t give my demos here as the extension pages improved.
The following extensions are all about providing you contextual auto-completion as you type on VS Code. I didn’t provide my own demos here, as the extension pages do a better job at that.
21. Npm IntelliSense
Autocomplete your installed npm modules whenever writing import statements within your code — something we do quite often!
22. Path Intellisense
Have you ever been looking to import a util class or a data file but forgot the actual name of it? Utilizing this extension gives you autocomplete suggestions as you create relative and absolute paths within VS Code. Check out its extension page to see it in action!
BONUS: 23/24. TabNine / Visual Studio IntelliCode
The extension marketplace has two very popular IntelliSense plugins that use AI in their attempt at providing users with contextual autocomplete. For example, if you type `.` on a variable within JavaScript which is an array, these extensions will provide you with top array methods you use — like `.map` in React or even provide you with commonly used classes from third-party libraries.
The demos within the extension pages (Visual Studio IntelliCode, TabNine) will give you more information, in choosing either, you can’t go wrong!
Wow, there are quite a lot of extensions in the marketplace, and choosing some of the best is not an easy task. Everyone has their own workflow, and there are adjustments to be made when introducing these extensions into your own day-to-day.
What I don’t want you to do is install all of these extensions at once then never actually use them. Here’s a better way to approach this list:
- Each Monday install a new extension
- Set it up in your workflow
- Try to use it until it becomes a habit, something that is part of your workflow without needing to remind yourself of using it
- Repeat with the next extension!
Becoming more productive is like developing in your career — you can’t do it all at once. It takes time, experience, and effort. It takes mistakes and lessons. So focus more on the journey and less on the result. As your productivity gradually increases, soon the results will follow.
