Jak wykonać zawijanie tagów w kodzie VS?

Chciałbym zawinąć wybrany kod HTML w tagu w kodzie VS. W jaki sposób mogę to zrobić?

Wbudowany Emmet może załatwić sprawę:

1. Wybierz tekst (opcjonalnie)
2. Otwórz paletę poleceń (zwykle Ctrl+ Shift+ P)
3. Wykonać Emmet: Wrap with Abbreviation
4. Wpisz tag div(lub skrót .wrapper>p)
5. Trafienie Enter

Polecenie można przypisać do przypisania klawiszowego.

Ta rzecz obsługuje nawet przekazywanie argumentów:

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

Użyj tego w ten sposób:

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

Szybkie wyszukiwanie na rynku VSCode: https://marketplace.visualstudio.com/items/bradgashler.htmltagwrap .

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

2. wklej ext install htmltagwrapi wprowadź

3. wybierz HTML

4. naciśnij Alt+ W( Option+ Wdla Mac).

Ponieważ nie mogę komentować, rozwinę fantastyczną odpowiedź Alexa.

Jeśli chcesz doświadczyć Sublime z zawijaniem, otwórz rozszerzenia mapy klawiszy (Preferencje> Rozszerzenia mapy klawiszy [ Cmd+ K Cmd+ M]) i dodaj następujący obiekt:

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

Co spowoduje powiązanie polecenia zawijania Emmeta z Alt+ Wpo zaznaczeniu tekstu

(Przepraszamy za instrukcje tylko dla OSX)

1. Otwórz skróty klawiaturowe, wpisując ⌘ Command+ k ⌘ Command+ slubCode > Preferences > Keyboard Shortcuts
2. Rodzaj emmet wrap
3. Kliknij znak plusa po lewej stronie „Emmet: Zawijaj skrótem”
4. Wpisz ⌥ Option+w
5. naciśnij Enter

imo istnieje lepsza odpowiedź na to za pomocą Snippets

Utwórz fragment z taką definicją:

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

Następnie powiąż go z klawiszem w keybindings.json Np. W ten sposób:

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

Myślę, że powinno to dać dokładnie taki sam wynik jak htmltagwrap, ale bez konieczności instalowania rozszerzenia.

Wstawi tagi wokół zaznaczonego tekstu, domyślnie oznacza <b>tag i wybiera tag, więc wpisanie pozwala go zmienić.

Jeśli chcesz użyć innego domyślnego tag wystarczy zmienić bw bodymieniu fragmencie.