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

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

Open VS Code.
Press Ctrl+Shift+P (or Cmd+Shift+P on macOS).
Run: Extensions: Install from VSIX...
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:

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

Create a New Branch
```
git checkout -b add-my-extension
```
Make Your Changes
Edit package.json to add your extension to the extensionPack array.

Commit Your Changes

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

Push to Your Fork
```
git push origin add-my-extension
```
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 😎

Web Development Essentials Extension Pack

jorgecortesdev