My TOP 10 GoTo Vs code Extensions

Hello folks! Hope you're all doing awesome.
Today I want to share with you guys my most favourite and most useful VSCode Extensions that increases my productivity as well as the look and feel of my code editor.

I am going to divide the extensions into parts, which affects my design of the editor, which increases my productivity, which are a must to have, etc.

These extensions are my personal choices which might differ from yours, which I totally agree. These extensions help me to get better out of my coding time.
So, without a futherado, let's roll in to see what I was talking about.

Section1: Setting your VS code Theme

1. Atom Material Theme by Tobias Althoff
This extension provides Atom inspired color theme which in my opinion looks dope. I rock this in all of my vs code fragments whether I am on my laptop or desktop.
I like the way it looks and feels. Here's a look at it.

2. Material Icon Theme by Phillipp Kief
The Material Icon theme is one of the great extension out in the market which has over 52 Million downloads and still growing. It offers various icon themes for every file extension and also the standard folder icons which automatically change depending upon the name of folder like "assets", "images","android", "gradle","components" and what not.
See Pictures below.
File Icons

Folder Icons

Section 2 : Productivity Increasers

This section is devoted to the extensions that increases my productivity either by adding some common shortcuts or by doing some underling task.

3. Better Comments by Aaron Bond
This extension, as the name suggests, help you create more human-friendly comments in your code.With this extension, you will be able to categorise your annotations into:

• Alerts
• Queries
• TODOs
• Highlights
• Commented out code can also be styled to make it clear the code shouldn't be there
• Any other comment styles you'd like can be specified in the settings

With this VS extension, you can use the following characters after a double forward slash // to add easier commenting:

• * for highlighted text
• ! for errors and warnings
• ? for queries and questions
• // for strikethrough
• TODO for to-dos

4. Auto Rename Tag by Jun Han
This Vs code extension is very useful if you are a web developer as it automatically rename the paired HTML/XML tag.
I like this extension because I don't have to manually change the other HTML tag if I've changed the paired one. Well, obviously if you changed one tag you have to change the other, right?

5. Live Server by Ritwick Dey
The next extension we have on the list is probably the most used and well-known extension in the web community.
If you've ever write HTML/CSS, you know every time you make changes you have to save those changes and reload the web page to see those new changes.
But, With the help of this extension we do not have to reload the webpage anymore, it adds a script (behind the scene) in the end of your HTML document which helps it auto reload whenever you save the changes.
Here's the demo.

6. Prettier by Prettier
The Prettier extension here does not need any introduction. This is one of the most used extensions out in the market. Prettier, as the name suggests, formats the document whenever you hit the ctrl+s. It automatically beautifies the document.
Here's what is written on the official documentation page of Prettier.
"Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary."
The great thing about Prettier is that it supports a ton of languages and editors which makes it stand where it is standing now.

Section 3: A Must to have and productivity multipliers

7. Advanced New file by Patbenatar
This extension gives you the power to create a new file without even touching your mouse/touchpad which in turn decreases the time it takes to switch between keyboard and mouse/touchpad.
Features:

• Fuzzy-matching autocomplete to create new file relative to existing path
• Create new directories while creating a new file
• Create a directory instead of a file by suffixing the file path with / as in somedirectory/ to create the directory
• Ignores gitignored and workspace files.exclude settings.
• Additional option of adding advancedNewFile.exclude settings to workspace settings just like native files.exlude except it explicitly effects AdvancedNewFile plugin only.
• Control the order of top convenient options ("last selection", "current file", etc) via config setting advancedNewFile.convenienceOptions.

After installation, hit "ctrl+n" whenever you want to create a new file, provide the folder in which you want to create the file, press enter, now provide the file name with the extension to create the file, you can also create a folder just add "/" at the end of the new file and extension will create a new folder like: folder/filename.fileextenstion.

8. Git Lens by GitKraken
If you are working with the git and with a team of programmers, you definitely wants to see this extension. This does not add git into vscode, rather is supercharges the git by adding some cool new features.

It helps you to visualize code authorship at a glance via Git blame annotations and CodeLens, seamlessly navigate and explore Git repositories, gain valuable insights via rich visualizations and powerful comparison commands, and so much more.

GitLens simply helps you better understand code. Quickly glimpse into whom, why, and when a line or code block was changed. Jump back through history to gain further insights as to how and why the code evolved. Effortlessly explore the history and evolution of a codebase.

Current Line Blame

Git Code Lens

And Much more.

9. Quokka.js by Wallaby.js
The Quokka.js extension is provided by Wallby.js. It is a javascript/typescript playground which can make your life a lot easier if you use pure JS/TS.
Quokka.js runs JavaScript and TypeScript with instant feedback. Runtime values are updated and displayed in your editor next to your code, as you type.

Code runs immediately as you type, on unsaved changes; no need to do anything manually or switch context. Error messages are displayed right next to the code that caused them. Console logs and identifier expression values are displayed inline as well.

It offers some cool features like:

• Live Execution and results
• Live coverage
• Time Machine
• Code Stories
• Value Explorer
• Live Comments and values
• Project Files Import
• CPU Profiler
• Quick Package Install Note: some of these features are only available in pro version.

10. Turbo Console log by ChakrounAnas
Last but not least is the Turbo Console Log. This is one of the most used extension by me and my team members.
Have you ever had to log the variable to the console to know what is the response of the network call, what is the value of this variable at this point of time. And after writing many console logs, when you open up your browser's console, you see a ton of consoles with no meaning.
I know I've been there. Turbo console to the rescue.
This extension make debugging much easier by automating the operation of writing meaningful log message.
Suppose, you want to log the value of param in this function foo. If you have this extension installed and enables, just select the variable and hit the shortcut- "ctrl+alt+l" and you will get the message like this.

function foo(params){
    console.log("🚀 ~ file: demo.js ~ line 2 ~ foo ~ params", params)
    return true 
}

foo("bar")

This message is more meaningful as it exactly tells from where this log is generating,right? It has filename, line number,function name, and the variable's name in it.

PS

So, that was my top 10 vs code extensions that I rock all the time whenever I code, they not only increases my productivity but also adds a bit more elegance to my code editor.

Hope you liked them. If you have some recommendation, just let me know in the comments. I will definitely try them and probably include it the next time I create a extension list.

Okay, So that's Umang Mittal signing off!