¿Cómo hacer el ajuste de etiquetas en el código VS?

Me gustaría envolver mi html seleccionado dentro de una etiqueta en el código VS. ¿Cómo puedo hacer eso?

Embedded Emmet podría hacer el truco:

1. Seleccionar texto (opcional)
2. Abrir la paleta de comandos (generalmente Ctrl+ Shift+ P)
3. Ejecutar Emmet: Wrap with Abbreviation
4. Ingrese una etiqueta div(o una abreviatura .wrapper>p)
5. Golpear Enter

El comando se puede asignar a una combinación de teclas.

Esto incluso admite argumentos de paso:

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

Úselo así:

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

Una búsqueda rápida en el mercado VSCode: https://marketplace.visualstudio.com/items/bradgashler.htmltagwrap .

1. Ejecute VS Code Quick Open ( Ctrl+ P)

2. pegar ext install htmltagwrape introduzca

3. seleccione HTML

4. presione Alt+ W( Option+ Wpara Mac).

Como no puedo comentar, ampliaré la fantástica respuesta de Alex.

Si desea una experiencia sublime con el ajuste, abra las Extensiones de mapa de teclas (Preferencias> Extensiones de mapa de teclas [ Cmd+ K Cmd+ M]) y agregue el siguiente objeto:

{
    "key": "alt+w",
    "command": "editor.emmet.action.wrapIndividualLinesWithAbbreviation",
    "when": "editorHasSelection && editorTextFocus"
}

Lo que vinculará el comando de ajuste de Emmet a Alt+ Wcuando se seleccione texto

(Perdón por las instrucciones de OSX solamente)

1. Abra los atajos de teclado escribiendo ⌘ Command+ k ⌘ Command+ soCode > Preferences > Keyboard Shortcuts
2. Tipo emmet wrap
3. Haga clic en el signo más a la izquierda de "Emmet: Ajustar con abreviatura"
4. Escriba ⌥ Option+w
5. prensa Enter

OMI, hay una mejor respuesta para esto usando Snippets

Crea un fragmento con una definición como esta:

"name_of_your_snippet": {
    "scope": "javascript,html",
    "prefix": "name_of_your_snippet",
    "body": "<${0:b}>$TM_SELECTED_TEXT</${0:b}>"
}

Luego, vincúlelo a una clave en keybindings.json Por ejemplo, así:

{ 
    "key": "alt+w",
    "command": "editor.action.insertSnippet",
    "args": { "name": "name_of_your_snippet" }
}

Creo que esto debería darte exactamente el mismo resultado que htmltagwrap pero sin tener que instalar una extensión.

Insertará etiquetas alrededor del texto seleccionado, por defecto <b>etiquetará y seleccionará la etiqueta, por lo que escribir le permite cambiarla.

Si desea utilizar una etiqueta predeterminada diferente, simplemente cambie bla bodypropiedad del fragmento.