Best VSCode Extensions for Web Development

In this list, I will try to pinpoint the best extensions for VS Code for Web development. So a little context: JetBrains software is widely appreciated for its development and productivity capabilities, but there are also excellent free alternatives available. Microsoft VS Code is among these alternatives, and I’m currently exploring its adoption, experiencing outstanding results and enhanced productivity levels.

If you’re interested in Themes/Icons for VS Code, I wrote a short article about it that you can read here.

PERSONAL TIP

One of the first things I always change, and this is my personal preference, is to move the SideBar to the right (View > Appearance > Move Primary Sidebar to the Right) because I want my code to always be aligned to the left of the monitor edge without jumping around, so when I need to show the sidebar, I use the CTRL|CMD + B (show/hide sidebar) shortcut to toggle the visibility.

Minor improvement but for me is extremely important

I work with multiple environments, Linux, MacOS, Windows and Cloud -Based are all covered by this tool and synced to my preferences, which is a huge time saver feature.

Install Instructions: I didn’t include the marketplace URL in the list, if you want to install anything on this list, simply type the extension name and check the author’s name in the Extensions Tab in VSCode (Ctrl — Shift — X)

So without further ado, this is my list of extensions :

• Add to GIT ignore — by Maciej Dems
  Okay, I admit… I’m lazy: right-click on the file to add into .gitignore (you can curse me or say bad things…)

• Advanced New File — by Dominik Kundel
  With this, creating new files is easy than ever.

• Alpine.js IntelliSense — by Adrian Wilczński
  As a Laravel User, AlpineJS is the Javascript Library to go for replacing the old and heavy JQuery.
• Auto Close Tag — by Jun Han
  For auto-add HTML/XML close tags.
• Auto Import — by steoates
  Automatically finds, parses and provides code actions and code completion for all available imports. Works with Typescript and TSX.
• Auto Rename Tag — by Jun Han
  Automatically rename paired HTML/XML tag
• Auto-Open Markdown Preview — by hnw
  Open Markdown preview automatically when opening a Markdown file
• Better Comments — by Aaron Bond
  The Better Comments extension will help you create more human-friendly comments in your code.

• Bookmarks — by Alessandro Fragnani
  It helps you to navigate in your code, moving between important positions easily and quickly. No more need to search for code. It also supports a set of selection commands, which allows you to select bookmarked lines and regions between bookmarked lines. It’s really useful for log file analysis.

• change-case — by wmaurer
  A wrapper around node-change-case for Visual Studio Code. Quickly change the case of the current selection or current word.

• Code Runner — by Jun Han
  This extension run code snippet or code file for multiple languages.
• Code Time — by Software.com
  Code Time is an open source plugin that provides programming metrics right in Visual Studio Code.

• Color Highlight— by Sergii N
  This extension styles css/web colors found in your document.
• Color Info— by Matt Bierner
  It provides quick information css colours, in css files.

• Console Ninja — by Wallaby.js
  Console Ninja is a VS Code extension that displays console.log output and runtime errors directly in your editor from your running browser or node application. It’s like your browser dev tools console tab or terminal output from your node app, but instead of having to context switch, values are connected to your code and displayed ergonomically in your editor.

• Docker — by Microsoft
  The Docker extension makes it easy to build, manage, and deploy containerized applications from Visual Studio Code. It also provides one-click debugging of Node.js, Python, and .NET inside a container.

• DotENV — by mikestead
  Support for dotenv file syntax

• Duplicate Action— by mrmlnc
  Brings the Ability to duplicate files and directories in VS Code.
• ESLint— by Microsoft
  Integrates ESLint JavaScript into VS Code.
• Error Lens — by Alexander
  ErrorLens turbo-charges language diagnostic features by making diagnostics stand out more prominently, highlighting the entire line wherever a diagnostic is generated by the language and also printing the message inline.

• Explorer Exclude — by Peter Schmalfeldt
  Context Menu and Explorer Panel to Manage Showing & Hiding Excluded Files & Folders

• Excel Viewer — by GrapeCity
  As a developer, you have a high likelihood of interacting with data in every project you work on. To help with this, the Excel Viewer extension for Visual Studio Code provides features that make it easy to edit and preview multiple files of types such as xlsx, xlsm, CSV, and tab. The latest version of the extension adds additional features such as save, redo, undo, and hot exit, as well as theme support to automatically adapt to your current Visual Studio Code theme.

• Fix VSCODE Checksums— by Jurg Lehni
  Some extensions need a higher level and change the binary files of the IDE, this stops the initial check on loading IDE and his warnings

• Geo Data Viewer — by Random Fractals Inc
  If you are working on a GPS project or have the need to view maps, gpx or kml files, or more data files, this extension is for you.

• Git Graph — by mhutchie
  View a Git Graph of your repository, and perform Git actions from the graph.

