Whether you’re a seasoned developer or a junior developer that has just started your first job, you want to make your life as a developer as easy as possible. The right tools can help accomplish this.
If you’re using Visual Studio Code as your IDE of choice, you have the ability to make it fit your preferences. One way you can do this is by installing the right plugins. You can add as many as you’d like in order to make your life as easy as possible.
The plugins that you’re using have a big impact on your productivity and the way you work. That’s exactly why we’ll be going over this list of Visual Studio Code plugins.
1. Visual Studio Intellicode
With over 3,200,000 downloads, Visual Studio Intellicode is one of the most downloaded plugins for Visual Studio. And, in my opinion, it’s one of the most helpful plugins that you can ever use.
This plugin is built for helping developers with smart code completion suggestions, and it has pre-built support for a wide array of programming languages.
Visual Studio Intellicode uses machine learning techniques to observe and find patterns used in numerous open-source GitHub projects, and it suggests them while you’re coding.
2. Git Blame
Who did this?!
Every once in a while, you need to know who wrote that piece of code. Well, Git Blame to the rescue. Git Blame tells you who the last person that touched a line of code was. On top of that, you see which commit it happened in.
This is very good information, especially when you’re working with something like feature branches. When using feature branches, you refer to a ticket with your branch name. Since Git Blame tells you which commit — thus which branch — a line of code was changed in, you know which ticket caused this change. This helps you get a better understanding of the reasoning behind the change.
3. Prettier
Prettier is one of the best plugins for developers who need to follow a well-laid set of rules when developing. It’s a compelling plugin that allows you to utilize the Prettier package. It’s a robust opinionated code formatter that allows developers to format their codes in a structured way.
Prettier works together with JavaScript, TypeScript, HTML, CSS, Markdown, GraphQL, and other modern tools and allows you to properly format your code.
4. JavaScript (ES6) Code Snippets
Every web developer that’s slightly up-to-date has probably worked with one of the various JavaScript stacks. No matter what your choices of frameworks are, typing the same generic codes in different projects ought to decrease your workflow.
The JavaScript (ES6) code snippets is a handy plugin that provides some very useful snippets of JavaScript codes for the idle developer. It binds standard JavaScript calls into simple hotkeys. Once you get the hang of it, it can increase your productivity dramatically.
5. Sass
As you’ve probably already guessed, this plugin helps developers that are working with style sheets. Once you start creating the style sheets for your application, you definitely want to use the Sass plugin. This plugin supports indented Sass syntax highlighting, autocompletion, and formatting.
When it comes to styling, you definitely want to have this tool in your toolset.
6. Path Intellisense
Path Intellisense is one of those Visual Studio Codes that provides a guaranteed productivity boost to your development. If you’re working on a lot of projects at the same time with too many different technologies, you’d surely want a handy tool that can remember pathnames for you. This plugin will save you a lot of time that otherwise would be wasted on looking for the right directory.
Path Intellisence started as a simple extension for auto-completing file names, but it has since been proven to be a valuable asset in the toolset of most developers.
7. Debugger for Chrome
No need to leave your Visual Studio Code if you need to debug JavaScript. Debugger for Chrome, which is released by Microsoft, lets you debug your source files directly in Visual Studio Code.
8. ESLint
The ESLint plugin integrates ESLint into Visual Studio Code. If you’re not familiar with it, ESLint is a tool that statically analyzes your code to quickly find problems.
Most problems ESLint finds can be automatically fixed. ESLint fixes are syntax-aware, and so you won’t experience errors introduced by traditional find-and-replace algorithms. And on top of that, ESLint is highly customizable.
9. SVG Viewer
The SVG Viewer extension adds a number of utilities for working with SVGs in Visual Studio Code. This plugin makes it possible to render SVG files and see what they look like without having to leave the editor. Furthermore, this plugin also has options for converting to PNG and generating data URI schemes.
10. Themes
Last but not least, themes. Since you’ll be looking at your editor every day, why not make it as pretty as possible? There are tons of customization plugins that change the color scheme and the icons in the sidebar.