Skip to content
| Marketplace
Sign in
Visual Studio Code>Extension Packs>Web Dev Essentials + Awesome ThemesNew to Visual Studio Code? Get it now.
Web Dev Essentials + Awesome Themes

Web Dev Essentials + Awesome Themes

willywdev

|
216 installs
| (0) | Free
This is my VS Code Extension Pack. It includes a collection of extensions that are useful for web development workflow.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

📦 Web Dev Essentials + 🎨 Awesome Themes


Introducing my VS Code Extension Pack, the ultimate toolkit for web development. This all-in-one pack includes essential extensions for a seamless coding experience. From linting and autocompletion to JavaScript support, it has everything you need to write clean and efficient code. Plus, enjoy a wide range of themes to personalize your coding environment. Enhance your productivity and unleash your creativity with my VS Code Extension Pack for web development.

Extensions included

📦 Auto Rename Tag

Icon Description
Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.
Author: Jun Han

📦 Better Comments

Icon Description
Improve your code commenting by annotating with alert, informational, TODOs, and more!
Author: Aaron Bond

📦 Codesnap

Icon Description
📷 Take beautiful screenshots of your code
Author: adpyke

📦 colorize

Icon Description
A vscode extension to help visualize css colors in files.
Author: kamikillerto

📦 ES7+ React/Redux/React-Native snippets

Icon Description
Extensions for React, React-Native and Redux in JS/TS with ES7+ syntax. Customizable. Built-in integration with prettier.
Author: dsznajder

📦 ESLint

Icon Description
Integrates ESLint JavaScript into VS Code
Author: Microsoft

📦 Font Preview

Icon Description
Preview fonts in VS Code
Author: ctcuff

📦 Git Branch Warnings

Icon Description
Warn when you're on the wrong Git branch, like MAIN
Author: Teledemic

📦 Github Markdown Preview

Icon Description
Changes VS Code's built-in markdown preview to match GitHub
Author: Matt Bierner

📦 HTML CSS Support

Icon Description
CSS Intellisense for HTML
Author: ecmel

📦 Live Preview

Icon Description
Hosts a local server in your workspace for you to preview your webpages on.
Author: Microsoft

📦 markdownlint

Icon Description
Markdown linting and style checking for Visual Studio Code
Author: David Anson

📦 npm Intellisense

Icon Description
Visual Studio Code plugin that autocompletes npm modules in import statements
Author: Christian Kohler

📦 Path Intellisense

Icon Description
Visual Studio Code plugin that autocompletes filenames
Author: Christian Kohler

📦 Prettier

Icon Description
Code formatter using prettier
Author: Prettier

📦 Simple Readme

Icon Description
Generate readme fastly and simply with Simple Readme
Author: Mauro de Souza

📦 Svg Preview

Icon Description
Preview for Svg files
Author: Simon Siefke

📦 Tailwind CSS IntelliSense

Icon Description
Intelligent Tailwind CSS tooling for VS Code
Author: Tailwind Labs

📦 Template String Converter

Icon Description
Converts a string to a template string when ${ is typed
Author: meganrogge

📦 vscode-styled-components

Icon Description
Syntax highlighting for styled-components
Author: Styled Components

🎨 Themes included

Shades of Purple
Nord
Dracula Official
Andromeda
Hipster Theme
Material Icon Theme
SynthWave '84
Night Owl
Cobalt2 Theme Official
One Dark Pro
Ayu
GitHub Theme
Noctis
Monokai Pro

Installation #1

To install this extension pack, follow these steps:

  1. Open Visual Studio Code

  2. Press Ctrl+P to open the Quick Open dialog

  3. Type

    ext install willywdev.willys-webdev-extensions
    

Installation #2

  1. Open Visual Studio Code
  2. Click on Extensions
  3. Search for "willywdev.willys-webdev-extensions"

Contributing

If you want to suggest an extension to this pack, please open an issue in the GitHub repository, don't pull request.

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft