CODEWITHSUNDEEP
visual-studiovisual-studio-code
Nik
Nik

Reputation: 77

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

All <p> tags were stripped from the markup of a document which provided the whitespace formatting. I need to add back the <p> tags with a css class. The document is nearly 300 lines.

Is it possible to create an action/automation/key binding within VSCode to quickly wrap selected text with open/close tags plus a class? To clarify, I would like to select some text and use an action to wrap a pre-defined tag and a class around it, repeating the process for each line.

ctrl + shift + p - Emmet: Wrap with Abbreviation is the manual solution although not considered time-saving imo, as I need to enter in the tag and class each time.

Upvotes: 0

Views: 3140

Answers (1)

Mark
Mark

Reputation: 181339

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.

wrap with class snippet

Upvotes: 6

Related Questions