• Git History— by Don Jayamanne
  Git History, Search and More (including git log)

• gitignore generator— by sleepingsaint
  Generates .gitignore files using toptal gitignore API, useful to bring all standard .gitignore per type of project/technology

• GitLens Git supercharged — by GitKraken
  GitLens supercharges Git inside VS Code and unlocks untapped knowledge within each repository. It helps you to visualize code authorship at a glance via Git blame annotations and CodeLens, seamlessly navigate and explore Git repositories, gain valuable insights via rich visualizations and powerful comparison commands, and so much more.
• Highlight Matching Tag — by vincaslt
  This extension highlights matching opening and/or closing tags. Optionally it also shows the path to tag in the status bar. Even though VSCode has some basic tag matching, it’s just that — basic. This extension will try to match tags anywhere: from tag attributes, inside of strings, and any files, while also providing extensive styling options to customize how tags are highlighted.

• html-entities — by christophjerstyles
  A simple vscode extension for converting selected text to named html entities.

• Icon Fonts — by idleberg
  Snippets for popular icon fonts such as Font Awesome, Ionicons, Glyphicons, Octicons, Material Design Icons and many more!
• Ionic — by Ionic
  The official extension for Ionic and Capacitor development

Inline Parameters Extended for VSCode — by Robert Ostermann
Popularized by JetBrain Products, keep those parameters inline. This extension implements the new Inlay Hints API to add Inline Parameters for Golang, Java, Lua, PHP, and Python.

I can share my settings.json to make this more like with JetBrains, add this to your settings.json and tweak it:

