VSCode also known as Visual Studio Code, is certainly one of the popular and lightweight code editor you’ll find. It take things that you’ll find from other popular code editors such as Atom and Sublime Text. Its success essentially comes from the power to provide better performance and stability you won’t find in other editors.

It provides other features like IntelliSense, which you could only found available in full-sized IDEs such like Eclipse. The power you find in VSCode no doubt comes directly from its marketplace which is all thanks to the incredible open-source community.

The editor is now capable of serving almost every programming language, framework and development services. Support for a library or framework comes in many ways. Which mainly includes snippets, syntax highlighting.

Also To Emmet and IntelliSense features for that specific languages or technology. In today post, I will presenting a whole range of extensions that can help developers who either made the move to VS Code, Or users who are looking for a new extension to try or even replace existing ones.

1. Live Share Chat

Live Share Chat is a companion extension for Visual Studio Live Share, which enables you to collaboratively edit and debug code with others, in real time.

2. Docker for VS Code

This Docker extension makes it easy to build, manage, and deploy containerised applications from Visual Studio Code. Also it provides one-click debugging of Node.js, Python, and .NET Core inside a container.

3. React Native Tools

This extension provides a development environment for React Native projects. Using this extension, you can debug your code and quickly run react-native commands from the command palette.

4. Remote Development

The Remote Development extension pack allows you to open any folder in a container, on a remote machine, or in the Windows Subsystem for Linux (WSL) and take advantage of VS Code’s full feature set.

5. Tailwind CSS IntelliSense

This extenstion will give you all the Tailwind CSS class name completion for VS Code

6. PHP Awesome Snippets

A fullset of snippets for PHP devs to boost coding productivity.

7. Browser Preview

Browser Preview for VS Code enables you to open a real browser preview inside your editor that you can debug. Browser Preview is powered by Chrome Headless, and works by starting a headless Chrome instance in a new process.

This enables a secure way to render web content inside VS Code, and enables interesting features such as in-editor debugging and more!

8. Color Identifiers

Color Identifiers is a syntax highlighter that gives each identifier a different color, inspired by Color Identifiers Mode for Emacs. This extension works for any language that offers semantic highlighting in Visual Studio Code. It uses the language server to determine which words to highlight.

Two themes, Color Identifiers Dark and Color Identifiers Light, are included. These themes make variables more prominent and language keywords less prominent. Color Identifiers is also compatible with any existing theme.

9. Drupal 8 Snippets

This extension has advanced Drupal 8.x hook snippets, including hook parameter type.

10. VideoHint

Javascript syntax and featured explanations and video tutorials directly in the code. Providing an easy way for reading the code quickly, especially for those who do not master javascript.

11. Bootstrap 5 Snippets

The staff at Coder Foundry have put together a snippet collection that includes precreated static pages, page frameworks, and common Bootstrap elements all using Bootstrap 5.

Full pages and template frameworks include the CSS/JS CDNs for Bootstrap 5. Individual elements will need CSS/JS references added to the page for functionality.

All templates use on page CSS styling for positioning – we strongly recommend moving this to a separate CSS file.

12. Atlassian for VS Code

This extension combines the power of Jira and Bitbucket to streamline the developer workflow within VS Code. With Atlassian for VS Code you can create and view issues, start work on issues, create pull requests, do code reviews, start builds, get build statuses and more!

13. NPM Dependency

With this extension it will update dependencies/devDependencies to latest version for specified package.json

14. Todo Tree

This extension quickly searches (using ripgrep) your workspace for comment tags like TODO and FIXME, and displays them in a tree view in the explorer pane. Clicking a TODO within the tree will open the file and put the cursor on the line containing the TODO.

15. Format HTML in PHP

This extension provides formatting for the HTML code in PHP files. This way this works is this extension runs right before the save action which triggers any other registered PHP formatting extensions so you are free to have one and this will not get in the way or block it.