Visual Studio Code other known as VSCode, is certainly one of the most popular and lightweight code editor you’ll find today. However, it does take things from other popular code editors, editors such as Atom and Sublime Text. Nevertheless, its success essentially comes from the power to provide better performance and stability you won’t find in other code editors. Also, it provides other features like IntelliSense, which you could only found available in full-sized IDEs 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, to Emmet and IntelliSense features for that specific languages or technology.

In this post, I will focus on a wide range of extensions that hopefully can help the developers who either recently made the move over to VS Code or those users who are looking for a new extension to try or even replace their existing ones.

1. Docker for VS Code

Docker for Visual Studio 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.

2. React Native Tools

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.

3. Remote Development

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.

4. Teamwork

Teamwork Vscode Extension

The Teamwork Projects and Visual Studio Code Editor extension allows you to manage your projects and tasks directly from within Visual Studio Code so you can get more work done from one place.

5. Prettier

Prettier Code Formatter

Prettier is an opinionated code for-matter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

6. Format HTML in PHP

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.

7. Beautify

Beautify

Beautify javascript, JSON, CSS, Sass, and HTML in Visual Studio Code. VS Code uses js-beautify internally, but it lacks the ability to modify the style you wish to use. This extension enables running js-beautify in VS Code, and honouring any .jsbeautifyrc file in the open file’s path tree to load your code styling.

8. Bootstrap 4 Free & Pro Snippets

Bootstrap 4 VSCode Extensin
Visual studio code plugin containing Bootstrap 4, Font awesome 4 & Font Awesome 5 Free & Pro snippets. This plugin works in both in the stable & the insiders build

9. Todo Tree

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.

10. Debugger for Chrome

Debugger for Chrome
This is a extension to debug your JavaScript code in the Google Chrome browser or other targets that support the Chrome DevTools Protocol.

11. Live Share Chat

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.

12. GitLens

Git Lens

GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.

13. Flutter

Flutter VS Code

This VS Code extension adds support for effectively editing, refactoring, running, and reloading Flutter mobile apps, as well as support for the Dart programming language.

14. Nativescript Extend

Nativescript Extend

Nativescript extend tool pack, helps Nativescript developers create cross-platform mobiles easliy with the support of snippets, a xml validator and a run emulator from VSCode

15. Sublime Text Pack

Sublime Text Pack

If you are coming from Sublime Text, this extension pack adds functionality for keyboard shortcuts and commands that are missing in VS Code.

16. Sublime Text Keymap and Settings Importer

Sublime Text Keymap and Settings Importer

This extension ports the most popular Sublime Text keyboard shortcuts to Visual Studio Code.

17. Atom Keymap

Atom Keymap

This extension ports popular Atom keyboard shortcuts to Visual Studio Code. After installing the extension and restarting VS Code your favorite keyboard shortcuts from Atom are now available.

18. Eclipse Win Keymap

Eclipse Win Keymap

This extension ports popular Eclipse Windows keyboard shortcuts to Visual Studio Code. Eclipse windows key bindings are provided for Windows, Linux and macOS.

19. Python for Visual Studio Code

Python for Visual Code Studio

This is a extension with rich support for the Python language (for all actively supported versions of the language: 2.7, >=3.5), including features such as IntelliSense, linting, debugging, code navigation, code formatting, Jupyter notebook support, refactoring, variable explorer, test explorer, snippets, and more!

20. Filesize

Filesize

This package is intended for use with the Visual Studio Code editor and it displays the size of the focused file in the status bar of the editor.

21. Atlassian for VS Code

Jira and Bitbucket to 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!

22. NPM Dependency

NPM Dependency for VSCode

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

23. Vue.js Extension Pack

Vue.js Extension Pack

This is a popular VS Code extensions for Vue.js development providing Syntax highlighting, Code format, Code snippets, IntelliSense, Linting support, npm & node tools.

24. Auto Close Tag

Auto Close Tag

Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text does.

25. React Component Splitter

React Component Splitter

This extension allows to easily split long React components into sub-components.

26. Test Explorer UI

Test Explorer Ui

This extension provides an extensible user interface for running your tests in VS Code. It can be used with any testing framework if there is a corresponding Test Adapter extension.

27. Sass

Sass Vs Code

Indented Sass syntax highlighting, autocomplete & Formatter for VSCode

28. JavaScript ES6 Snippets

Javascript Es6 Snippets

This extension provides smple code snippets for JavaScript 2nclude ES6 syntax)

29. Ruby

Ruby Visual Studio Code

This extension provides enhanced Ruby language and debugging support for Visual Studio Code.

30. React-Native/React/Redux Snippets

React Native React Redux Snippets For Es6 Es7

Code snippets for React-Native/React/Redux es6/es7 and flowtype/typescript, Storybook

31. SCSS IntelliSense

Scss Intellisense

SCSS IntelliSense (Variables, Mixins and Functions) for all files in the workspace.

32. Tailwind CSS IntelliSense

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

33. PHP Awesome Snippets

PHP Awesome Snippets

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

34. Browser Preview

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!

35. WordPress Snippets

Wordpress Snippets

The ultimate WordPress snippet collection for Visual Studio Code, with this extension you get snippets for every WordPress function, class and constant.

With it’s easy auto-completion with type hints and tab stops in all the right places and emmet-style abbreviations for all functions. For example, type gtp for the get_template_part function.

36. Drupal 8 Snippets

Drupal 8 Snippets

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

37. Shopify Liquid Template Snippets

Shopify Liquid Template for VS Code

This extension for Visual Studio Code adds snippets for Shopify Liquid Template.

38. Music Time

Music Time

Music Time is a extension for VS Code that gives you full control over your music. Play, pause, repeat, and favorite songs from the status bar—all from inside VS Code. You can also browse and view all your playlists in the VS Code tree view. Say goodbye to context switching.

39. Stackoverflow Instant Search

Stack Overflow Instant Search

This extension adds a quick command to search Stackoverflow without leaving your VS Code. You can find the command by name stackoverflow search or by using the hot-keys CMD+H for Mac users or CTRL+H for Windows users, and H stands for help.

Alternatively you can execute search instantly from a context menu (select text -> right click -> Stackoverflow Search) or by using the hotkeys CMD+Shift+H on Mac or CTRL+Shift+H on Windows.

40. VSCode Speech

Vscode Speech

VSCode Speech adds basic text-to-speech functionality to the VSCode editor using your operating system’s built-in text-to-speech facilities.

Share

40 VS Code Extensions for Developers