7 VS Code Extensions that will make your life significantly easier.
You spend a significant amount of time each day in your code editor, invest in yourself.
When it comes to web development Microsoft’s Visual Studio Code is ubiquitous. According to StackOverflow’s 2019 developer survey, over fifty-five percent of web developers use Visual Studio Code. Developed using Electron.js (formerly called Atom Shell because it is the technology that drives the Atom text editor) VS Code is a feature-rich source code editor capable doing a lot. A large part of its popularity can be attributed to the sheer amount of customizability available via extensions. Below I cover some of my favorite extensions that enhance the experience of VS Code.
Language extensions are great. Not only do add basic features like basic code completion and syntax highlighting, but they let you take advantage of VS Code’s built-in debugger. This means you’ll be able to set breakpoints and step through your code viewing the values of variables and method calls.
Similarly, there are several extensions for frameworks/libraries such as React, jQuery, etc. The usefulness of these extensions vary from extension to extension but you can expect to find useful snippets that help speed up your coding.
You are going to be spending a large amount of time looking at your text editor might as well make it look as pretty as possible. VS Code offers a number of themes and icon packs from its extensions tab. Typing
@category:themes into the search bar will let you go through all of them. For a long time, I have been using Andromeda by Eliver Lara. I also fancy the Material Ocean High Contrast Theme by Mattia Astorino. Both themes are on the darker end and Mattia Astorino also has an icon pack to go along with their theme.
My preferred icon pack is Material Icon Theme by Philipp Kief. It supports several file and folder extensions. I’ll admit that, thanks to Philipp, I rarely ever bother looking at file extensions or reading folder names anymore. The folder/file icons are unique enough that I can tell what I am working on at a quick glanc
Better Comments by Arron Bond
Contribute to aaron-bond/better-comments development by creating an account on GitHub.
If you believe everyone should be commenting their code then this extension is for you. Whether it is for themselves or for others comments help make following code much easier. Better Comments improves comments by allowing you to color code. This lets you categorize your comments and draw attention to them by color. Personally, I use green for basic commenting, blue for return values, orange for todos, red for warnings. The extension is highly configurable inside of the settings.json file. Better Comments is such a simple extension but I use it every day.
Bracket Pair Colorizer by CoenraadS
Bracket Colorizer Extension for VSCode. Contribute to CoenraadS/BracketPair development by creating an account on…
Another simple but handy extension. By default, Bracket Pair Colorizer color matches user
() by cycling through three different colors. This makes it much easier to spot a missing closing bracket and to see how far nested inside your methods you are in. This extension is also highly configurable, allowing you to add additional colors, display the brackets on the line-count, and highlight matching brackets. This is another extension that is easy to install and forget.
ES Lint by Dirk Baeumer
VSCode extension to integrate eslint into VSCode. Contribute to microsoft/vscode-eslint development by creating an…
This useful extension lets you integrate ESLint into VSCode. You’ll still need to install ESLint either locally or globally using
npm install eslint or
npm install -g eslint. From there you’ll need to make a configuration file. Afterwards, there are several options you can configure in the settings.json file.
Path Intellisense by Christian Kohler
Visual Studio Code plugin that autocompletes filenames - ChristianKohler/PathIntellisense
As the name suggests Path Intellisense adds intelligent autocomplete when you need to link to another file or folder. I use Path Intellisense because it is faster and so that I can avoid errors caused by typos.
Git Lense by Eric Amodio
Supercharge the Git capabilities built into Visual Studio Code - Visualize code authorship at a glance via Git blame…
With over 17 million downloads Git Lense is one of the most popular extensions available on VS Code. This extension enhances VS Codes git integration. It allows you to see when each line of code was committed along with the commit message and time. This feature alone is great for seeing who was the last person to edit or write that line of code.
Git Lense also lets you look at your git repository right from within VS Code. You can see all the branches, contributors, any stashes you’ve made. You can compare different branches as well as compare differences between your current branch and right from VS Code.
open in browser by TeachER
Contribute to SudoKillMe/vscode-extensions-open-in-browser development by creating an account on GitHub.
Here is another straightforward extension designed to save you some time. open in browser as the name suggests allows you to open a file … in your browser. Instead of copying the path of the HTML file into your web browser you can just click open in browser or use the keyboard shortcut
alt + b to automatically open a file in your default web browser. You can also opt to open a file in another browser that isn’t your default.
Keyboard shortcuts are a timesaver. Being able to quickly execute multiple functions without ever reaching for the mouse is a godsend. Unfortunately, learning all of these from scratch takes time. If you have already learned the keybindings of a different text editor you probably do not want to learn new keyboard shortcuts for those same functions again.
VS Code makes importing your settings and keymaps easy. The Sublime Text Keymap and Settings Importer, Atom Keymap, and Notepad++ keymap by Microsoft will allow you to hit the ground running using most of the keyboard shortcuts you know and love. If your using anything else there is probably a third party extension that has you covered. There are also several themes based off of other editors so you can configure your code’s syntax to look the same as well.
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
Edit (May 5, 2019): As other’s below have commented Bracket Pair Colorizer has a new updated version called Bracket Pair Colorizer 2. It is recommended that you switch over to this version.