Як зробити обгортання тегів у коді VS?

Я хотів би обернути вибраний HTML в тег у коді VS. Як це зробити?

Вбудований Еммет може зробити трюк:

1. Вибір тексту (необов’язково)
2. Відкрити палітру команд (зазвичай Ctrl+ Shift+ P)
3. Виконати Emmet: Wrap with Abbreviation
4. Введіть тег div(або абревіатуру .wrapper>p)
5. Удар Enter

Команда може бути призначена прив'язці клавіш.

Ця річ навіть підтримує аргументи:

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

Використовуйте його так:

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

Швидкий пошук на ринку VSCode: https://marketplace.visualstudio.com/items/bradgashler.htmltagwrap .

1. Запустити швидкий відкритий код VS ( Ctrl+ P)

2. вставити ext install htmltagwrapі ввести

3. виберіть HTML

4. натисніть Alt+ W( Option+ Wдля Mac).

Оскільки я не можу коментувати, розкрию фантастичну відповідь Алекса.

Якщо ви хочете, щоб підняття, яке нагадує піднесене, з обгортанням відкрийте розширення Keymap (Налаштування> Розширення клавіатури [ Cmd+ K Cmd+ M]) та додайте наступний об'єкт:

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

Яка буде прив'язувати команду обертання Emmet до Alt+, Wколи вибрано текст

(Вибачте за інструкції лише для OSX)

1. Відкрийте комбінації клавіш, ввівши ⌘ Command+ k ⌘ Command+ sабоCode > Preferences > Keyboard Shortcuts
2. Тип emmet wrap
3. Клацніть знак плюс ліворуч від "Emmet: Wrap with абревіатура"
4. Тип ⌥ Option+w
5. Натисніть Enter

imo, є краща відповідь на це за допомогою Snippets

Створіть фрагмент із таким визначенням:

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

Потім прив’яжіть його до ключа в keybindings.json Наприклад, наприклад:

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

Я думаю, що це має дати вам точно такий же результат, що і htmltagwrap, але без необхідності встановлювати розширення.

Він буде вставляти теги навколо вибраного тексту, за замовчуванням - <b>тег & вибирає тег, тому введення дозволяє змінити його.

Якщо ви хочете використовувати інший тег по замовчуванням просто змінити bв bodyвластивості сниппета.