Wrapper HTML

Developed By

Demo Video

https://github.com/user-attachments/assets/8dc17ec9-7bf7-4803-b850-2b9e524fbc60

Features

The Wrapper HTML extension allows you to quickly and easily wrap selected HTML code with common HTML tags like <div>, <section>, <article>, etc. No more worrying about manually closing the tags—this extension handles that for you!

Usage:

Select the HTML code you wish to wrap.
Use the keyboard shortcut Ctrl+1 (or Cmd+1 on macOS), or open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P) and type Wrap HTML Element.
Pick your desired tag from the options in the quick pick menu.

Extension Settings:

If the default keybinding conflicts with another extension or setting, you can customize it by updating your keybindings.json file as follows:

Open the Command Palette: Press Ctrl+Shift+P (or Cmd+Shift+P on macOS).
Type "Preferences: Open Keyboard Shortcuts (JSON)" and select it.
Add your custom keybinding to the JSON file:

[
    {
        "key": "ctrl+1", // Replace with your desired key combination
        "command": "html-wrapper-.wrapper",
        "when": "editorTextFocus"
    }
]

Known Issues

Currently, the extension fully supports wrapping elements with a range of block-level tags. Future updates will include enhanced support for additional tags.

recommendations

We recommend using a code formatter like prettier

Release Notes

v2.0.2

Added smart indentation support for better code formatting
Improved tag matching for nested HTML structures
Improved tag matching for JSX structures
Added support for HTML attributes (like href for anchor tags)
Enhanced error handling and user feedback
Better handling of long documents and complex HTML structures
Improved formatting preservation for both single-line and multi-line content

Installation

Open Visual Studio Code. In the Extension Store search wrapper html. or download it from here https://marketplace.visualstudio.com/items?itemName=Spikey.wrapper-html

if the keys are conflicting then change them as given below: Go to the "View" menu and select "Command Palette" (or use the shortcut Ctrl+Shift+P or Cmd+Shift+P on macOS). Type "Preferences: Open Keyboard Shortcuts (JSON)" and select it from the dropdown. In the keybindings.json file, add your custom key binding as shown above. Enjoy your streamlined HTML wrapping experience!