As a web developer having a well-calibrated editor is the essence of daily workflow that makes you productive. I started using VSCode a year before now, made a switch from Atom and have never looked back. It is open source, well maintained, cross-platform, extensible and customizable at the same time. It is a perfect editor for niche developing such as if you want to focus only on front-end, it offers plenty of quality extensions to get you through your next web application.
In this article, I am going to list some of the VSCode extensions I have found, apart from our personal taste, that anyone in front-end development can leverage from.
This very popular extension by Esben Petersen. It currently has almost 4.1 million downloads. It helps format Javascript code, colors keywords to make your code easily readable. There are similar extensions and one of the popular ones is beautified.
The above extension allows you to see the size of the imported module. It utilizes web pack with babili-webpack-plugin in order to detect the imported size. You can see whether you are importing the entire library or just a particular utility.
This is another personal favorite of mine that I like to use with Bracket Pair Colorizer. It highlights the indentation of your code blocks and makes them appealing to eyes and easy to read and glance. Whether you use tabs or spaces, it does not mind.
With 5.7 million downloads, this package allows you to syntax-highlight, lint, format your VueJS code files with further support for code formatting, debugging, and auto-completion.
In a programming language such as JavaScript, brackets are the core of each function or object. Bracket Pair Colorizer
This extension allows matching brackets to be identified with colors. You can even customize by defining which characters to match, and which colors to use.
Chrome’s official debugger extension for VSCode. It is one of the most used extensions on the VS Code marketplace. It helps you debug your js files running in your chrome browser straight from VSCode.
If you are intro front-end development, there are chances you will always come across HTML files. A beautiful and productive at the same time, way to manage these files is provided by this package using which you can automatically rename the paired HTML tags.
Maintained by one of my friend Emanuel Quimper, it contains update support for ES6/ES7 snippets for technologies like React, Redux and React Native.
Snippets are short-hands in an editor like VSCode. There exist a lot of ready-to-use snippet packages available for front-end libraries and frameworks such as React, Angular, Vue and so on. All you have to do is type the short-hand and press tab from your keyboard.
For example, when using React, type `imr` and press tab. It will expand into `import React from ‘react’;`. One thing to note when using a snippets package is the most updated one, they will have the highest downloads and will cover most syntax related to a framework. Some of them I use extensively are listed below.
This contains some basic Apollo and React snippets if you are into using GraphQL (_using Apollo Client_) and ReactJS.
Similar to React, this is written and maintained by John Papa. If you are into Angular you know who John Papa is.
While working on Git enabled projects, I highly recommend using Git History. It has features to compare branches, view and search the git log that provides a graph with each commit’s details. If you take one step ahead and authorize it with your GitHub profile, it can even pick up avatars from the user profile. A useful feature when working as a team or pulling a request to an open-source project.
**More Github packages that you can use with your VSCode workspaces are:**
Generate `.gitignore` files with fewer commands. Comes with specific snippets.
recently launched by the Github team, this extension allows you to review and manage GitHub pull requests.
**Bonus: Themes**
The default VS Code theme is not bad. However, if a tool you are going to use all day or night, and that can easily be customizable with few clicks and a restart, and good for your eyes too, then go ahead! A tool that reflects its user’s personality is going to be popular. Many people do ask me when I share my workflow on social media as to which theme I use. Well, it is no secret but here you go. I generally switch between two themes right now.
I love the color purple! These are some themes and extensions that I use almost every day with my VSCode install.
