How to Do Tag Wrapping in VS Code

How to do tag wrapping in VS code?

Embedded Emmet could do the trick:

1. Select text (optional)
2. Open command palette (usually Ctrl+Shift+P)
3. Execute Emmet: Wrap with Abbreviation
4. Enter a tag div (or an abbreviation .wrapper>p)
5. Hit Enter

Command can be assigned to a keybinding.

---

This thing even supports passing arguments:

{
    "key": "ctrl+shift+9",
    "command": "editor.emmet.action.wrapWithAbbreviation",
    "when": "editorHasSelection",
    "args": {
        "abbreviation": "span",
    },
},

Use it like this:

• span.myCssClass
• span#myCssId
• b
• b.myCssClass

VS Code - HTML tag wrapping issue

You could try adding this line to your settings.json file

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

How to wrap selected text with tags in VS Code and repeat the action efficiently?

You could make a simple keybinding (in keybindings.json):

{
  "key": "alt+m",                                //whatever keybinding you choose
  "command": "editor.action.insertSnippet",
  // "when": "resourceExtname == .html",
  "args": {
    "snippet": "<p class=\"myClass\">$TM_SELECTED_TEXT</p>"
  }
}

If your class changes you could put a tabstop there instead of hardcoding a particular className:

"snippet": "<p class=\"$1\">$TM_SELECTED_TEXT</p>"

It will work for multi-cursors too. Only the Alt+m is for triggering the snippet. The other keystrokes are just to set multiple cursors and then expand those selections - which you may not need. I don't know how you are selecting each of your cases.

Key binding to wrap a selection with an html tag in VSCode

To automate this go to.

File > Preferences > Keyboard Shortcuts

and add this into your keybindings.json (right hand side window)

{
    "key": "ctrl+shift+enter",
    "command": "editor.emmet.action.wrapWithAbbreviation",
    "when": "editorTextFocus && !editorReadonly"
}

You can replace ctrl+shift+enter with your own key combination.

How to - in Visual Studio Code - wrap selection with a tag (div, preferably)

You can use Emmet: Wrap Individual lines with abbreviation.

If you have a fixed tag you want to use to wrap you can add a keyboard shortcut in keybindings.json

  {
    "key": "shift+alt+d",
    "when": "editorTextFocus && editorLangId == html",
    "command": "editor.emmet.action.wrapIndividualLinesWithAbbreviation",
    "args": { "abbreviation": "div" }
  }

How can I switch word wrap on and off in Visual Studio Code?

Since v1.0 you can toggle word wrap:

• with the new command editor.action.toggleWordWrap, or
• from the View menu (*View** → Toggle Word Wrap), or
• using the ALT+Z keyboard shortcut (for Mac: ⌥+Z).

It can also be controlled with the following settings:

• editor.wordWrap
• editor.wordWrapColumn
• editor.wrappingIndent

---

Known issues:

1. renderLineHighlight should highlight the entire logical line

If you'd like these bugs fixed, please vote for them.

How do I wrap a selection with an HTML tag in Visual Studio?

Visual Studio 2015 comes with a new shortcut, Shift+Alt+W, that wraps the current selection with a div. This shortcut leaves the text "div" selected, making it seamlessly changeable to any desired tag. This coupled with the automatic end tag replacement makes for a quick solution.

UPDATE

This shortcut is available in Visual Studio 2017 as well, but you must have the "ASP.NET and Web Development" workload installed.

Example

Shift+Alt+W > p > Enter

How to create a shortcut to add tags around selected text in VS Code

This is very simple in VSCode because it has Emmet integrated into it.

You just select the text, open the command pallet (CTRL SHIFT P) and select Emmet: Wrap with Abbreviation and write your tag and it will automatically wrap the test in that tag. you can also use Emmet class and tag syntax too.

Here is a demo:

You can set the keyboard shortcuts for this action too in VSCode. In the Keyboard Shorcut Screen you can search for Emmet wrap and change them.

---

Related Topics