CODEWITHSUNDEEP
htmlvisual-studio-codehyperlink
ccpizza
ccpizza

Reputation: 31841

vscode: How to linkify text with a URL in HTML mode?

Is there a way to quickly create a hyperlink in a HTML file given a text selection and a URL in the clipboard?

In markdown mode in vscode pasting a URL while some text is selected (e.g. W3 Consortium) will result in a markdown link being created, i.e. [W3 Consortium](https://www.w3.org). (Similar functionality is also available in slack's richtext editor)

Is similar functionality available for the HTML mode, ootb or via an extension?

E.g. given a text selection of W3 Consortium by pasting a URL like https://www.w3.org/ I expect to get:

<a href="https://www.w3.org">W3 Consortium</a>

Currently the selection is simply replaced with the URL.

Is this available in vscode and if so then how to enable it? Or is there an extension that could do it? This is a pretty common use case so I assume it might be implemented but not clear what to search for.

Upvotes: 0

Views: 1152

Answers (1)

Mark
Mark

Reputation: 183124

This cannot be done natively in vscode, but you can make a snippet/keybinding to it easily. Make this keybinding, in your keybindings.json:

{
  "key": "alt+m",                          // whatever keybinding you want
  "command": "editor.action.insertSnippet",
  "when": "editorHasSelection  && editorLangId == html",
  "args": {
      "snippet": "<a href=\"${CLIPBOARD}\">${TM_SELECTED_TEXT}<\/a>"
  }
}

You see it uses variables for your selected text and the clipboard content. Demo:

html link snippet

Upvotes: 4

Related Questions