Como fazer a quebra de tags no código VS?

Gostaria de envolver meu html selecionado em uma tag no código VS. Como faço isso?

O Emmet incorporado pode fazer o truque:

1. Selecionar texto (opcional)
2. Paleta de comandos abertos (geralmente Ctrl+ Shift+ P)
3. Executar Emmet: Wrap with Abbreviation
4. Digite uma tag div(ou uma abreviação .wrapper>p)
5. Acertar Enter

O comando pode ser atribuído a uma combinação de teclas.

Essa coisa ainda suporta argumentos de passagem:

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

Use-o assim:

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

Uma pesquisa rápida no mercado VSCode: https://marketplace.visualstudio.com/items/bradgashler.htmltagwrap .

1. Iniciar o VS Code Quick Open ( Ctrl+ P)

2. cole ext install htmltagwrape insira

3. selecione HTML

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

Como não posso comentar, vou expandir a fantástica resposta de Alex.

Se você deseja uma experiência do tipo sublime com quebra automática, abra as extensões de mapa de teclas (Preferências> extensões de mapa de teclas [ Cmd+ K Cmd+ M]) e adicione o seguinte objeto:

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

O que vinculará o comando de quebra automática do Emmet a Alt+ Wquando o texto for selecionado

(Desculpe apenas pelas instruções do OSX)

1. Abra Atalhos de teclado digitando ⌘ Command+ k ⌘ Command+ souCode > Preferences > Keyboard Shortcuts
2. Tipo emmet wrap
3. Clique no sinal de adição à esquerda de "Emmet: quebrar com abreviação"
4. Digite ⌥ Option+w
5. pressione Enter

imo há uma resposta melhor para isso usando Snippets

Crie um snippet com uma definição como esta:

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

Em seguida, vincule-o a uma chave em keybindings.json Por exemplo:

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

Eu acho que isso deve fornecer exatamente o mesmo resultado que o htmltagwrap, mas sem a necessidade de instalar uma extensão.

Ele inserirá tags em torno do texto selecionado, o padrão é <b>tag e seleciona a tag para que a digitação permita que você a altere.

Se você deseja usar uma tag padrão diferente, basta alterar ba bodypropriedade in do snippet.