Wie wird ein Tag in VS-Code verpackt?

Ich möchte mein ausgewähltes HTML in ein Tag in VS-Code einschließen. Wie mache ich das?

Embedded Emmet könnte den Trick machen:

1. Text auswählen (optional)
2. Befehlspalette öffnen (normalerweise Ctrl+ Shift+ P)
3. Ausführen Emmet: Wrap with Abbreviation
4. Geben Sie ein Tag div(oder eine Abkürzung .wrapper>p) ein.
5. Schlagen Enter

Der Befehl kann einer Tastenkombination zugewiesen werden.

Dieses Ding unterstützt sogar das Übergeben von Argumenten:

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

Verwenden Sie es so:

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

Eine schnelle Suche auf dem VSCode-Marktplatz: https://marketplace.visualstudio.com/items/bradgashler.htmltagwrap .

1. Starten Sie VS Code Quick Open ( Ctrl+ P)

2. einfügen ext install htmltagwrapund eingeben

3. Wählen Sie HTML

4. Drücken Sie Alt+ W( Option+ Wfür Mac).

Da ich keinen Kommentar abgeben kann, werde ich auf Alex 'fantastische Antwort eingehen.

Wenn Sie eine erhabene Erfahrung mit dem Wrapping wünschen, öffnen Sie die Keymap-Erweiterungen (Einstellungen> Keymap-Erweiterungen [ Cmd+ K Cmd+ M]) und fügen Sie das folgende Objekt hinzu:

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

Dadurch wird der Emmet-Wrap-Befehl an Alt+ gebunden, Wwenn Text ausgewählt wird

(Entschuldigung nur für OSX-Anweisungen)

1. Öffnen Sie die Tastaturkürzel, indem Sie ⌘ Command+ k ⌘ Command+ soder eingebenCode > Preferences > Keyboard Shortcuts
2. Art emmet wrap
3. Klicken Sie auf das Pluszeichen links neben "Emmet: Wrap with Abbreviation".
4. Geben Sie ⌥ Option+ einw
5. Drücken Sie Enter

Imo gibt es eine bessere Antwort darauf mit Snippets

Erstellen Sie ein Snippet mit einer Definition wie folgt:

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

Binden Sie es dann an einen Schlüssel in keybindings.json. Beispiel:

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

Ich denke, dies sollte genau das gleiche Ergebnis wie htmltagwrap liefern, ohne jedoch eine Erweiterung installieren zu müssen.

Es werden Tags um den ausgewählten Text eingefügt, standardmäßig wird das <b>Tag markiert und das Tag ausgewählt, sodass Sie es durch Eingabe ändern können.

Wenn Sie ein anderes Standard-Tag verwenden möchten, ändern Sie einfach bdie bodyEigenschaft des Snippets.

Mit VSCode 1.47+ können Sie dazu einfach OPT-w verwenden.

Dies ist der einfachste Weg, die integrierte Funktionalität zum Auslösen von Emmet zu verwenden:

1. Wählen Sie Ihren Text / HTML.
2. Option+w
3. Im emmetFenster in der Befehlspalette geöffnet, geben Sie in dem Tag oder in der Verpackung Code , den Sie benötigen.
4. Enter
5. Voila

Viele Befehle sind bereits an simple ctrl+ angehängt [key]. Sie können auch akkordische Tastenkombinationen wie ctrl a+ ausführen b.

(Falls Sie zum ersten Mal etwas über akkordierte ctrlTastenkombinationen lesen: Sie funktionieren, indem Sie die Taste nicht loslassen und nach der ersten eine zweite Taste drücken.)

Ich habe meine Emmet: Wrap with AbbreviationBindung an (( ctrl) ( w+ a)).

In Windows: Datei> Einstellungen> Tastaturkürzel (( ctrl) ( k+ s))> Nach Wrap mit Abkürzung suchen> Doppelklicken> Kombination hinzufügen.