VS Code extensions that make me fall in love with programming each day

No kidding, who wouldn’t want their dev time to be reduced and code to look sexy?

I have been procrastinating on this particular blog a lot, I thought of writing this blog months ago, but since this blog does not contain any real coding, I was being lazy to write so much theory. But I can assure you that this blog is going to be one of the most helpful blogs you are ever going to read!

VS Code is my favorite text editor, and the fact that it has such a wide community and so many plugins available, it’s just awesome.

Alright, so today I am going to write the VS Code extensions which I use, which can not only help improve your productivity but make your code look more sexy ( ͡° ͜ʖ ͡°)

I have divided this blog into 2 sections

1. Extensions for productivity,
2. Extensions for style

I hope you would love this blog. And since we are going to talk about style, let me show you how my VS Code looks like —

Btw, don’t get confused by the terminal, I am a windows user ヽ(◕ヮ◕)ﾉ

Oh my my, this text editor is beautiful, and so is the code (͠≖ ͜ʖ͠≖)

Madhav? Stop flexing your text editor and tell me already!

Yeah, yeah, buddy, calm down, let’s get straight to the topic :)

VS Code extensions for better productivity

Before we start, keep in mind that this list is, in no way, complete. There can be more plugins out there, which might be more helpful, and that’s why I want you to tell me what all plugins do you use in the comments section of this blog.

It’s no compulsion, but I will really feel bad if you keep it a secret (ಥ﹏ಥ)

Btw, in case you don’t notice it, I have added the links to all the extensions in the headline of each (notice the underlined headings)

1. WakaTime

This is one of my favorite extensions, but yes it could have been better if they kept it completely for free, but anyway, it’s still amazing.

What does it do?

To put it forward in simple terms, it tracks all your coding activity, how much time you code each day, what all projects are you working on, what all programming languages you use, how proficient you are in these, etc.

Isn’t that AWESOME?

Hell yeah, it is! It gives a dope dashboard based on your coding activity, which looks something like this —

2. Visual Studio IntelliCode

Imagine an AI-assisted Intellisense which can suggest what to code? Well, your imagination is about to come true!

The Visual Studio IntelliCode extension provides AI-assisted development features for Python, TypeScript/JavaScript, and Java developers in Visual Studio Code, with insights based on understanding your code context combined with machine learning.

See it in action -

3. Terminal Here

For all the competitive programmers who don’t use any IDE and love to code in text editors, here something you are going to like!

I don’t like coding in IDEs, I love the VS Code text editor. I generally code in java, and I love to maintain a proper file structure (one folder per question). As you might have guessed, to run that simple command on terminal to execute java files, I had to change directories everytime and locate my code. This plugin came as a savior!

This extension opens the current working directory in VS Code terminal, ain’t that amazing?

One keystroke and the terminal got open in the current working directory!

4. Live Server

Ahh, how do I explain how important this plugin is!

Open your pages using live server, and get rid of the hassle of refreshing every time you make some changes (who doesn’t love hot reload?)

5. ReactJS Code Snippets

If you are a react developer and you are not using this, you are wasting a lot of your time! Using this plugin, we can save a lot of time while creating the components by using some ready made code snippets ヽ(͡◕ ͜ʖ ͡◕)ﾉ

Another example -

Ain’t this amazing?

6. Python

I probably can’t list down all its features in this small blog, but yeah, I can definitely say that this extension takes care of all your Python needs!

• Select your Python interpreter by clicking on the status bar

• Configure the debugger through the Debug Activity Bar

• Configure tests by running the Configure Tests command

• Jupiter notebook quick start

7. Path Intellisense

This is something we developers really need, whether it is importing dependencies, or including images in our HTML document, or attaching JS scripts or linking CSS documents in our HTML file, we always need to put the path to the file.

This plugin will autocomplete the path for you so that you can focus on more important things ( ͡^ ͜ʖ ͡^)

8. NPM Intellisense

If you liked the previous one, and you are a node developer, I am sure you will install this one as well. After all, who wouldn’t want the auto-completion or the suggestions while importing npm libraries?

9. Markdownlint

