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 use of the right tools can help you achieve this goal.
If you choose to use Visual Code as your IDE, you can customize it to fit 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 features that you want.
The plugins you use will have a significant impact on your work efficiency and workflow. That's why we use the Visual Studio Code plugin list.
We change tools, and 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 provide intelligent code completion suggestions for developers 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 a piece of code. Well, Git Blame comes to the rescue by telling you who last touched a line of code. And 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. And since Git Blame tells you which commit (i.e., which branch) a line of code was changed in, you'll know which ticket caused that change. This helps you understand the reason behind the change better.
Prettier#
Prettier is one of the best plugins for developers 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 ensure that your code is formatted 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 busy developers. It binds standard JavaScript calls to simple hotkeys. Once you master the shortcuts, your productivity will increase significantly.
Sass#
As you might have guessed, this plugin is for developers who work with stylesheets. Once you start creating stylesheets for your applications, you must use the Sass plugin. It supports indented Sass syntax autocompletion, auto-closing, 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 plugins that provides a guaranteed productivity boost for your development. If you are working on multiple projects simultaneously and using too many different technologies, you definitely need a handy tool to 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 Intellisense was initially a simple extension for autocompleting filenames, but it has proven to be a valuable asset in most developers' toolkits.
Debugger for Chrome#
You don't need to leave Visual Studio Code if you need to debug JavaScript. 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're not familiar with it, ESLint is a tool for quickly identifying issues by statically analyzing your code.
Most issues identified 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 look at your editor every day, why not make it as beautiful as possible? There are plenty of custom plugins available to change the color schemes and icons in the sidebar. Some popular themes are available for free, including One Monokai, One Dark Pro, and Material Icon.