Как сделать перенос тегов в коде 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 Code Quick Open ( Ctrl+ P)

2. вставьте ext install htmltagwrapи введите

3. выберите HTML

4. нажмите Alt+ W( Option+ Wдля Mac).

Поскольку я не могу комментировать, я остановлюсь на фантастическом ответе Алекса.

Если вы хотите использовать Sublime-подобный интерфейс для переноса, откройте расширения Keymap (Preferences> Keymap Extensions [ Cmd+ K Cmd+ M]) и добавьте следующий объект:

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

Который будет привязывать команду Emmet wrap к Alt+ Wпри выделении текста

(Извините за OSX только инструкции)

1. Откройте сочетания клавиш, набрав ⌘ Command+ k ⌘ Command+ sилиCode > Preferences > Keyboard Shortcuts
2. Тип emmet wrap
3. Нажмите знак «плюс» слева от «Emmet: Wrap with Abbreviation»
4. Тип ⌥ Option+w
5. Нажмите Enter

IMO есть лучший ответ для этого с помощью сниппетов

Создайте фрагмент с таким определением:

"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свойстве сниппета.