Every Programmer Needs these VSCode Extensions

Hey, Tea Lovers! Today we will look at the Visual Studio Code aka VSCode extensions that every programmer needs to improve his or her productivity 10 folds. The VSCode, hands down, is the best and flexible code editor in the market now, and being open source is the cherry on top. To be honest, I don’t like to call it a code editor as it’s more than that. For web and Nodejs or Python developers, it’s a full-fledge IDE. Taken, that we need to customize it ourselves to work like an IDE.

This post is one of the series on Plugins or Extension every Programmer needs for their IDE. We already discussed these for IntelliJ IDEA and Eclipse. Please do check them out.

This post is focused on general coding productivity plugins and partially on Web Dev including, JS and Node.JS. Although I will try to separate these two things as per their specific solution.

Let’s get started and prepare your cup of tea to sip & code and setup the VSCode.

GitLense — Git supercharged

If you work with a team and use Git, then it is a must-have VSCode extension for you. GitLense shows you what is changed and by whom in the editor itself. It shows the authorship, time, and commit message of the line where your cursor is. And not only that, you can see the full history of that particular file.

Current Line information
Current Line information
Git Authorship
Git Authorship
GitLens — Git supercharged
GitLens — Git supercharged

For more information look at the GitLense

ESLint – VSCode extension

The one thing a programmer must acknowledge is the readability of the code and should follow a standard, can be decided by the team. Writing a good quality code takes practice and experience but still, you will miss some points and the code gets smelly. to avoid that to an extend you should use a linter.

ESLint - VSCode extension
ESLint – VSCode extension

ESLint is the best one in its category and comes with its own formatter. It shows you the issue and, most of the time, how to fix it. But First, you need to set up the environment for ESLint as it uses the ESLint library. To install the library, install es-lint npm package either locally by npm install eslint or Globally with npm install -g eslint. For a new project, set up the config file with VS Code command Create ESLint configuration or  eslint --init if installed globally.

By default, you have manually fix those issues unless you do some changes in the settings to auto format. First, go to settings or click ctrl + , on windows and ⌘ + , on mac. Next, search format on save, then Enable the Editor: Format on save. You also have to change the Format on Save Mode. You can select file as option but, I prefer modification as you don’t want to modify the existing code. Modification option only formats the current changes made you based on Git.

Bracket Pair Colorizer 2

Not every programming language is blessed like Python to work without brackets. The more code and complex your code gets the more bracket you need to add and in the nested code it gets very confusing about which bracket we are closing or working in.

Bracket Pair Colorizer 2
Bracket Pair Colorizer 2

Bracket Pair Colorizer 2 VSCode extension helps us identify the bracket pair by color. It makes brackets of a pair of the same color. It is similar to Rainbow Bracket in the IntelliJ or Eclipse. In case it is not working with your theme, like mine, you can simply install the Bracket Pair Colorizer. Bracket Pair Colorizer 2 is just a more efficient version of Bracket Pair Colorizer based on the same VSCode parsing engine.

Indent-Rainbow

Sometimes your code gets lengthy and it hard to keep track of which block you are writing. The biggest example of this is the HTML code. Its just nested code under nested code makes it hard to identify the individual block.

Indent-Rainbow, as the name suggests, colorizes each indent or tab in general from the start of the line. So you get the straight colored line as shown in the preview below for each indent. With this, you can easily identify the block individually.

Indent Rainbow
Indent Rainbow

As you can see, the indent is colored. They are very light in color so not a huge distraction for you. More info on Indent-Rainbow

Material Icon Theme – VSCode extension

As the code grows, so does the number of files and its types. Differentiating between them becomes a necessity. Material Icon theme VSCode extension makes File Icons more vibrant in color and makes it easy to identify the files from one another.

Material Theme Icon
Material Theme Icon

If you don’t have too many different files probably you can skip this one. But you work on JS heavily then you should consider this as a test and normal JS file can be easily differentiated.

Better Comments

A code must document itself, but most of the time you need to write the basic information in the comments. The most common is the function definition and parameters. And sometimes you need to make notes such as TODO or deprecated warning or something else that reflects a specific reason or data.

Better commetns
Better Comments

Better Comments, makes it easy to differentiate between thes types of comments and you always be aware of what that is all about. Like you added a TODO to write test cases. Whenever you see a orange text meaning you have some TODO.

Code Spell Checker

