Introduction

If you haven’t heard of Visual Studio Code yet and you are a developer, chances are that you must have buried your head in the sand. Visual Studio Code is currently one of the most popular code editors. It’s an editor for code, built for productivity and efficiency. Visual Studio Code is a cross-platform open-source editor created by Microsoft. It has been designed to be accessible to developers in different domains. Visual Studio Code is designed to be an editor for code projects. It is open source and released under the MIT License. The license ensures that Visual Studio Code will be a project extender and not a personal editor.

Why Visual Studio Code?

What makes Visual Studio Code so popular is the fact that it is built for developers by developers.  Its easiness to use and its high customizability that allows people to extend its functionality through extensions and plugins makes it the number one choice for most developers when editing their code, some even like to use it to debug their code, which is possible thanks to its extensions. With its focus on being a software developer’s best friend. Unlike other code editors, Visual Studio Code seems not difficult at all to get to grips with and is not intimidating.  Coders will already feel at home when using it for the first time. Thanks to its highly intuitive and well-designed UI.

With it, you can code in almost any language as long as you have the extension for it installed. It’s even possible to use it for coding unsupported languages, that have no existing extension for VS Code yet. However, if you do code in an unsupported language you won’t have syntax highlighting, bracket matching, smart completions through IntelliSense, Linting and corrections, Code navigation (Go to Definition, Find All References), Debugging or Refactoring. Even on languages officially supported by an extension, not all extensions support all the features mentioned, it all depends on the extension developers making sure to add support for these features in their respective extensions for VS Code.

25. Best Visual Studio Code Extensions of All Time

Below, we will be talking about some of the best extensions and plugins you have to make sure to install in your Visual Studio Code to optimize, make your life as a coder easier, and increase your productivity even more. This list is also not limited to the best Visual Studio Code extensions of all time. It also includes extensions that I have personally used and think that they are very useful and important to increase my own productivity when coding.

1. Live Server

Live Server by Ritwick Dey is a very useful extension for VSCode if you want to test the front-end of both static and dynamic pages, that you are currently developing on your local machine without deploying it to your server yet. Not only does it allow you to run a server to test your frontend locally in your machine through localhost, but it also allows you to seamlessly edit and see the result of your changes without having to refresh the page manually. Every time it detects you saved and modified any of the files in your project folder it automatically refreshes your browser to show the changes immediately.

Once installed, in order to use it all you have to do is open the folder with an index.html inside it and click on the icon that says “Go Live” on the left bottom of your VS Code.

2. VSCode Great Icons

VSCode Great Icons by Emmanuel Béziat is my favorite icon extension. Similar to the official VSCode-icons, VSCode Great Icons add a big package of icons that will be shown for each respective file extension in your VSCode Explorer.

3. VSCode-pdf

As its name suggests, VSCode-Pdf by tomoki1207 allows you to read pdf files directly on VS Code without needing any other external program at all. Very useful for reading the documentation while coding. Gone are the days of having to ALT + Tab between documentation and your code! Once installed, you can see the entire document in a split view alongside your code. Now you can actually work on the code while viewing the documentation at the same time!

4. IntelliCode

IntelliCode by Microsoft is a machine-learning-based plugin that tries to predict what you will be writing next based on what you typed. It tries to improve and optimize itself based on the language, context, and patterns it recognized while you were coding. IntelliCode currently supports Java, JavaScript, Typescript, Python, and SQL.

5. C# for Visual Studio Code (powered by OmniSharp)

C# for Visual Studio Code (powered by OmniSharp) by Microsoft is a must if you are a .NET C# developer! This extension provides the basics that you will need to develop in .NET using VS Code. Its features include C# editing support, Syntax Highlighting, IntelliSense support, and so on. There is also some limited support for debugging C#/.NET programs.

6. Language Support for Java(TM) by RedHat

Language Support for Java(TM) by RedHat is a must for any Java developer that loves using VS Code to do their craft. Its features include Java linting, formatting, code completion, highlights, IntelliSense support, detection of Maven/Gradle build files, refactoring, and so on. All of this is done via Eclipse the use of the Eclipse JDT Language server.

7. PHP Intelephense

PHP Intelephense by Ben Mewburn gives your VS Code is a must-have for any PHP developer! Intelephense comes with features like Intellisense for PHP, code completion, reference search,  detection of combined HTML,PHP,JS,CSS files and so on. There is also a paid version with some additional features, but the free version will do a good enough job of improving the productivity of any PHP developer.

8. Markdownlint

Markdownlint by David Anson is an excellent VS Code extension for editing ‘.md’ files( also known as the Markdown syntax or language). This extension is nothing more than a markdown linting and style checking for correctly formatting ‘.md’ files. It’s very basic but very useful at the same time.

9. Markdown Preview Enhanced

Markdown Preview Enhanced by Yiji Wang is one of the best extensions out there for previewing the final look of your Markdown documents. With it, you can simultaneously check out what the markdown file that you are editing is looking like while coding it at the same time!

10. Markdown All in One

Markdownlint All in One by Yu Zhang is a Jack of all trades when talking about the Markdown language. It comes with everything that you need to edit and test markdown files. Its features for the Markdown Language include keyboard shortcuts, list editing, support for math formulas in markdown, autocompletion, a preview of the file, and much more.

