Comment faire un wrapping de balises dans du code VS?

Je voudrais envelopper mon html sélectionné dans une balise en code VS. Comment je fais ça?

Emmet intégré pourrait faire l'affaire:

1. Sélectionnez du texte (facultatif)
2. Ouvrir la palette de commandes (généralement Ctrl+ Shift+ P)
3. Exécuter Emmet: Wrap with Abbreviation
4. Entrez une balise div(ou une abréviation .wrapper>p)
5. Frappé Enter

La commande peut être affectée à une combinaison de touches.

Cette chose prend même en charge les arguments de passage:

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

Utilisez-le comme ceci:

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

Une recherche rapide sur le marché VSCode: https://marketplace.visualstudio.com/items/bradgashler.htmltagwrap .

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

2. coller ext install htmltagwrapet entrer

3. sélectionnez HTML

4. appuyez sur Alt+ W( Option+ Wpour Mac).

Comme je ne peux pas faire de commentaire, je vais développer la réponse fantastique d'Alex.

Si vous voulez une expérience de type Sublime avec le wrapping, ouvrez les extensions Keymap (Préférences> Extensions Keymap [ Cmd+ K Cmd+ M]) et ajoutez l'objet suivant:

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

Ce qui liera la commande Emmet wrap à Alt+ Wlorsque le texte est sélectionné

(Désolé pour les instructions OSX uniquement)

1. Ouvrez les raccourcis clavier en tapant ⌘ Command+ k ⌘ Command+ souCode > Preferences > Keyboard Shortcuts
2. Type emmet wrap
3. Cliquez sur le signe plus à gauche de "Emmet: Wrap with Abbreviation"
4. Tapez ⌥ Option+w
5. presse Enter

imo il y a une meilleure réponse pour cela en utilisant des extraits

Créez un extrait avec une définition comme celle-ci:

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

Ensuite, liez-le à une clé dans keybindings.json Par exemple, comme ceci:

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

Je pense que cela devrait vous donner exactement le même résultat que htmltagwrap mais sans avoir à installer une extension.

Il insérera des balises autour du texte sélectionné, par défaut <b>balise et sélectionne la balise afin que la saisie vous permette de la modifier.

Si vous souhaitez utiliser une autre balise par défaut, modifiez simplement bla bodypropriété de l'extrait de code.