Как обернуть выделение тегом HTML в Visual Studio?

110

Это кажется самым простым вопросом в мире, но будь я проклят, если найду ответ.

Есть ли сочетание клавиш, встроенное в Visual Studio, либо через Code Rush или другой сторонний плагин, для обертывания текущего выделения тегом HTML? Я устал набирать открывающий тег, вырезать неуместный закрывающий тег в буфер обмена, перемещать курсор и вставлять его в конец, где он должен.

Обновление: вот как TextMate обрабатывает выделение тегом . Честно говоря, я ошеломлен тем, что Visual Studio, похоже, не имеет подобной функции. Создание макроса или сниппета для каждого мыслимого тега, который я мог бы использовать, кажется абсурдным.

дансай
источник
Вы можете написать макрос таким образом, чтобы он предлагал вам ввести тег, которым нужно обернуть выделение. Я могу выкопать свой макрос, если хотите?
Ян Джейкобс,
Кто-нибудь еще нашел способ сделать это?
SamWM 04

Ответы:

132

Visual Studio 2015 поставляется с новым сочетанием клавиш Shift + Alt + W, которое обертывает текущий выбор с помощью div. Этот ярлык оставляет текст «div» выбранным, что позволяет легко изменить его на любой желаемый тег. Это в сочетании с автоматической заменой конечных тегов позволяет быстро найти решение.

ОБНОВИТЬ

Этот ярлык также доступен в Visual Studio 2017, но у вас должна быть установлена ​​рабочая нагрузка «ASP.NET и веб-разработка».

пример

Shift+Alt+W > p > Enter
Д-Джонс
источник
Все еще применимо в VS2017.
Zze
у меня не работает в VS 2017. Я думаю, это работает, только если у вас есть основы Интернета.
RayLoveless
1
@RayLoveless ctrl-k ctrl-s действительно помогает мне окружать сниппетом. Однако ваш выбор должен исходить из списка фрагментов (без div), а фрагменты содержат дополнительные поля для редактирования, которые нарушают рабочий процесс, описанный выше. Можно было бы поспорить за кастомные сниппеты, но я предпочитаю нестандартные решения!
D-Jones
1
@WildJoe, какой файл у вас открыт? Если это файл xml или xaml случайно, я не уверен, что это сработает, поскольку я считаю, что это работает только для редакторов HTML.
D-Jones
1
@WildJoe см. Здесь stackoverflow.com/a/34799783/1647159 и здесь stackoverflow.com/a/22274313/1647159 Предупреждение, вы можете столкнуться с ухудшением работы
D-Jones
65

