I dont exactly know how to word this on google, so basically what I need is, is there any way that I can select a text in my html script and place an open and close tag between the selected text, kinda like the shortcut when putting comment tags between a text on vscode with ctrl + / ?
I need something like this
. I set keyboard shortcut to Ctrl+shift+up and down, and just move the line in between the tags:
This is the title
Not exactly what you asked, but one approach.Videos
Are HTML shortcuts customizable in VS Code?
A: Yes. You can customize HTML shortcuts in VS Code by changing your user or workspace settings.
Can I create my own custom HTML shortcuts in VS Code?
A: Yes. You can create custom HTML snippets or shortcuts in VS Code by defining them in user or workspace settings. This allows you to create shortcuts for frequently used code patterns or custom elements.
I don't know if there's an extension that does your exact 2 steps, but here's a very way to do it in 3:
- Select a HTML tag, collapsed or not - doesn't matter.
- Press hotkey for
editor.emmet.action.wrapWithAbbreviationcommand. By default it's unset, so you need to configure it. - Enter the tag that will wrap what you selected.
A way to do it in 2 steps could be with help of snippets, perhaps. You could create a bunch of snippets for different tags, like:
"Wrap with div": {
"scope": "html",
"prefix": "wrap",
"body": "<div>$TM_SELECTED_TEXT</div>"
}
And then create a bunch of hotkey macros for first selecting the whole tag (e.g. editor.emmet.action.balanceOut) and then calling each of your snippet called with editor.action.insertSnippet and these args: { "name": "Wrap with div" }. See e.g. this answer for examples of defining macros.
So there is a way to wrap an HTML element easily with just 2 steps (after installing a vs Code extension):
So first Go into your VS code and install the extension called: "htmltagwrap".
Then you can do the magic:
1) Select the block of code you want to wrap, and -
If you are using windows press:
Alt+W.
If you are using Mac press:
option+W.
Then VS Code (and if I am not mistaken it is Emmet that-) will wrap the selected HTML element with a <p></p> tag automatically, but don't worry :p
2) Then straight away type the element you want and it will replace it.
If you are using VS code then you can use this command shift + 1 and enter to auto-populate HTML Doctype in HTML or PHP.
When you will press enter it will add the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
In VS Code,
Type ! and then press Enter
CTRL + Shift + P- Change language mode
- Click on "Configure file association for .html"
- If you scroll down through the list, you will see a label "Current association" next to the file type that your file is currently associated to.
- Change it to .HTML if that's what you want .html files to be associated to.
- Close the file and open it again.
- Try
!- a tooltip should now pop up and then you hittab.
Change Setting Emmet
- Go to Setting , CTRL + , for shortcut
- Type Emmet Tab on search bar
- Enable trigger expansion on tab
- Try type ! + Tab
Suggest
- Type ! on HTML File
- Press CTRL + SPACE, to activate trigger suggest
- And Enter
HTML:5
- Type html:5
- Enter or Tab
To have the basic structure I used to just write ! + tab, but now I can't do it anymore, the solutions are ! + ctrl + space then tab or writing html:5 + tab. How can I make the normal ! + tab come back?