A humble beginning
It all started with me getting my first pc, a 386, around the age of 10. Playing Gorillas Bas, getting immersed into the world of adventure games, writing midi songs and spinning cubes in 3D Studio MAX. That was the beginning of my love affair with computers and what later became a full-time hobby. Fast forward a couple of decades (3 to be exact) and sitting in my corner office (am actually at the corner of an open-plan space), surrounded by monitors, sipping my coffee, thinking that life is pretty sweet. Some would argue that 3 monitors are 2 too many, but for me is a constant battle, trying to fit all the software am using in those 3 monitors, in order to avoid using alt + tab to switch between them. That’s the life of a Web Developer.
One IDE to rule them all
I have tried several Code Editors/IDEs throughout my career, starting with Dreamweaver and going through Sublime and lately PhpStorm. I’ve been thinking of trying something else, as I was not too excited with PhpStorm, when I stumbled on some industry statistics at 2019.stateofcss.com
What was this “VS Code” and why was everyone and their grandma using it?
This was around the same time that I started using frontendmasters.com, and all those great instructors were also using it and talking about it. I decided to take a crash course on VS Code, called “VS Code Can Do That?” (which I totally recommend) with Burke Holland and I was immediately hooked with VS Code.
Providing some context
At BLEND we work on custom websites, built using WordPress. We work on our own custom themes, which we develop using a custom design from our Design Team. Our day-to-day operations involve using Adobe XD to process the designs, Chrome to view our work in progress and our Code Editor to develop the projects. We are also working with VMs to build and run our projects.
Boosting your productivity
For me it’s all about getting the most out of my IDE and doing the most of my daily operations in it, so I can avoid switching between monitors and losing time. Some would say that I am time-conscious, others would argue that am simply lazy, I don’t mind either. Through a combination of VS Code Extensions and shortcuts I have optimized my process so I can run XD in one monitor, view my work in progress in the browser in the second monitor, and code in my 3rd/main monitor. Below is a list of my favorite extensions for VS Code and how you can use them.
Top 10 VS Code Extensions – a Web Developer’s perspective
1. Material Theme & Material Icon Theme
Choosing the proper theme for your IDE is crucial and Material Theme is one of my favorites. Use ctrl + p to access the command palette after installing it and navigate to Preferences: Color Theme. It provides a variety of Light and Dark Themes as also the option to customize them.
You can combine this with the Material Icon Theme that helps distinguish files with a variety of icons, and you have the perfect companion to your IDE!
Hint: I was always under the impression that dark themes are better for your eyes (and consume less energy), but it seems that I was wrong. Dark themes might be better in low-light conditions (let’s say you are coding at night with the lights off, or in your mom’s basement) but they put more strain to your eyes in high-light conditions. Give the Light Theme a chance if you are in a well-lit space and you won’t regret it! Or you might, so don’t blame me.
2. Prettier – An opinionated code formatter
Prettier does what the name suggests, formatting your code in a consistent and prettier style. You can configure it to automatically format your code on saving, or manually apply it using the command palette. This can save you a lot of time, as you can avoid repetitive tasks, such as hitting tab multiple times to format your code.
Go to Settings -> Text Editor to configure your preferences
An example of Prettier formatting my sass files on save
3. Bracket Pair Colorizer
I am sure you often find yourself in the situation where you are trying to see where a bracket ends, especially when you have a lot of nested items. I most often did. With the Bracket Pair Colorizer matching brackets are identified with colors, and you can configure which characters to match and which colors to use.
Below is an example of how the previous code transforms with the Bracket Pair Colorizer:
4. Peacock – Subtly change the color of your Visual Studio Code workspace
During my daily operations, I often need to switch between projects to do a quick bug fix or reference a function I previously wrote or library I previously used. So, I find myself in a situation where I have 2 or 3 projects open in my monitor. Peacock helps you to visually distinguish those projects by applying a different color to them.
Use the command palette to search for Peacock after installing it and apply a color to your project.
5. Auto rename tag
If you are writing a log of HTML/XML, Auto Rename Tag can also be a time saver. Just rename the opening tag and it will automatically rename its closing tag.
6. Bitbucket (or Github)
With the Bitbucket (or Github) extension you can do all your git-related tasks through VS Code. Open the command palette after the installation and type Atlassian to see a list of the available commands.
7. Command Runner
In our project setup, we are using npm scripts to minify and autoprefix our css, uglify js files and more. I use the VS Code terminal to run those commands when needed. With the Command Runner extension, you are able to create and run custom shell commands. Create them in your settings JSON file and then use ctrl + shift + r to bring up the available commands.
8. Image Preview
The Image Preview extension allows you to see a preview of your images in the gutter of your file and on hover. A real time saver when you are trying to remember what an image looks like.
9. Version Lens
This handy little extension lets you see the package version information for npm, just by hovering over your packages.
10. GitLens
Another great extension with over 4,000,000 installations! This one is great if you want to see more details for your git repository. It adds a toolbar to the top right corner of VS Code.
It provides:
- Current line annotations
- Authorship on the top of your file
- Repositories view
- File History view
- Line history view.
And many more. This is a must-have for everyone using git in their everyday workflow.
File authorship
Latest changes on file
Revision Details
Annotations
11. Bonus Tip – Use shortcuts
This is not actually an extension but a very useful tip. Use the VS Code Preferences to map repetitive tasks to shortcuts and save time. During Quality Test I often need to commit and push each change performed for a task, to our stage server, after implementing it locally. I have assigned shortcuts to the Commit and Push VS Code actions which saves me a lot of time by avoiding to have to use the mouse to manually select those actions from the sidebar. Find your most repetitive tasks and try to use shortcuts to cut some time.
So, there you have it, my top 10 VS Code extensions for 2020. Are you already using any of those, or have any other favorites?
Work with our development team
Contact us today to arrange a meeting with our web development experts
