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 most 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-fledged IDE. Taken, we need to customize it ourselves to work like an IDE.
This post is one of the series on Plugins or Extensions every Programmer needs for their IDE. We already discussed these for 7 Must-have IntelliJ IDEA Plugins in 2021 for Java Developers and Eclipse. Please check them out.
This List includes 8 plugins that can be used by any developer. But I have Bonus Plugins for Web Devs.
Let’s get started and prepare your cup of tea to sip & code and set up the VSCode.
I would be happy to connect with you guys on social media. It’s @coderstea on Twitter, Linkedin, Facebook, Instagram, and YouTube.
Please Subscribe to the newsletter to know about the latest posts from CodersTea.
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.
For more information look at the GitLense
ESLint – VSCode extensions
The one thing a programmer must acknowledge is the readability of the code which should follow a standard and can be decided by the team. Writing good quality code takes practice and experience but still, you will miss some points and the code gets smelly. to avoid that to an extent you should use a linter.
ESLint is the best one in its category and comes with its 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 the 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 fixed 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 it as an option but, I prefer modification as you don’t want to modify the existing code. The modification option only formats the current changes made by 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 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 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 – VSCode Extensions
Sometimes your code gets lengthy and it is hard to keep track of which block you are writing. The biggest example of this is the HTML code. It’s 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.
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 extensions
As the code grows, so does the number of files and their 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.
If you don’t have too many different files probably you can skip this one. If you work on JS heavily then you should consider this as a test and normal JS files can be easily differentiated.
Better Comments – VSCode Extensions
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 Comments make it easy to differentiate between these 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 an orange text meaning you have some TODO.
Code Spell Checker
Spelling mistakes are very common among developers 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.
String Manipulation
There are different string case styles for various uses. Such as camelCase, snake_case, PascalCase, etc. Editing them after realizing that it should be a 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.
Bonus VSCode Extensions for Web and JavaScript Developers
Template String Converter
How many times do you have to change the single or double-quoted string to a template string? With the help of the 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.
Now we will look at the extensions specifically to improve the Web Developer and JavaScript Developer.
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, 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 blocks. 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 the language at hand. 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 for JS Test in Jest, and many more. You can simply search for 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 the initials of the module and it will suggest the correct module for you.
On the other hand Path, and IntelliSense gives you autocompletion for your modules. We need to import our modules with the path, so IntelliSense suggests autocompleting the folder and files under the path you are typing. These IntelliSense are small but useful utilities 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 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 of each 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.
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, and most people use Cobalt2.
Conclusion
These were the must-have extension to boost your productivity. Most of them are visual. It helps you boost your productivity by a significant margin. This applies to all the programmers and specifically the Nodejs or Web Developer as VSCode is the first choice you have for that.
As a Java developer Eclipse and IntelliJ come with most of the things I mentioned here so I took them for granted. But the absence of these basic things 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 helped me increase my productivity to its maximum.
I hope you liked the post. Please add your thoughts or want to add more extensions to the list which you think would be helpful. let me know in the comment.
See you in the next post. HAKUNA MATATA!!
I would be happy to connect with you guys on social media. It’s @coderstea on Twitter, Linkedin, Facebook, Instagram, and YouTube.
Please Subscribe to the newsletter to know about the latest posts from CodersTea.
