My VS Code extensions that I absolutely love and use all the time
Tags: vscode, extensions, tools, beginners
Published: 2023-03-18 09:10:40

In this article, I'd like to share with you some of the Visual Studio Code extensions that I find incredibly useful and use on a daily basis. So, if you're interested in enhancing your coding experience with some great tools, keep reading and let's explore together!


#### [Github Theme](https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme)

I personally love to use the GitHub theme as my theme for VS Code. It's not really an extension, but it changes the look and feel of my editor. It's easy on the eyes and makes reading code a breeze. 

#### [Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)

Want to spice up your Visual Studio Code editor? This extension has got you covered with a collection of icons to choose from!

#### [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

Say goodbye to messy code with this extension! It automatically formats your JavaScript, CSS, and HTML code, making it look clean and organized.

#### [Polacode](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)

This extension that lets you create shareable screenshots of your code, complete with your preferred theme and font.

#### [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)

I love using these extensions to improve my Git workflow in VS Code. They have been incredibly helpful!

#### [Bookmarks](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks)

Bookmark your code easily with this extension! Just use the shortcut 'ctrl+alt+k' to add or toggle a bookmark, and 'ctrl+alt+l' or 'ctrl+alt+j' to navigate between bookmarks.

#### [Error Lens](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens)

Make your code errors and warnings easier to spot with this extension that enhances the highlighting of errors, warnings, and other language diagnostics.

#### [Project Manager](https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager)

If you work on multiple projects in Visual Studio Code and need to switch between them frequently, the Project Manager extension can simplify the process and make managing easy.

#### [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

This amazing tool for coding JavaScript highlights common errors as I write code, helping me detect and fix mistakes quickly. Plus, it provides real-time validation to keep my code error-free.

#### [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)

Create a local development server with ease using this extension! It even includes a live reload feature that works for both static and dynamic web pages.

#### [REST Client](https://marketplace.visualstudio.com/items?itemName=humao.rest-client)

Want to test your APIs without leaving Visual Studio Code? The REST Client extension has got you covered! It lets you send HTTP requests and view responses right inside VS Code. Say goodbye to switching between applications!

#### [Output Colorizer](https://marketplace.visualstudio.com/items?itemName=IBM.output-colorizer)

Make your log files easy on the eyes with this extension! It adds syntax highlighting to your logs for a colorful and organized display.

#### [JavaScript (ES6) code snippets](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets)

This extension is essential for web development as it offers code snippets for JavaScript, Vue, React, and HTML.

#### [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)

This extension helps you save time by automatically updating the name of the corresponding close-tag when you modify the name of an open-tag. No need to manually update them anymore!

#### [Auto Close Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag)

Save time and maintain your HTML files easily with these two VS Code plugins. They automatically rename and close your tags, even in React's JSX syntax.

#### [Auto Import](https://marketplace.visualstudio.com/items?itemName=steoates.autoimport)

With this extension, you'll never have to manually search for imports again! It automatically detects and suggests code completion and actions for all available imports in your code, saving you time and effort.

#### [Import Cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost)

Imagine being able to see how much space a third-party library takes up in your code! That's exactly what the Import Cost extension does. It even uses colors to show you which ones are heavy imports, and highlights them in red so you can easily spot them.

#### [npm Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense)

This awesome plugin for Visual Studio Code helps you quickly autocomplete your npm modules when writing import statements. No more typos or manual searching for module names!

#### [Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)

Meet the sibling of NPM Intellisense! This awesome VS Code plugin now autocompletes your filesystem paths. It's from the same maintainer as NPM Intellisense, and it's become a must-have tool for me. Give it a try and simplify your coding workflow!



And there you have our selection of extensions, thank you for reading this article that can enhance your productivity and coding experience! I hope that these extensions, from code completion to debugging to project file management, will be helpful for you. Let me know in the comments which ones you find the most useful! Thanks again for reading! 🙌