… “editor.inlayHints.fontFamily”: “monospace”,
“editor.inlayHints.fontSize”: 12 ,
“workbench.colorCustomizations”: {
“editorInlayHint.background”: “#00000000”,
“editorInlayHint.foreground”: “#FFFFFF” …

• Import Costs — by Wix
  This extension will display inline in the editor the size of the imported package. The extension utilizes webpack in order to detect the imported size.

• Intellicode / Intellicode Api Usage Examples / Intellicode Completions — by Microsoft
  These are a set of plugins that provides AI-assisted development features for Python, TypeScript/JavaScript and Java developers in Visual Studio Code, with insights based on understanding your code context combined with machine learning.
• IntelliSense for CSS class names in HTML — by Zignd
  A Visual Studio Code extension that provides CSS class name completion for the HTML class attribute based on the definitions found in your workspace or external files referenced through the link element.

• Image Preview — by Kiss Tamás
  Shows image preview in the gutter and on hover

• JavaScript (ES6) code snippets — by charalampos karypidis
  Code snippets for JavaScript in ES6 syntax
• JSON Crack — by Aykut Saraç
  Helps you quickly and easily visualize your JSON data into beautiful, interactive graphs. It identifies and fixes issues with your JSON files quickly, allowing you to create stunning visualizations in a matter of minutes. With JSON Crack, you can easily and quickly identify and fix issues with your JSON files, ensuring your data is valid and up-to-date.

• Laravel Extensions List :
  — Laravel Artisan — by Ryan Naddy
  — Laravel Blade formatted — by Shuhei Hayashibara
  — Laravel Blade Snippets — by Winnie Lin
  — Laravel Blade Spacer — by Austen Cameron
  — Laravel Docs — by Austen Cameron
  — Laravel Extra Intellisense — by amir
  — Laravel GoTo — by Adrian
  — Laravel Snippets — by Winnie Lin
  — Laravel Blade — by Christian Howe
  — laravel-goto-components — by naoray
  — Laravel goto view — by codingyu
  — Laravel Blade + Laravel Livewire language server — by Harins Rob
• LintHTML — by kamikillerto
  A Visual Studio Code extension to lint HTML with LintHTML.
• Live Server — by Ritwick Dey
  Launch a local development server with live reload feature for static & dynamic pages.

• Lorem ipsum — by Daniel Imms
  A tiny VS Code extension made up of a few commands that generate and insert lorem ipsum text into a text file.

• Markdown Lint — by David Anson
  Make writing for the internet a breeze with the Markdown Linting tool for VSCode! With it, you can open and edit large markdown files within the editor and rest assured that you’re following the correct formatting rules and conventions. It’s compatible with all popular markdown formats including Github-Flavored, Bitbucket, and more.
• Markdown PDF — by yzana
  This extension converts Markdown files to pdf, html, png or jpeg files.
• Markdown Preview Enhanced — by Yiyi Wang
  Markdown Preview Enhanced is an extension that provides you with many useful functionalities such as automatic scroll sync, math typesetting, mermaid, PlantUML, pandoc, PDF export, code chunk, presentation writer, etc. A lot of its ideas are inspired by Markdown Preview Plus and RStudio Markdown.

• MySql — by Weijan Chen
  The Better Comments extension will help you create more human-friendly comments in your code.
• MySQL Sintax— by Jake Bathman
  A helper that is a port of the Sublime plugin
• npm Intellisense — by Christian Kohler
  Visual Studio Code plugin that autocompletes npm modules in import statements

• Output Colorizer— by IBM
  Let’s bring colour to the integrated terminal, Language extension for VSCode/Bluemix Code that adds syntax colourization for both the output/debug/extensions panel and *.log files.

• Path Intellisense— by Christian Kohler
  Visual Studio Code plugin that autocompletes filenames.
• Paste JSON as Code— by quicktype
  JSON Copy enables you to quickly and easily convert JSON data into code in several popular languages, such as Go, TypeScript, C#, C++ and more. The tool offers an effortless and efficient way of converting JSON data into code, allowing you to create powerful applications in a matter of minutes. With JSON Copy, you can quickly and easily convert JSON data into code, enabling you to create robust applications in virtually no time.

• Peacock — by John Papa
  Useful when you work with multi-workspaces or projects at the same time, subtly change the colour of your Visual Studio Code workspace. Ideal when you have multiple VS Code instances, use VS Live Share, or use VS Code’s Remote features, and you want to quickly identify your editor.

• PHP Extensions List:
  — php cs fixer — by junstyle
  — PHP — by DEVSENSE
  — PHP DocBlocker — by Neil Brayfield
  — PHP Intelephense — by Ben Mewburn
  — PHP IntelliSense — by Damjan Cvetko
  — PHP Namespace Resolver — by Mehedi Hassan
  — PHP Debug — by Xdebug
  — PHP Awesome Snippets — by HakCorp
• Polacode-2022— by Jeff Hykin
  The Original Polacode extension was abandoned, so this is the work of Jeff since 2019.

• PowerShell — by Microsoft
  This extension provides rich PowerShell language support for Visual Studio Code (VS Code). Now you can write and debug PowerShell scripts using the excellent IDE-like interface that VS Code provides.
• Prettier — Code Formatter— by Prettier
  Prettier is an opinionated code formatter. 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.
• Rainbow CSV — by mechatroner
  Highlight CSV and TSV files, Run SQL-like queries

• Remote Development — by Microsoft
  A pack of tools for aiding in remote work, this 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. Since this lets you set up a full-time development environment anywhere.
  Also in this category, when there is the need for pair programming or sharing code with other developers or just adding some collaboration into the projects, check this Visual Studio Live Share — by Microsoft
• Sass (.sass only) — by Styler
  Indented Sass syntax Highlighting, Autocomplete & Formatter
• Save as Root in Remote- by yy0931
  Edit configuration files with root privileges while using the Remote — SSH extension
• SCSS Formatter— by Sibiraj
  A Visual Studio Code Extension to format SCSS
• SCSS IntelliSense — by mrmInc
  Advanced autocompletion and refactoring support for SCSS
• shell-format — by foxundermoon
  A formatter for shell scripts, Dockerfile, gitignore, dotenv, /etc/hosts, jvmoptions, and other file types

• SQLTools— by Matheus Teixeira
  Connecting users to many of the most commonly used databases. Welcome to database management done right.
• Subtle Match Brackets — by Rafa Mel
  Underlined matching brackets and more
• Tailwind CSS IntelliSense — by Tailwind Labs
  Intelligent Tailwind CSS tooling for VS Code
• Toggle Quotes — by BriteSnow
  Simple and yet so useful, you can toggle between Quotes like the Flash.
• Turbo Console Log — by ChakrounAnas
  Automating the process of writing meaningful log messages.
• Trailing Spaces — by Shardul Mahadik
  Highlight trailing spaces and delete them in a flash! So useful…

• Vibrancy Continued — by illixion
  Note: before installing this one, please change to the default theme Dark+. Install and then enable the extension, this will give VS Code error, ignore it because is only to warn that the internal CSS is changed, you can press on the cog and choose do not see this warning again, and violá… a beautiful glass background.
• vscode-faker — by Budi Irawan
  Generate fake data for name, address, lorem ipsum, commerce and much more
• vscode-pets — by Anthony Shaw
  They are cute… they make us smile for a bit :)

• Vue Extensions List :
  — Vue Docs — by maksim titiaiev
  — Vue Language Features (Volar) — by Vue
  — vue-helper — by shenjialong
• WordPress Hooks IntelliSense — by johnbillion
  Generate fake data for name, address, lorem ipsum, commerce and much more
• Wordpress Snippets— by wpprools.io
  The ultimate WordPress snippet collection.
• YAML— by Red Hat
  YAML Language Support by Red Hat, with built-in Kubernetes syntax support

Disclaimer, I have all the extensions installed but not all are enabled by default, I use VS Code profile feature to enable extensions per workspace/project according to the current requirements

I will try to update this list over time😏.
Hope this was useful for someone, if so please push the 👏 clap.

You can also read my article on Themes and Icons in VS Code here.