How to do tag wrapping in VS code

Question

I would like to wrap my selected html within a tag in VS code   How do I do that

User · Answer

With VSCode 1 47  you can simply use OPT-w for this  Utilizing built-in functionality to trigger emmet  this is the easiest way   Select your text html  Option w In the emmet window opened in the command palette  type in the tag or wrapping code you need  Enter Voila

User · Answer

imo there s a better answer for this using Snippets  Create a snippet with a definition like this    name of your snippet          scope    javascript html        prefix    name of your snippet        body     lt   0 b  gt  TM SELECTED TEXT lt    0 b  gt       Then bind it to a key in keybindings json E g  like this           key    alt w        command    editor action insertSnippet        args      name    name of your snippet        I think this should give you exactly the same result as htmltagwrap but without having to install an extension   It will insert tags around selected text  defaults to  lt b gt  tag  amp  selects the tag so typing lets you change it    If you want to use a different default tag just change the b in the body property of the snippet

User · Answer

Open Keyboard Shortcuts by typing   Command k   Command s or Code  gt  Preferences  gt  Keyboard Shortcuts Type emmet wrap Click the plus sign to the left of  Emmet  Wrap with Abbreviation  Type   Option w Press Enter

User · Answer

Many commands are already attached to simple ctrl  key   you can also do chorded keybinding like ctrl a b   In case this is your first time reading about chorded keybindings  They work by not letting go of the ctrl key and pressing a second key after the first   I have my Emmet  Wrap with Abbreviation bound to   ctrl   w a    In windows  File  gt  Preferences  gt  Keyboard Shortcuts   ctrl   k s   gt  search for Wrap with Abbreviation  gt  double-click  gt  add your combonation

User · Answer

As I can t comment  I ll expand on Alex s fantastic answer   If you want the Sublime-like experience with wrapping open up the Keymap Extensions  Preferences   Keymap Extensions  Cmd K Cmd M   and add the following object          key    alt w        command    editor emmet action wrapIndividualLinesWithAbbreviation        when    editorHasSelection  amp  amp  editorTextFocus      Which will bind the Emmet wrap command to Alt W when text is selected   Sorry for OSX only instructions

User · Answer

A quick search on the VSCode marketplace  https   marketplace visualstudio com items bradgashler htmltagwrap    Launch VS Code Quick Open  Ctrl P  paste ext install htmltagwrap and enter select HTML press Alt   W  Option   W for Mac

User · Answer

Embedded Emmet could do the trick    Select text  optional  Open command palette  usually Ctrl Shift P  Execute Emmet  Wrap with Abbreviation Enter a tag div  or an abbreviation  wrapper gt p  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

[html] How to do tag wrapping in VS code?

Examples related to html

Examples related to visual-studio-code