“The value of a tool lies in how well it is used.”
The software development industry has seen a massive boom, which has resulted in the median base salary of a software developer being a ridiculous $110,000, according to Indeed.
Bonus tip: The smarter of us have realized that hiring front-end developers remotely can save companies up to 40% per year, alongside giving businesses access to a truly global talent pool.
As I was saying, the software development industry is booming.
As a result, the pressure on us coders to perform even better and be even more productive is mounting as we speak.
The 2019 StackOverflow survey said that 50% of devs use VS code, so let’s focus on how we can improve the most popular IDE on the market.
In fact, this article by Business Insider calls VS code “the software that developers use to make more software.”
While VS code is a pretty sweet editor on its own, what if I told you we could make it work even better for us?
To help you fellow devs, I have compiled a list of the best (most productive) extensions in the VS code marketplace that may make your life a little easier.
JavaScript Code Snippets
Let’s be honest: as a front-end developer, we all have loads to do, and none of us need the headache of having to write each HTML tag manually.
With JS Code snippets, an extension developed by Charalampos Karypidis, you simply need to type in the first letters of common code elements, and the extension will fill out the rest for you.
As a bonus, you won’t need to spell check the areas of code you wrote with the extension, making spelling errors much rarer.
This makes the debugging process easier because every major HTML component you can think of is included in the extension’s inbuilt library.
The cherry on top is that it supports the 6th version of the ECMA Script (ES6), allowing the effective use of class deconstruction, arrow functions, template strings, and much more.
Reason to use: It saves loads of time by serving as an “autofill” function for your code.
The icing on the cake: Reduces the number of spelling errors in the code, which would have been a massive pain to spot usually.
Angular Snippets
While we’re on the topic of code snippets, let’s not forget our friends who prefer Angular.
Similar to the JavaScript Snippet extension listed above, this nifty little piece gives you code snippets for Redux and React, supporting ES7 (JS Code Snippets uses ES6).
Supporting both TypeScript and HTML, it is super easy to use.
All you have to do is type in part of a snippet, and a list unfolds.
Simply hit enter to select the first option, or click the list item you want inserted, and the extension does the rest for you.
Reason to use: Again, it serves as a handy autofill function while coding.
The icing on the cake: One-click use, a massive library of commands.
CSS Peek
Unless you’re some sort of demon who likes to work in separate CSS files for each class, this one is a lifesaver.
We’ve all faced the problem of wanting to look at selected/applied styles for two classes at the same time, and I’ll be the first to admit that I used to do this by, erm, using two instances of my code editor open.
That was before I found CSS Peek, which allows devs to highlight code in a class, and then simply click. Then, the CSS will pop up in a square hover window in your editor, overlaid on the code.
Voila: the relevant section of the stylesheet will open, allowing you to view and edit the CSS.
Reason to use: Who doesn’t want to make their life easier?
The icing on the cake: It turns class names and IDs into a hyperlink that takes you straight to the relevant part of the CSS code.
ES Lint
It’s been said that a true genius is always messy.
How many times have you written an absolute masterpiece of code, only to have a co-developer tell you how hard it was for their non-genius brain to comprehend?
This is where ESLint comes in. It is the king of creating clean, readable, visual-friendly code from any JS/ HTML sample you decide to throw at it.
Depending on how you configure it, ESLint can help you with everything, from adding spaces and commas to maintaining proper indentation in the file.
Reason to use: Helps automatically maintain industry-standard indentation and spacing.
The icing on the cake: Automatically fixes your linter if you save the file without running it
Prettier
If you work with other developers, Prettier is a must.
It removes the original project styling in a project and replaces it with code styled according to team-wide settings (or presets) chosen by you.
Simply hit save, and the next time you open your project, you will get appropriately formatted code, which saves loads of spamming the tab button and spacebar to do the same.
It is a lifesaver for teams who have difficulty finding a standard style guide — which is even more of a problem when the vast majority of devs are working remotely.
Prettier works with all major languages. You can even customize it so that it only formats particular languages automatically, leaving the others for you to do manually if you so desire.
Reason to use: Perfect for collaborative projects, makes code easily readable.
The icing on the cake: Color-highlights keywords, functions autonomously, can integrate with ESLint
Git Lens
Granted, VisualStudio does have an in-package git integration that affords developers a pretty fair degree of control and visibility over local repositories.
However, the addition of the Git Lens extension does wonders in enhancing that local integration capability.
Of course, you can access all the functions of this extension from the “source control” screen in the editor, but why jump through hoops when you can access it all without leaving your code?
The Git Lens extension allows users to rapidly access details about when, why, how, and by whom a particular line or block of code was changed.
Reason to use: Git Lens allows devs to quickly access information about lines of code that they would have otherwise had to navigate through separate windows for.
The icing on the cake: It has an inbuilt git command palette with multiple sidebars for easy navigation.
Path Autocomplete
No, this is not your run of the mill auto-import extension.
If you are at a place where you need to insert a link to something, all you have to do is input a “./” (period and forward slash).
This will trigger a drop-down menu, allowing you to navigate to the file you want from within your code editor.
No more digging through twenty subfolders to find and link the file path you want: this extension allows you to do that without even leaving your editor.
Reason to use: Prevents strokes caused by high blood pressure when linking to other project files.
Bracket Pair Colourizer
The most valuable tools are often the ones that are blisteringly simple in their purpose.
The Bracket Pair Colourizer extension in VS code has only one job: to help you find the coding bracket of the current block of code/ the last open bracket in your code.
Almost always, we have more than one closing bracket in our code.
Over multiple blocks, it can become quite frustrating to find the correct bracket, but with this extension, every bracket pair in the current block you’re working in is the same color.
Reason to use: It’s better to have and not need than to pull your hair out in tufts because you need and don’t have.
Most of these extensions may seem rather simplistic in function, but trust me — once you start using them, you will begin to wonder how you ever managed without them in the first place.
Until next time, I bid you adieu.
