microsoft / vscode-htmltagwrap

Wraps a chunk of HTML code in tags

vscode-htmltagwrap

What is it

Wraps your selection in HTML tags. Can wrap an inline selection or a selection of multiple lines.

To use, select a chunk of code and press "Alt + W" ("Option + W" for Mac).

Download it on the Visual Studio Marketplace

How to Use It

Select a block of text or a string of text. Press Alt + W or Option + W for Mac. Type the tag name you want, and it will populate the beginning and end tag automatically.

This extension works best in files that either use tabs or spaces for indentation. It may not work as well with mixed tabs/spaces.

Report Issues

I welcome pull requests. Please report an issue on GitHub if you have trouble.

Updates

0.0.3

• Spaces and tabs for indentation are now both supported.
  • Special thanks to @gdziadkiewicz for his PR #4, which also introduced tests for development!

Future features being explored

• #5 Once a user hits spacebar, then the second multi-cursor is lost so the user can write attributes like classes or styles. (Idea courtesy of Ruben Rios)
• Should we support getSelections() allowing multiple selections to be wrapped?

vscode-htmltagwrap's Issues

Wrap current line if no selection is present

This could speed up development by allowing users to skip the highlighting portion if they know they want to wrap all text in the line where the cursor is located

HTML Wrap selection with tags and adding class adds it to both tags

From @mizujin on April 21, 2016 13:35

• VSCode Version: 0.10.11
• OS Version: Windows 8

Steps to Reproduce:

1. In an HTML document, make a text selection to wrap and using Alt + W to wrap them with tags
2. Define the tags and immediately continue with a class statement.
3. class="" is added to both starting/ending tags.

Copied from original issue: microsoft/vscode#5607

Wrapping with Multiple pointers

Hey there, not sure if this is a bug or a small feature request.

At the moment the plugin doesn't appear to support multiple pointers in the document.

The behaviour I would hope for would be each selection gets wrapped in the tag.

Tags reverse when no selection is made

If the user actives the htmltagwrap without making a selection the tags reverse to </p><p>. It would seem more appropriate that if no selection is made the tags should still output as <p></p> with the second tag stop being between the tags once the tag as been modified.

suggestion: add 'unwrap' feature :)

Don't know if this is the right place for a suggestion but maybe add an unwrap feature regardless of source of tags to unwrap (i.e. manual or w/ extension). Great extension though!!

Configurable key combination?

I wonder if there's a way to replace the ALT + W key combination in order to trigger it.

I can see the other extension, HTML Tag Wrapper, allows it by just using something like this on the user config:

{
  "key": "ctrl+shift+i",
  "command": "extension.wrapTag",
  "when": "editorTextFocus"
}

Would it be possible to include this on this extension too?
I prefer this one :)

Last letter of closing tag is being "cut" when using autocomplete + deselect

So, the issue is as per the title.

When I'm using this tool and I choose an autocomplete option (press enter), the last letter of the closing tag is cut.

So I end up with something like this:

<CountContext>
    ...
</CountContex>

This ONLY happens if
"htmltagwrap.autoDeselectClosingTag": true

Thus, there must be something wrong with the Deselection.

htmltagwrap incompatible with Git Lens extension

I am using the Git Lens extension and the html tag wrap command (opt+W) is being overridden. It would be nice to have a setting available so the tag wrap command could be changed in case of incompatibility with other extensions or personal preference.

HTML Tag wrap selection breaks when selection is empty

When the selection is empty, tag selection doesn't work properly : the closing tag appears before the opening tag.

VSCode : 1.6.1
Windows 8

Tags are not being inserted in correctly formatted position

If you have a selection that starts/ends at character 0, but the markup is actually tabbed in, then we need to insert the tags where the text begins and not where the selection begins.

BUG: VSCode autoclose for HTML causing wrap to occur twice

VSCode version: 1.16.0 adds a html autoclose feature.

This feature causes this extension to wrap the selected text prematurely, resulting in faulty markup.

Unable to set empty tag (AKA React 16 Fragment)

Even if I set htmltagwrap.tag to "", the plugin still defaults to yield p tag instead, which is pretty annoying.

Does not work with spaced indentation formatting

Only works with tabs

Not stopping after whitespace

I don't think it makes sense to create ending tags with classes, etc. As soon as I type space, I really want the macro to finish. I end up doing this by accident all the time: <div class="hello">hello</div class="hello">.

Cmd-W on Mac is closing

Cmd-W on Mac is mapped to closing. You need to use something else.
Webstorm use to have Cmd-Alt-T to wrap text is tags.

How to change default tag (from <p> to <div>)?

How to change default tag while wrapping? I would like to change it from <p></p> to <div></div>.