Как сделать перенос тегов в коде VS?

170

Я хотел бы обернуть мой выбранный HTML в тег в коде VS. Как я могу это сделать?

html visual-studio-code

1

Одна из причин, по которой я не могу полностью перейти на VSCode и отказаться от Sublime.

— Буджи

3

@budji Это встроенная функция с emmet ... Почти все, что вы могли бы хотеть, также является расширением, и если это не так, вы всегда можете сделать свое собственное.

— Джеймс Койл

Мне нравится этот вопрос, и я знаю и добавочный номер (Emmet Wrap с аббревиатурой), но любой может знать, как выполнять обратные действия. Например: сначала напишите <p> ... </ p> и включите в <u> ** </ u> этот результат <p> ... <u> ** </ u> ... </ p>

— Jmainol

342

Встроенный Эммет может сделать свое дело:

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

Команду можно назначить связыванию клавиш.

Эта вещь даже поддерживает передачу аргументов:

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

Используйте это так:

span.myCssClass
span#myCssId
b
b.myCssClass

— Alex
источник

3

marketplace.visualstudio.com/…

— Алекс

4

Это должен быть ответ, emmet уже установлен в vscode

— Натан

15

Ctrl+ pэто goToFile. Палитра команд Ctrl+ Shift+ P.

— Алекс

1

Для JSX пришлось добавить этот дополнительный шаг: github.com/Microsoft/vscode/issues/4962#issuecomment-323880988

— Gezim

1

С VSCode 1.35.0 (и, возможно, ранее) это работает с JSX - не нужно никаких дополнительных настроек

— davnicwil

98

Быстрый поиск на торговой площадке VSCode: https://marketplace.visualstudio.com/items/bradgashler.htmltagwrap .

Запуск VS Code Quick Open ( Ctrl+ P)
вставьте ext install htmltagwrapи введите
выберите HTML
нажмите Alt+ W( Option+ Wдля Mac).

— Ханнес Нойкерманс
источник

Вы, вероятно, имеете в виду выбрать Установить на шаге 3.

— Самир

1

«Чтобы использовать, выберите кусок кода и нажмите« Alt + W »(« Option + W »для Mac).» Достаточно просто! За исключением того, что это не работает. Я пробовал версию 0.0.3 с VS Code 1.16.1. Это почти работает. Он пытается обернуть выделение в <p></p>теги, а не в общее, <div></div>что может показаться более разумным. Хуже всего то, что он терпит неудачу. Это производит вывод как<p><p>My selected text.</p>

— Самир

1

Я пробовал другие расширения, как это. Но пока мне не повезло найти тот, который работает. Этот был ближе всего к рабочему решению. Я попытался обернуть 0.0.1 Дэвидом Тейлором, и Ctrl + я вообще не работал.

— Самир

1

ОБНОВЛЕНИЕ: расширение теперь работает правильно и решает вышеуказанные проблемы. Больше нет дублирующего тега, и теперь вы можете настроить тег, который вы хотите вставить с помощью параметра. Так что если вы хотите, чтобы тег будет <div>добавить следующий параметр, "htmltagwrap.tag": "div".

— bgashler1

это довольно плохая реализация - работает для одного тега, было бы неплохо иметь что-то похожее на плагин notepad ++ html, где вы можете обернуть выделение тегом из вашего настраиваемого выбора тега

— Саша Бонд

37

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

Если вы хотите использовать 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 только инструкции)

— Эндрю Льюис
источник

7

Вот как я добавил ярлык: «Настройки»> «Сочетания клавиш»; ... затем выполните поиск emmet wrap; ... нажмите +, чтобы добавить ярлык; ... :)

— Luckylooke

1

Кроме того, я добавил && resourceLangId == 'html', чтобы работать только для веб-страниц

— surpavan

@surpavan, хорошо, но это также может быть удобно иметь в других типах файлов, например, в файлах HTML-шаблонов

— Эндрю Льюис

1

@AndrewLewis - да, именно поэтому я сохранил его с идентификатором языка, а не с расширением файла (files.associations).

— Surpavan

Shift + Alt + W бесплатно для окон.

— Тимофей

24

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

— Адам Гонсалес
источник

3

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

— Unifex
источник

Это хорошо, но Emmet может сделать это и многое другое, например, создание вложенного HTML, атрибутов и списков. Эммет выходит из коробки с кодом VS.

— Эндрю Льюис

Я не понимаю, отрицательные голоса. Конечно, Emmet более сложен, и я могу многое сделать, но для обертывания выделения текста тегом это решение отлично подходит! При переносе вам не нужно переводить взгляд на верхнюю часть экрана / окна. Это происходит прямо там, где вы уже были, потому что вы выбрали текст! Это довольно распространенный вариант использования и быстрое решение с малым временем выполнения!

— Андрей V

Я был очень взволнован этим, однако я не мог заставить это работать: /

— Икаро