0

JavaScript VS Code plugins

Hi, today I wanted to share the plugins I have been using for the past 6 years. Although the name might change the functionality of those plugins stay unchanged regarding the trends in IT.


Why do We need plugins anyway?

To be honest, you don’t really need them; I didn’t use them at the beginning because I was too lazy to explore the goods that VS Code offers. It makes your life so much easier if you will learn how to use them efficiently!
Some people are even customizing their keyboards so with a press of 1 button they can call a chain of different commend or shortcuts.

Lets start with the plugin that will definitely change your life:

1. Code snippet plugins

Are you bored with continuously having to write nested <div>s?
Say no more!

When I saw it for the first time, I thought it was magic!
The plugin is called Emmet. You can generate a huge amount of code just with few lines. If you want to see what else this bad boy can do, visit this site; it is a cheat sheet with all tricks you will need.

At this point, every language has some ‘code snippets’. The important part is that you know how to look for tools like that. Here are a few examples:

JavaScript (ES6) code snippets

Reactjs code snippets

Angular Snippets (Version 9)

Emmet – turns 1 line into 100 lines code

2. Import Cost plugin

Is your internet working slowly? Or maybe you are importing lodash incorrectly and because of that, your app is slower than it should be?
Sometimes We are not aware of how much 3rd party libraries weigh.
We try to refactor our code in some fancy manner but we are forgetting about the simplest solutions that will boost the speed of our build.

Same functions, just different importing syntax and we have 50k difference between them!

Import Cost plugin – will display how much space is your library takes

3. ESlint

Do you want to write clean code, with a standard of unicorn startup?

Eslint will show you the way!

It automatically scans your code and tells you which parts are worth refactoring. It follows the guideline that you configure to your needs.
But, what if you don’t want to think too much about those rules and simply follow the best possible practices?
Airbnb released their Style Guide explaining its rules to clean-code approach. Moreover, eslint has its own Airbnb config
“eslint-config-airbnb” that will automatically implement all those rules for you!

Eslint – will check all syntax errors for you

4. Prettier – Code formatter

This little fellow will automatically structure your code to a more readable format. Imagine you have to deal with code that looks like this!

Simply by implementing Prettier it will transform it into

Prettier and Eslint work great together!
Your code reviews will become much faster, and your colleagues will thank you for not having to correct those low-level style problems

Prettier – well structured code with every save

5. Better Comments

Comments in code are really important. Sometimes we tend to overuse them and comment on self-explanatory code but in other cases, they are pretty useful. This plugin is not must-have, it just looks aesthetically better and makes reading comment way easier.

From mono-color boring comment

TO THIS!

Isn’t it better?

Better Comments – Change your boring comments into piece of art

To Sum up…

All those plugins have been here for years. I believe that every javascript developer should be aware of them. Even if you want to switch languages, for example, to python, you can google “eslint for python” and find an alternative solution. It is okay not to know everything, but as developers, we need to know how to ask the right questions to find the right answer.

I hope you found this article helpful!
If you have any questions, contact me via direct message or leave the comment.

⚠️⚠️⚠️⚠️⚠️
P.S. I’m doing free 1h consultations via Skype for every person who sends 10$ to this fundraise Fundraiser for Macmillan Cancer Support. ❣️ 💵 ➡️ 🏥
⚠️⚠️⚠️⚠️⚠️

Click here for more information 🌐

Programming Struggles

Leave a Reply

Your email address will not be published. Required fields are marked *