Я знаю, что это устарело, и вы, вероятно, уже нашли ответ, но я просто хотел бы добавить для тех, кто может этого не знать, что это возможно в VS 2010:

  1. Выберите код, который вы хотите окружить.
  2. Сделайте ctrl-k ctrl-s(или щелкните правой кнопкой мыши и выберите Surround with....
  3. Есть множество фрагментов HTML на выбор.

Вы можете создать свои собственные SurroundsWith сниппеты, если не найдете то, что ищете:

  1. Щелкните, Fileа затем щелкните Newи выберите тип файла XML.
  2. В Fileменю щелкните Save.
  3. В Save asполе выберите All Files (*.*).
  4. В File nameполе введите имя .snippetфайла с расширением имени файла.
  5. Щелкните Save.

Введите в XML-файл что-то вроде следующего примера:

<CodeSnippet Format="1.1.0" xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
  <Header>
    <Title>ul-div</Title>
    <Author>Microsoft Corporation</Author>
    <Shortcut>ul>li</Shortcut>
    <Description>Wrap in a ul and then an li</Description>
    <SnippetTypes>
      <SnippetType>Expansion</SnippetType>
      <SnippetType>SurroundsWith</SnippetType>
    </SnippetTypes>
  </Header>
  <Snippet>
    <Declarations>
      <Literal>
        <ID>selected</ID>
        <ToolTip>content</ToolTip>
        <Default>content</Default>
      </Literal>
    </Declarations>
    <Code Language="html"><![CDATA[<ul><li>$selected$</li></ul>$end$]]></Code>
  </Snippet>
</CodeSnippet>
  1. Открыть Tools> Code Snippets Manager.
  2. Щелкните Importи перейдите к только что созданному фрагменту.
  3. Отметьте My HTML Snippetsи нажмите, Finishа затем OK.

После этого у вас будет новый блестящий фрагмент HTML, в который можно обернуть материал!

Брэдли Маунтфорд
источник
2
Когда вы говорите: «Щелкните файл XML, а затем щелкните Открыть». Что вы имеете в виду? нажмите какой xml файл?
Пользователь
Отличный совет! Вы знаете обратное? Как удалить окружающие теги?
Trio Cheung
@ Пользователь ... Сейчас исправляю. Он не должен говорить «Щелкните файл XML ...», просто «Щелкните файл ...».
Watki02 07
3
это работает, но это не совсем ярлык, скорее длинный путь
Pixelomo
@AlanSutherland При первой настройке, да. После того, как он настроен, просто нажмите ctrl-k ctrl-s и выберите шаблон.
Брэдли Маунтфорд
42

Если у вас установлен Web Essentials , вы можете использовать Shift + Alt + W, чтобы заключить выделение в тег.

жечь
источник
6
Замечательно то, что вам нужно просто выделить тег или просто поместить курсор внутри тега. Нет необходимости выделять текст явно.
Alex KeySmith
8

Я знаю, что это древняя ветка, но, столкнувшись с проблемой, я наконец решил создать свою, и, поскольку это один из первых результатов в Google, я подумал, что люди могут найти это полезным.

На самом деле это было довольно просто, я просто скопировал из существующего фрагмента HTML и переместил литералы. Следующий фрагмент будет окружен общим тегом HTML, он запрашивает тег и помещает его как в открывающий, так и закрывающий теги.

<CodeSnippet Format="1.1.0" xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
  <!-- Generic HTML Snippet -->
  <Header>
    <Title>Html</Title>
    <Author>Liam Slater</Author>
    <Shortcut>h</Shortcut>
    <Description>Markup snippet for HTML</Description>
    <SnippetTypes>
      <SnippetType>SurroundsWith</SnippetType>
    </SnippetTypes>
  </Header>
  <Snippet>
    <Declarations>
      <Literal>
        <ID>tag</ID>
        <ToolTip>tag</ToolTip>
        <Default></Default>
      </Literal>
      <Literal>
        <ID>selected</ID>
        <ToolTip>content</ToolTip>
        <Default>content</Default>
      </Literal>
    </Declarations>
    <Code Language="html"><![CDATA[<$tag$>$selected$</$tag$>$end$]]></Code>
  </Snippet>
</CodeSnippet>
Chao
источник
7

Столкнувшись с такой ситуацией, я часто сначала набираю закрывающий тег, а затем открывающий. Это предотвращает «помощь» IDE, вставляя закрывающий тег там, где он мне не нужен. Однако я также заинтересован в лучшем решении.

tvanfosson
источник
3
+1. Поистине удивительно, насколько это сложно для такой простой функции.
Джон Харгроув
Почти 8 лет спустя я все еще использую то же самое
Джек
7

Для тех, кто использует Visual Studio 2017: щелкните правой кнопкой мыши область html/ cshtmlили выберите элементы для переноса, Wrap With <div>в списке есть кнопка. введите описание изображения здесь

Бурак Каракуш
источник
1
Это дубликат текущего выбранного ответа (с использованием shift+alt+w).
Zze
Что мне тогда делать? Кстати, в Visual Studio 2015 не было такого элемента пользовательского интерфейса, который я показал в своем ответе, когда писал, я просто хотел показать, что есть элемент пользовательского интерфейса, который делает то же самое с помощью щелчков мышью в Visual Studio 2017.
Бурак Каракуш
2

Я ничего не знаю, но написать макрос, чтобы обернуть его в любой тег, который вы хотите, не должно быть трудным. У меня есть аналогичный, который заключит мой выбор в региональный блок.

Ян Джейкобс
источник