Html tag wrapper vs code

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Wraps a chunk of HTML code in tags (for Visual Studio Code).

License

bgashler1/vscode-htmltagwrap

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

This VS Code extension wraps your text selection in HTML tags. It can wrap inline selections and selections that span multiple lines (works with both single selections and multiple selections at once).

To use, select one or many chunks of code and press «Alt + W» («Option + W» for Mac).

• Select one or more blocks of text or strings of text.
• Press Alt + W or Option + W for Mac.
• Type the tag name you want.

By default, pressing spacebar will deselect the closing tags, so you can add attributes to the opening tags (you can turn this feature off, see below). If nothing is selected when you run htmltagwrap, it will add an opening and closing tag at the cursor position.

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

You can change the default behavior of htmltagwrap with the following settings.

To open VS Code settings, click the «gear» icon > then «Settings»

• htmltagwrap.tag — The default HTML tag to insert.
• htmltagwrap.autoDeselectClosingTag — Automatically deselect the closing tag after inserting a space.

If htmltagwrap‘s keyboard shortcut conflicts with another command (i.e. toggleFindWholeWord on Windows/Linux or a command from another extension), here are 2 ways to resolve it.

1) Change htmltagwrap’s keyboard shortcut

• Click on the gear icon on the bottom-left of VS Code and then on «Keyboard Shortcuts» (or find «Keyboard Shortcuts» from the command palette).
• In the «Search Keybindings» text field, type «htmltagwrap» to see its current keybinding assignment.
• Click on the pencil icon to edit this assignment.
• Type whatever key or key combination you want (e.g. the F7 key)

2) Change the other keyboard shortcut(s)

Do the same as above, except in the «Search Keybindings» text field copy and paste in Alt+W (Windows, Linux) or ⌥ w (Mac) to find all the commands that conflict and make changes to their assignments.

See VS Code’s Keybindings doc for more info.

When using the default setting «htmltagwrap.autoDeselectClosingTag»: true :

• If you undo and then redo wrapping, entering a space will not remove the selection on the closing tag as it normally would.
• After wrapping, if you press space (removes the closing tag cursor) and then backspace to the tag element name, you won’t get your closing tag cursor back.

I haven’t found good solutions to these issues using the current extension API.

Please create an issue on GitHub if you experience a bug. I also welcome pull requests.

About

Wraps a chunk of HTML code in tags (for Visual Studio Code).

Источник

How to do tag wrapping in vs code?

In HTML, tag wrapping is a common issue that developers face when writing code. It occurs when the code inside an HTML element is too long to fit in a single line, and it needs to be wrapped to the next line for readability and organization purposes. Visual Studio Code (VS Code) is a popular code editor used by developers, and it provides multiple ways to wrap HTML tags in a convenient and efficient manner. In this article, we will explore the methods available in VS Code to perform tag wrapping.

Method 1: Wrap with Keyboard Shortcuts

To wrap HTML tags in Visual Studio Code using keyboard shortcuts, you can use the «Wrap with Keyboard Shortcuts» feature. Here are the steps to follow:

1. Select the text you want to wrap with HTML tags.
2. Press «Ctrl+Shift+P» (Windows) or «Cmd+Shift+P» (Mac) to open the Command Palette.
3. Type «wrap with abbreviation» and select «Emmet: Wrap with Abbreviation» from the list.
4. Enter the HTML tag you want to use, followed by a dot (.) and the class name (if applicable). For example, to wrap the selected text with a div tag and a class of «container», enter «div.container».
5. Press «Enter» to wrap the selected text with the HTML tag.

Here is an example of how to wrap a paragraph with a div tag and a class of «container»:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

div class="container"> p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.p> div>

You can also use this feature to wrap selected text with other HTML tags, such as span, h1, ul, etc. Just replace «div» with the tag you want to use.

For more information on Emmet abbreviations and shortcuts, check out the official documentation at https://docs.emmet.io/abbreviations/.

Method 2: Wrap using the Command Palette

To wrap HTML tags in VS Code using the Command Palette, follow these steps:

1. Select the text you want to wrap in tags.
2. Open the Command Palette by pressing Ctrl+Shift+P on Windows or Cmd+Shift+P on Mac.
3. Type «Wrap with Abbreviation» and select it from the list of suggestions.
4. In the input box that appears, enter the tag you want to wrap the selected text in, for example, «div».
5. Press Enter and the selected text will be wrapped in the specified tag.