11. Python support extension by Microsoft

Python support extension by Microsoft is a very useful extension for coders of Python 3.7 and forward. Like other programming language extensions for VS Code, this one comes with IntelliSense support for python, linting, the ability to debug runtime code, syntax formatting, code refactoring, and so on.

12. Jupyter

Jupyter by Microsoft is the best extension to bring total Jupyter Notebook support for you VS Code! It is an extension pack that includes inside it two other extensions: Jupyter Keymaps, which provides keymaps when dealing with Jupyter notebook files, and Jupyter Notebook Renders, which allow you to preview Juypter files inside VS Code. A must-have for any data scientist, data enthusiast, and people coding machine-learning-related things.

13. Indent-Rainbow

Indent-Rainbow by oderwat will make it way easier to properly indent your code files. It colorizes each layer of indentation on the left side of your text, therefore making it more readable and understandable.

14. CSS Peek

CSS Peek by Pranay Prakash is a very useful extension, that allows you to see on your open HTML file the CSS file and its respective classes, IDs, and other modifiers that are affecting your HTML Tags and page as a whole. You can even edit the CSS file referenced in your HTML without having to switch tabs. A very useful tool for any front-end or full-stack developer that uses HTML and CSS files on a daily basis. I use this extension often as I use several CSS and HTML files and I need to quickly get a list of the CSS classes, IDs, and tags that are defined in a CSS file.

15. Better Comments

As shown in the image above Better Comments by Aaron Bond will not only make it more intuitive to read comments in code files but it will also help you become a better comment writer whenever you code by categorizing your comments in different colors. Comments starting with an exclamation mark will be red, the ones starting with a question mark will be blue, comments starting with the word Todo will be orange, and lastly comments starting with an asterisk will be light green.

16. Auto Close Tag

A must-have for any web developer, when editing HTML and XML files! Auto Close Tag by Jun Han does exactly what its name says, it automatically adds the close tag of the HTML tag that you are currently typing. Editing HTML and XML files can become a tedious, error-prone, and monotonous task when having to manually type the closing tag every time.  This is why this extension come so much in handy.

17. Prettier – Code formatter

Prettier – Code formatter is one of the best if not the best code formatter out there with support for multiple web programming languages. A must-have tool for any web developer out there. As of right now, it currently supports formatting the following programming languages and frameworks: Javascript, React, Typescript, JSON, GraphQL, and Handlebars.

18. REST Client by Huachao Mao

Tired of having to run Postman alongside VS Code in order to test RESTFUL requests? Then, your problems will be over with this simple extension by Huachao Mao. REST Client does everything that Postman does. You can now send RESTful HTTP requests, such as POST, GET PUT, DELETE, and so on directly from VS Code!

19. Settings Sync

Tired of having to remember which extensions you were using before you needed to do a fresh install of Visual Studio Code? Did you wish you could instantly download all the extensions and configurations you use for your Visual Studio Code every time you need to install it again? Well, if yes, then, this plugin is for you! Settings Sync by Shan Khan will allow automatically save all the extensions and configurations you are currently using in your VSCode and will automatically download once you install it on your fresh new VSCode installation. The days of having to remember each one of the extensions you were using before formatting or switching computers will be over!

20. Render Line Endings

Very useful when coding in Python or any other language that doesn’t use brackets very often. Render Line Endings by Josip Medved will detect line endings of the types(CR, LF, or CRLF) visible whenever whitespace is turned on in your VSCode and it will also show which type of line ending the file is currently using.

21. gitignore

A simple but powerful extension that will help aid you in creating gitignore files for your project. After installing gitignore extension you can begin using it by starting vs code’s command palette and pressing F1 or CTRL+SHIFT+1, then typing “Add gitignore” you will be prompted to select one of the premade gitignore files avaliable for several programming languages.

22. Git History

GitHistory by Don Jayamanne is a very useful extension that gives you a UI, keyboard shortcuts and much more to compare branches, view the repository story compare commits, and much more.

23. GitLens

GitLens by GitKraken is another very useful extension for code revision and managing git repositories. While reviewing code with Gitlens you can check the whole code history of a file in the coding window. It also comes with other handy features such as sidebar views for commits, repositories, file history, line history, and much more!

24. Docker

Docker by Microsoft is a powerful and useful extension, that allows you to start containers, manage, build and deploy them! All of this without having to switch from VS Code to another program! It also enables debugging .NET, Python, and NodeJS code running inside a Docker container.

25. Remote – Containers

Another useful extension when working and editing Docker containers. Remote – Containers by Microsoft allows you to easily develop programs inside a docker container, making it very easy to switch between different development environments that rely on different containers! Some of its features include letting you through VS Code explorer browse and mount folders that are inside a container and much more.

Conclusion

To sum it up these are the extensions that I use daily to increase my productivity when using VS Code and many other coders do as well. If you have any suggestions about other useful extensions for VS Code that you use and think it should’ve been mentioned in this list please, feel free to comment below. Also, be sure to contact us on the contact page if you have any feedback or ideas you want us to investigate further.