Spelling mistakes are very common among developer not only in comments but also in source code. How many times you have typed or saveeInEmpTablByName(); ? and now it has been used in over 4 files and 9 times.

Code Spell Checker, is like Grammarly for the source code. It shows the spelling mistake if any and also suggests the correct one. Now you can easily fix the issue with saveInEmpTableByName();. However, it is not perfect, and can ignore some spelling mistakes but that’s rare and you don’t have to worry about that.

Code spell checker in action
Code Spell Checker in action

String Manipulation

There are different string case styles for various usage. Such as camelCase, snake_case, PascalCase, etc. Editing them after realizing that it should kebab-case and not a cameCase for a long string makes you wonder about life and what you are doing with it. No, not me, Someone might be, right?

String Manipulation helps you do that very easily. Just mark the text and select what type of case style you need and voila you are good to go.

String Manipulation
String Manipulation

VSCode Extensions for Web and JavaScript Developer

Now we will look at the extensions specifically to improve the Web Developer and JavaScript Developer.

Template String Converter

How many times you have to change the single or double-quoted string to a template string? With the help of Template String Converter, you don’t need to worry about the string quote you are in. Whenever you type ${} it will automatically convert the string into a template literal.

Template String Converter
Template String Converter

Snippet Extensions

As I said earlier, To make VSCode work like an IDE you have to make it yourselves and extensions help you do that. Now for most of the IDE code completion is built-in as they are tailored to a specific language such as Intellij IDEA and Eclipse for Java.

The snippets are like a small code block. In VSCode, these snippets help you generate the block of code specific to the language. You just need to type the shortcode for them and it generates the code for you.

The snippet extension is very specific to your language at hand. Such as for JS with ES6 you can install JavaScript (ES6) code snippets, ES7 React/Redux/GraphQL/React-Native snippets for React dev with ES7, Jest Snippets are for JS Test in Jest, and many more. You can simply search the type of snippet you want in the extension search and select the most popular one or something you liked.

In the description itself, they provide how you can generate a specific code. For Example with ES 6 snippet, I simply write nfn and hit tab, it creates a const <name> = (<params>) => {} and you just then have to modify the text inside and including <>.

NPM IntelliSense and Path IntelliSense

In NodeJS you need to import the modules of NPM or your own with the path. NPM Intellisense gives autocompletion for node modules in the import statement. Type initials of the module and it will suggest the correct module for you.

On the other hand Path IntelliSense gives you autocompletion for your own modules. We need to import our modules with the path, so this IntelliSense suggests and autocomplete the folder and files under the path you are typing. These IntelliSense are small but useful utility to fast track the import statement.

Jest

For Javascript Test, we use the Jest framework. As mentioned earlier I use the Jest snippet to generate the describe, it and expect of toBe, toBeDefined. Jest extension gives you the live update of the test file and shows the statuses of the test cases as they are passing or not.

Jest
Jest

Jest Runner

If the Jest extension is too heavy for your system you can use the Jest Runner. It is not similar to Jest. it simply gives you the Run|Debug option on each and every describe and it to run only that specific block. It allows you to run the specific block you are writing and skips others. This is the best option if you just need to focus on the current test rather than waiting to run the whole file.

Bonus VSCode Extension: GapStyle VS Theme

Well, I didn’t want to add the theme extension as they are very specific to the liking of individuals. I like the default one in the VSCode though, I generally want to differentiate each type of variable local or parameter or function, etc. The GapStyle VS does that for me and it is the same style I use in the IntelliJ IDEA so I get a consistent look.

Gap Style VS

The look is more of the sublime editor theme. It all depends on your liking. I have seen people use Material Theme, One Dark which is an Atom-based theme, most people use Cobalt2.

Conlusion

These were the must have extension to boost your productivity. Most of them are visual. It really helps you boost your productivity by a significant margin. These applies to all the programmer and specifically the Nodejs or Web Developer as VSCode is the first choice you have for that.

As a Java developer Eclipse and IntelliJ comes with most of the things I mentioned here so I took it for granted. But the absence of these basic things really slows you down.

I wanted to write this post as I am working on the NodeJS project as well as the web dev for CodersTea myself and I installed this extension along the way and since then it really helped me increase my productivity to its maximum.

I hope you liked the post. Please add your thoughts or want to add more extension in the list which you think would really be helpful. let me know in the comment.

See you in the next post. HAKUNA MATATA!!