README

A collection of extensions for web development in VS Code.

These are some of my favorite extensions for web development to make development easier and fun.

Extensions included

• Auto Rename Tag - Automatically rename paired HTML/XML tag.
• Live Server - Launch a local development server with live reload feature for static & dynamic pages.
• Path Intellisense - Visual Studio Code plugin that autocompletes filenames.
• EditorConfig for VS Code - This plugin attempts to override user/workspace settings with settings found in .editorconfig files.
• Color Highlight - This extension styles css/web colors found in your document.
• DotENV - VSCode .env syntax highlighting.
• Prettier - Code formatter - Prettier is an opinionated code formatter.
• Readme Pattern - Generates README.md files.
• gitignore - Assists you in working with .gitignore files.
• GitLens — Git supercharged-Supercharges the Git capabilities built into Visual Studio Code.
• W3C Web Validator - W3C Web Validator.
• Code Spell Checker - A basic spell checker that works well with camelCase code.
• npm Intellisense - Autocomplete npm modules in import statements.
• JavaScript (ES6) code snippets - Code snippets for JavaScript in ES6 syntax.
• stylelint - A Visual Studio Code extension to lint CSS/SCSS/Less with stylelint.
• ESLint - Integrates ESLint JavaScript into VS Code.
• Better Comments - Improve your code commenting by annotating with alert, informational, TODOs, and more!.
• Material Theme Icons - Material Theme Icons, the most epic icons theme for Visual Studio Code and Material Theme.
• Material Theme - The most epic theme now for Visual Studio Code.

For more information

• Github
• Visual Studio Code Marketplace

Contributing

Want to add your favorite extension to this pack or improve something? Follow these steps:

Clone the Project

git clone https://github.com/jorgecortesdev/web-development-essentials-extension-pack.git
cd web-development-essentials-extension-pack

Add Your Extension

Open the package.json file and add your extension's identifier (e.g. publisher.extension-id) to the extensionPack array.

Example:

"extensionPack": [
  "formulahendry.auto-rename-tag",
  "yourpublisher.your-extension-id"
]

Generate a New .vsix File

Install the VSCE tool:

npm install -g vsce

Then run:

vsce package

This will generate a .vsix file like web-development-essentials-extension-pack-1.0.1.vsix.

Test the Extension Locally

Option 1: Using VS Code UI

1. Open VS Code.
2. Press Ctrl+Shift+P (or Cmd+Shift+P on macOS).
3. Run: Extensions: Install from VSIX...
4. Choose the .vsix file you just created.

Option 2: Using the Command Line

From the project directory, run:

code --install-extension web-development-essentials-extension-pack-1.0.1.vsix

To uninstall the extension pack:

code --uninstall-extension web-development-essentials-extension-pack-1.0.1.vsix

Submit a Pull Request

If you want to share your work with the rest of us and make this extension pack even greater, please submit a pull request.

Here’s how:

1. Fork and Clone the Repository

   • Click the Fork button at the top right of the GitHub repo.

   • Then clone your forked copy:

     git clone https://github.com/your-username/web-development-essentials-extension-pack.git
     cd web-development-essentials-extension-pack

2. Create a New Branch

   git checkout -b add-my-extension

3. Make Your Changes
   Edit package.json to add your extension to the extensionPack array.

4. Commit Your Changes

   git commit -m "Add [extension-name] to the pack"

5. Push to Your Fork

   git push origin add-my-extension

6. Open a Pull Request
   Go to your fork on GitHub and click "Compare & pull request". Submit it against the main branch of this repository. Please provide a brief summary explaining why you're suggesting the extension and how it benefits the pack.

All contributions are welcome!

Learn More

Check out my site for tutorials, and other open-source projects: https://jorgecortes.dev ✨

Happy coding 😎