The Microsoft Visual Studio Code is a free, open-source, and highly extensible text editor where users can change the editing experience and customize it to their liking.
What differentiates Visual Studio Code from Sublime Text, Atom, Notepad++, and Vim is its excellent ability to integrate with popular web languages such as HTML/CSS, JavaScript, and TypeScript. It also supports debugging for individual files or remote execution of debuggers like Node.js and Python.
As a Web Developer, you have to devote tremendous amounts of energy to your work. Wouldn't it be nice if someone could lighten your load? Well, maybe a good VSCode extension can! In this article, We will tell you about my essential Visual Studio Code Extensions that I use on a daily basis and recommend to all my fellow developers.
1. Better Comments
The Better Comments extension lets you create comments that are more easily understandable by other people who read your code.
With this extension, you will be able to categorize your annotations into Alerts, Queries, TODOs, Highlights, and Commented out code. You can also choose to style any annotation so it looks like something shouldn't be there.
Check the extension now: Link
2. REST Client
The REST Client visual Studio Code extension is a tool for viewing and managing data and REST APIs. It provides support for generating secure URLs, reading and updating data, and manipulating data.
REST client VS code extension is a REST client for generating API requests from Vscode REST client is a Web API for creating requests to a RESTful web service including the method, URL, headers, and parameters.
Check the extension now: Link
3, JavaScript (ES6) code snippets
The JavaScript (ES6) code snippets VS Code Extension, make writing code in ES6 very easy with IntelliSense and the option to match the code formatting to your preference. This extension also enables you to easily type out entire functions in one line using only your keyboard, so you can focus on creating workflow automation in your application or help decrease fatigue when working long hours.
Check the extension now: Link
4. Bracket Pair Colorizer
This extension creates a visual distinction between matching brackets so they are easier to spot, potentially preventing hours of time wasted from hunting down missing brackets. It does this by changing its color based on the types of brackets involved.
Check the extension now: Link
5. Peacock
Use this extension to change the colors of your workspace. Perfect for when you have multiple VS Code instances open and you want to quickly identify which is which.
Add color to your workspace for increased productivity and seamlessness. With one click you can easily switch to alternate colors for debugging, comparing files, or quickly identifying the stream you want to connect with.
Check the extension now: Link
6. Prettier - Code formatter
Prettier is an opinionated code formatter. Gets rid of messy code when done right nested curly brackets how you write in your code.
Prettier is an opinionated code formatter for JavaScript + CSS. It is designed to be fast, simple, and pretty. While VS Code Extension contains integrations to help you neat up your code automatically, Prettier improves legibility by removing unnecessary whitespace.
Check the extension now: Link
7. GitLens — Git supercharged
GitLens is one of the smartest and most full-featured Git Client for Visual Studio Code. It understands your codebase and provides context to git operations you might perform like adding, removing, updating files; stashing and unstashing changes; exploring history; merging branches.
Check the extension now: Link
8. ESLint
The VS Code ESLint extension is a linting utility for detect errors and potential problems in your JavaScript code. ESLint is used by Twitter, Facebook, Yahoo, Microsoft, Google, Mozilla, IBM, Adobe Systems and PayPal for processing JavaScript.
ESLint is a JavaScript code linting utility. VS Code Extension takes advantage of the ESLint utility, to monitor your code as you type, within the VSCode editor. This extension provides a suitable warning popping up in a list, for all found JavaScript code issues registered by ESLint.
Check the extension now: Link
9. Bookmarks
It helps you navigate your code and jump to important sections quickly. There is no need to search for anything in your code because you can click and go there.
A Bookmarks VS Code Extension is a tool that assists in the code navigation and performance in Visual Studio. You can navigate to different identifiers such as classes, methods, types, and languages much faster through this tool.
Check the extension now: Link
10. Live Server
Live Server allows developers to run their projects directly from the IDE. It's a functioning website including client-side JavaScript, CSS and HTML styling.
This extension provides a headless development mode without server integration, typically running the web application on the local machine.
Check the extension now: Link