Open random open-source projects on GitHub, and you will find one thing common in most of them. Bad styling of README.md ( ͡ಠ ʖ̯ ͡ಠ)

The Markdown markup language is designed to be easy to read, write, and understand. It succeeds — and its flexibility is both a benefit and a drawback. Many styles are possible, so formatting can be inconsistent. Some constructs don’t work well in all parsers and should be avoided.

markdownlint is a Visual Studio Code extension that includes a library of rules to encourage standards and consistency for Markdown files.

Don’t be lazy, install it right now and fix your markdown :)

10. Markdown Preview Enhanced

Are you like me? Have you given up on ms-word and other softwares to make text documents? Do you use markdown for that purpose? Install this one to see how your markdown will look like ( ͡ ͜ʖ ͡ )

11. Auto Close Tag

Dude if you are a web developer and you are not using this to auto close the tags which you write, how do you actually manage? It’s so annoying to close the tags manually, and thank god this plugin takes care of it automatically.

12. Auto Rename Tag

Alright just one more in this section, the auto rename tag. As the name suggests, if you want to rename a tag, it will rename the closing tag automatically. ( ͡~ ͜ʖ ͡°)

So these were the extensions I use for better productivity, now let’s come to some extensions which will make you fall in love with your text editor.

VS Code extensions for better style

Yes, here are some of the extensions I use that can make your VS Code look beautiful.

Of course there are many more plugins out there, but I am mentioning the ones which I use. So yeah, to make this blog more versatile, I really request all the readers to recommend the plugins they use as well and I will add them to this list (yes, I will give you the credit that it was recommended by you)

1. Prettier — Code Formatter

This one, yes, I think that it should have been a part of the list of plugins for productivity, but yeah since it is concerned with styling as well, so I mentioned it here.

There’s always a fight between indentation of 2 spaces vs 4 spaces (and for the people who use 8 spaces, why bro!?) and you might have to convert one into another, don’t just go one adding/removing spaces from each line, use this extension.

Or let’s consider one more situation, you got a piece of code from internet or maybe a friend wrote it, and you see that it is not at all indented, what will you do? Will you make the proper indentation manually? Use this plugin.

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.

2. Rainbow Brackets

Not much useful (sorry to say this), but yeah, brackets of different colors looks cool ( ͡° ͜ʖ ͡°)

This plugin provides rainbow colors for the round brackets, the square brackets and the squiggly brackets. This is particularly useful for Lisp or Clojure programmers, and of course, JavaScript, and other programmers.

3. Snazzy Operator

Well well well, I am in love with this one. Maybe you might think it’s just another VS Code theme, but I am in love with this one!

Ohh btw, don’t forget to install the Operator Mono font before using this.

4. vscode-styled-components

Here comes the last one, VS Code Styled Components, an amazing plugin for syntax highlighting and intellisense.

But wait, did you notice one more thing in the first screenshot of this blog? In case you did not, let me add the screenshot once again.

Come on dude, did you notice it? Did you? Alright, let me give you a hint, have a look at my terminal…

Well if you are a linux or a mac user, this might not be new to you, but yeah for all my friends who are using windows, this might be something new?

Basically I am running the “agnoster” theme of Oh-My-Zsh on my WSL. You can definitely check it out on google. You might find the steps to install WSL, but it will be difficult to find exact steps to use this particular theme and that too on VS Code terminal, so I am thinking of writing another article on how to install it.

Till then, stay tuned, and subscribe to my mailing list to hear from me directly in your inbox ( ͡~ ͜ʖ ͡~)

http://madhavbahl.tech/subscribe/

That’s it, hope you found the post useful!

Feel free to reach out to me anytime if you want to discuss something :D

I would be more than happy if you send your feedback, suggestions or ask queries. Moreover, I love to make new friends and we can be friends, just drop me a mail.

Thanks a lot for reading till end. You can contact me in case if you need any assistance:
Email: theleanprogrammer@gmail.com
Web: http://madhavbahl.tech/
Github: https://github.com/MadhavBahlMD
LinkedIn: https://www.linkedin.com/in/madhavbahl/
Instagram: https://www.instagram.com/theleanprogrammer/