My personal favorite Visual Studio Code extensions
Introduction
This is a short article about all the Visual Studio Code extensions that I personally find to be great tools to have. This are my favorites, so if you use different extensions that I didn’t mention, feel free to let me know in the comments down below.
Just a note…
Along with writing this article, I have also created a YouTube video!
You can check out all the extensions and a brief explanation of each one at this link — Must Have Visual Studio Code Extensions.
Extensions
Code Time
Code Time is an open source plugin that provides programming metrics right in your code editor.
After you install the extension, you will be prompted to login to their dashboard.
Right inside of your code editor you can press command + shift + P
That will bring a window where you can type Code Time and then you can choose between displaying data right inside your code editor, or in a browser.
Inside the browser, all the information is going to look like this:
And inside of the browser, the situation is going to be a bit more colorful:
Code Time is really useful if you’re wondering or you’re required to know how much time you actually spend coding.
One Dark Pro
One Dark Pro is Atom’s most popular theme and it is one of the most downloaded themes for Visual Studio Code ever.
As you can see in this example, we have icons for directories like client and server, as well as for the files like .eslintrc .gitignore and package.json.
One Dark Pro goes in all the way with React, Angular, Redux and a lot of different frameworks and libraries, providing different directory icons for components, util, styles, as well as for reducers, actions and store.
Bracket Pair Colorizer
This extension allows matching brackets to be identified with colours.
This is extremely convenient when you have deeply nested objects or functions, as it shown here:
Color Highlight
Color Highlight shows you a visual representation of any color code.
For example, if you type RGB, RGBa, Hexadecimal or any other color code you will be able to see the color visually like in this example:
Path Intellisense
Path Intellisense is a Visual Studio Code plugin that auto completes filenames.
It is extremely useful for importing components in React since you don’t have to manually enter the path of the file you’re looking for.
ES7 React/Redux/GraphQL/React-Native snippets.
Next extension on the list is ES7 React/Redux/GraphQL/React-Native snippets. Quite a long name, but trust me, it will save you a lot of time, especially if you’re using it with React.
This extension provides you JavaScript and React/Redux snippets in ES7 with Babel plugin features for VS Code.
Right inside of your code editor you can press command + shift + P and then ES7 Snippet Search and you will be greeted with a long list of short commands you can run to get much longer snippets of code.
You can also perform a search here, so you can easily find a command for a functional component snippet, for example.
You run the commands by simply typing them in your editor and pressing enter. Simple as that, works like magic.
GitLens — Git supercharged
GitLens supercharges the Git capabilities built into Visual Studio Code.
It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.
Just by clicking on the line of code you can see who edited it, when did they edit it, and in what commit. Useful stuff!
That’s it!
You made it all the way until the end! If you found any of these extensions useful and you liked the article, feel free to click and hold the clap button! :)
If you have any questions or feedback, let me know in the comments down below. Most helpful would be the support on YouTube since I have just created a channel! Click here, there is a lot of interesting stuff coming soon! :)
