Whether you are an experienced developer or a junior developer just starting your first job, you will want to make your development work as easy as possible. The correct use of tools can help you achieve this goal.
If you choose to use Visual Code as your IDE, you can customize it to your preferences. One way to do this is by installing the right plugins. To make your life as simple as possible, you can add many things you want.
The plugins you use will have a significant impact on your productivity and workflow. That's why we use the Visual Studio Code plugin list.
We change tools, and then the tools change us. - Jeff Bezos
Please note that all these plugins are available for free on the Visual Studio Marketplace.
Visual Studio Intellicode#
Visual Studio Intellicode, which has been downloaded over 3.2 million times, is one of the most downloaded plugins for Visual Studio. And in my opinion, it is one of the most useful plugins you can use.
This plugin is designed to help developers by providing intelligent code completion suggestions and has built-in support for multiple programming languages.
Visual Studio Intellicode uses machine learning techniques to observe and find patterns used in numerous open-source GitHub projects and provides suggestions while coding.
Git Blame#
Who did this?!
Sometimes, you need to know who wrote this piece of code. Well, Git Blame comes to the rescue, and it tells you who was the last person to touch a line of code. Most importantly, you can see in which commit it happened.
This is very useful information, especially when you are using things like feature branches. When using feature branches, you can reference tickets using the branch name. Because Git Blame tells you which commit (which branch) a line of code was changed in, you will know which ticket caused that change. This helps you understand the reasons behind the changes better.
Prettier#
Prettier is one of the best plugins that developers need to follow a set of good rules while developing. It is a remarkable plugin that allows you to leverage the Prettier package. It is a powerful, opinionated code formatter that allows developers to format their code in a structured way.
Prettier is used with JavaScript, TypeScript, HTML, CSS, Markdown, GraphQL, and other modern tools to format code correctly.
JavaScript (ES6) Code Snippets#
Every slightly seasoned web developer has probably used various JavaScript stacks. Regardless of which framework you choose, typing the same common code across different projects should reduce your workflow.
JavaScript (ES6) Code Snippets is a handy plugin that provides some very useful JavaScript code snippets for idle developers. It binds standard JavaScript calls to simple hotkeys. Once you master the tricks, your productivity will increase significantly.
Sass#
You might have guessed it, this plugin helps developers who are working with stylesheets. Once you start creating stylesheets for your applications, it is a must to use the Sass plugin. The plugin supports indented Sass syntax autocompletion, auto-setting syntax guidance, and formatting.
In terms of styling, you definitely want to include this tool in your toolkit.
Path Intellisense#
Path Intellisense is one of the Visual Studio Code extensions that provides a guaranteed productivity boost to your development. If you are working on multiple projects simultaneously and using too many different technologies, then you definitely need a handy tool that can help you remember path names. This plugin will save you a lot of time that would otherwise be wasted on finding the correct directory.
Path Intellisence was initially a simple extension for autocompleting filenames, but it has proven to be a valuable asset in most developers' toolkits.
Debugger for Chrome#
If you need to debug JavaScript, you don't have to leave Visual Studio Code. The Chrome debugger, released by Microsoft, allows you to debug source files directly in Visual Studio Code.
ESLint
The ESLint plugin integrates ESLint into Visual Studio Code. If you are not familiar with it, ESLint is a tool for quickly identifying issues by statically analyzing code.
Most issues detected by ESLint can be automatically fixed. The ESLint fixer recognizes syntax, so you won't encounter errors introduced by traditional find and replace algorithms. Most importantly, ESLint is highly customizable.
SVG Viewer#
The SVG Viewer extension adds many utilities for working with SVG in Visual Studio Code. This plugin makes it possible to render SVG files and view their appearance without leaving the editor. Additionally, this plugin has options for converting to PNG and generating data URI schemes.
Themes#
Last but not least, Themes. Since you see your editor every day, why not make it as beautiful as possible? There are plenty of custom plugins available that can change the color schemes and icons of the sidebar. Some popular themes are available for free, namely One Monokai, One Dark Pro, and Material Icon.