Without a doubt, Microsoft Visual Studio Code has become a prominent choice for web developers in the past years. Stackoverflow Insight confirms Visual Studio Code to be a dominant player among other development environments. There are differences in tool choices by developer type and role, but Visual Studio Code is a top choice across the board.
VS Code already has inbuilt support for Debugging, has Built-in Git, IntelliSense (intelligent code completion), and code refactoring.
The features that Visual Studio Code includes out-of-the-box are just the start. VS Code extensions let you add languages, debuggers, and tools to your installation to support your development workflow. Below are 15 must-have extensions for web developers that will undoubtedly enhance your coding environment for good!
#1. One Dark Pro
I was a big fan of the Atom editor, and I know deep down you also preferred Atom! One Dark Pro is Atom’s iconic theme that enhances VS Code editor’s look-and-feel by adding Atom touch to Visual Studio Code. No doubt the default Dark+ theme of Visual Studio Code is also a charm, but this is one of it’s kind. Moreover, it’s one of the most installed themes for the VS Code!
Also, I switch a lot between One Dark Pro & Material Theme (Palenight High Contrast) – which is also worth trying! Now the theme is set, so let’s check other great extensions in this list. It will be fun, I promise!
#2. ESLint
ESLint statically analyzes your code to quickly find problems like syntax errors, and unused variables in your JavaScript file. This extension identifies and reports on patterns found in ECMAScript/JavaScript, which helps in producing more consistent and bug-free code.
#3. Prettier – Code formatter
Prettier is one of the most reliable code formatter in the Visual Studio marketplace. Do you have a messy written code in front of you? If yes, then this extension is all you need. Install this extension, select the ugly piece of code, use the magic keys (opt+shift+F or alt+shift+F) and I bet you will be in love with this extension. Not only this, but you can also configure it to format your code automatically on file save.
#4. Path Intellisense
Found yourself stuck with relative paths? Undoubtedly relative paths can be complicated at times and can get you into tricky situations or could mess around the code easily. Path Intellisense assists in autocomplete filenames and solves this confusion for all. If required, you can also configure this extension to generate absolute paths within the Settings.
#5. Bracket Pair Colorizer 2
Bracket Pair Colorizer 2 highlights a bracket-group with a single color, using three colors sequentially (Gold, Orchid, and LightSkyBlue). It also highlights active scopes using vertical and horizontal scope lines. Bracket Pair Colorizer makes code fun and readable at the same time. I would advise you to install this and notice the difference for yourself!
#6. Sass
I’m a proud fan of SASS (Syntactically Awesome Style Sheets). But God knows why, it supports two different syntaxes, one Indented Syntax which follows strict indentation and second SCSS which makes use of semicolons and brackets like CSS. Unfortunately, Visual Studio Code supports .scss out of the box but not the .sass files for which you can use Sass by Syler Visual Studio Code extension and get SASS syntax highlighting, autocomplete & SASS formatter.
#7. Vetur
Vue.js is currently the trendiest JavaScript frontend framework of 2020. If you are learning the Vue.js framework, install Vetur on your VS Code environment. This extension is packed with all the essential features for Vue.js coding environment like syntax highlighting, snippets, emmet, linting, formatting, debugging, and CLI.
#8. PHP Intelephense
PHP Intelephense is a high-performance PHP language server packed full of essential features for productive PHP development. It not only supports IntelliSense, but also provides built-in constructors, methods, and functions, multiple diagnostics for open files, detailed hover with links to official PHP documentation and much more.
#9. Better Comments
The Better Comments extension will help you create more human-friendly comments in your code. With this extension, you will be able to categorize your annotations into alerts, queries, todos, and highlights. This extension is highly customizable, and you can specify more comment styles as per need in the settings.
#10. CodeSnap
I enjoy this extension very much. It’s one of my best and uses it quite frequently. CodeSnap takes stunning screenshots of your code in the Visual Studio Code and saves them in high-quality PNG format.
#11. Markdown All in One
Markdown is a lightweight markup language that you can use to add formatting elements to plaintext text documents. Markdown All in One is all you need to write Markdown. This extension features, print Markdown to HTML, GitHub flavored Markdown, auto-completion, Math functions, and lot more.
#12. Filesize
Do you need to know the size of your file? If you do, you have to switch to file explorer and check it in file properties. Sometimes you have to search for information online like mime type and more. Filesize will make it super easy for you, it shows the current file size in the status bar, and if you click on the status bar component, it will display more information about the file!
#13. Apache Conf
You may have noticed, syntax highlight support for configuration files is not inbuilt in the Visual Studio Code. With lacking functionality, it’s hard to edit config files like .htaccess and others. I recommend installing Apache Config extension to the Visual Studio Code environment and get the missing feature.
#14. Color Highlight
Color Highlight style colors found in your document, whatever the syntax is in CSS, Java, HTML, or Python. It supports a color code with HEX, RGB, and RGBA (but not HSL) syntax forms.
#15. Settings Sync
You have installed your favorite extensions, altered few settings in the Visual Studio Code to match your coding needs. Great! Now it’s time to back up your settings and push the same configuration on multiple devices. Settings Sync makes it possible to synchronize our settings, snippets, themes, file icons, keybindings, workspaces, and extensions across multiple machines using GitHub Gist. It’s a must-have extension for everyone using the VS Code!
These are the 15 extensions that I always have in my text editor (Visual Studio Code). Highly recommend you try these, I bet these extensions will make your coding adventure more fun!
I hope you loved the article, especially the extensions. If you have any questions about configuring any of these, I will be more than happy to assist you. Just drop a comment below or get in touch.
If you have a list of your personalized extensions, I would love to check those too, drop your article link or extension names in the comment box, and I will go through the same.