Since I started coding I have used many text editors, such as Sublime, Atom and even vim (I know this is a bit different but it can be considered an editor anyway). I have been using VS Code for a couple of years and I really really love it.
I love this editor because it has a really good performance (at least I don’t have any issues so far), it is free and you have a lot of extensions available to install. These extensions can make a difference in your everyday work and of course, make your editor look awesome!
I will share with you what is my top 5 extensions for VS Code. You will find two that are only useful if you write Javascript code, which I do... And I love to!
Extensions
If you are working on a project that uses git as the VCS (Version Control System) you will love this one. This basically tells you who made a given change in the line your cursor is on. It shows you the commit message and the user who made the change.
This extension also adds a new option in the left side menu where you can see in great detail, the commit logs, compare files, see branches, etc.
This one is also for pretty much any kind of software developer. It is nothing more than a icon package. Let me show you an example…
As you can see, it does a lot more than just looking at each file’s extension and use the right icon. Some files don’t even have an extension in the file name, for instance, the “LICENSE” file. But somehow, the extension uses a different icon for this file, even though it is just a text file. The “Dockerfile” got its own icon too! It really is more than just an icon theme for your text editor!
Sometimes you have a lot of “(“ and “{“ and it’s hard to find the corresponding “)” and “}” closing characters. I use this extension to solve this first world problem. It applies a different color for each pair of “()” and “{}”.
Awesome, right?
ESLint is a tool to specify code standards. Some questions like:
- Should I put a space around the “=” in an assignment?
const a = b;
or
const a=b;
- Should I leave a white space between the if keyword and the condition in an if statement?
if (condition) //...
or
if(condition) //...
And much more, can be answered by this tool…
All of these code standards can be defined and enforced by ESLint. You just need to integrate this tool in your project and set your rules in a eslintrc file. Your build tool will raise an error if some rule is being broken. But you can do better. You can have all those errors popping up in your VS Code. There’s an extension that does just that. It looks for a configuration file and as you type, your text editor highlights errors that break the rules. Some of these errors can be automatically fixed. Just press Ctrl + Shift + P (on a PC) or Cmd + Shift + P on a Mac and type “fix” until you find an option that says “Fix all auto-fixable problems”.
When you import something from a package, it means you are including some external code. If you have a build process in place that generates a bundle file (all code in just one JS file), each library you use will increase final bundle’s size. With this extension, each import statement is evaluated and it tells you what is the cost of that import, in terms of file size. Because here… The size matters!
Conclusion
It’s not obvious the benefits of the extensions I showed you in this post… Until you start using them! Even if some of them just solve some first world problems, I think all of them added value to my text editor and also to my everyday work. I hope you can get something awesome from this post.
Do you use VS Code? Any other editor, like vim? What extensions do you use? Share in the comments your top 5 extensions for your editor of choice!
Top comments (3)
I found one really cool vscode theme named Jellyfish-x-retro 🚀🚀
Do checkout: marketplace.visualstudio.com/items...
Hey there! I shared your article here t.me/theprogrammersclub and check out the group if you haven't already!
Thank you so much! :D