Here’s an example of wrapping a paragraph tag around some text:

Before: Lorem ipsum dolor sit amet. After: p>Lorem ipsum dolor sit amet.p>

You can also use this method to wrap multiple lines of code in a tag. Here’s an example of wrapping a div tag around a section of HTML code:

Before: h2>Titleh2> ul> li>Item 1li> li>Item 2li> ul> After: div> h2>Titleh2> ul> li>Item 1li> li>Item 2li> ul> div>

This method is a quick and easy way to wrap HTML tags around selected text in VS Code. It saves time compared to manually typing out the opening and closing tags.

Method 3: Wrap using the Settings Editor

To wrap HTML tags in VS Code using the «Wrap using the Settings Editor» method, follow these steps:

1. Open the VS Code settings editor by pressing Ctrl + , on Windows or Cmd + , on Mac.
2. Click on the «Extensions» tab, then click on «HTML» in the list of extensions.
3. Scroll down until you see the «Wrap Attributes» section, then click on the «Edit in settings.json» link.
4. In the settings.json file, add the following code:

"html.format.wrapAttributes": "force-aligned"

This will wrap all attributes in an HTML tag and align them for easy readability.

This will automatically wrap tags based on the width of the editor window.

"html.format.wrapTags": "preserve-aligned" "html.format.wrapAttributes": "preserve-aligned" "html.format.wrapAttributesIndentSize": 2

This will preserve the alignment of attributes and tags, and wrap them with 2 spaces.

"html.format.wrapLineLength": 120

This will wrap tags at 120 characters.

Note: Make sure to save the settings.json file after making any changes.

That’s it! With these settings, you can easily wrap HTML tags in VS Code using the «Wrap using the Settings Editor» method.

Источник

vscode-htmltagwrap

Wraps your selection in HTML tags. Can wrap inline selections and selections that span multiple lines (works with both single selections and multiple selections at once). To use, select one or many chunks of code and press «Alt + W» («Option + W» for Mac). Download it on the Visual Studio Marketplace

How to Use It

• Select one or more blocks of text or strings of text.
• Press Alt + W or Option + W for Mac.
• Type the tag name you want.

By default, pressing spacebar will deselect the closing tags, so you can add attributes to the opening tags (you can turn this feature off, see below). If nothing is selected when you run htmltagwrap, it will add an opening and closing tag at the cursor position.

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

Settings

You can change the default behavior of htmltagwrap with the following settings.

To open VS Code settings, click the «gear» icon > then «Settings»

Available settings

• htmltagwrap.tag — The default HTML tag to insert.
• htmltagwrap.autoDeselectClosingTag — Automatically deselect the closing tag after inserting a space.

Defaults

Keyboard shortcut

If htmltagwrap‘s keyboard shortcut conflicts with another command (i.e. toggleFindWholeWord on Windows/Linux or a command from another extension), here are 2 ways to resolve it.

1) Change htmltagwrap’s keyboard shortcut

• Click on the gear icon on the bottom-left of VS Code and then on «Keyboard Shortcuts» (or find «Keyboard Shortcuts» from the command palette).
• In the «Search Keybindings» text field, type «htmltagwrap» to see its current keybinding assignment.
• Click on the pencil icon to edit this assignment.
• Type whatever key or key combination you want (e.g. the F7 key)

2) Change the other keyboard shortcut(s)

Do the same as above, except in the «Search Keybindings» text field copy and paste in Alt+W (Windows, Linux) or ⌥ w (Mac) to find all the commands that conflict and make changes to their assignments.

See VS Code’s Keybindings doc for more info.

Known Issues

When using the default setting «htmltagwrap.autoDeselectClosingTag»: true :

• If you undo and then redo wrapping, entering a space will not remove the selection on the closing tag as it normally would.
• After wrapping, if you press space (removes the closing tag cursor) and then backspace to the tag element name, you won’t get your closing tag cursor back.

I haven’t found good solutions to these issues using the current extension API.

Contributing

Please create an issue on GitHub if you experience a bug. I also welcome pull requests.

Recent Updates

0.0.7

• After wrapping, you can add attributes to just the opening tags.
• Upon spacebar press, cursors in the closing tags go away.

(see previous updates in the changelog)

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Wraps a chunk of HTML code in tags

License

microsoft/vscode-htmltagwrap

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

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).

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.

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

• 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?

  About

  Wraps a chunk of HTML code in tags

  Источник