Как обернуть выделение тегом 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 и выберите шаблон.
Брэдли Маунтфорд



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>

7

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


3
+1. Поистине удивительно, насколько это сложно для такой простой функции.
Джон Харгроув

Почти 8 лет спустя я все еще использую то же самое
Джек

7

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


1
Это дубликат текущего выбранного ответа (с использованием shift+alt+w).
Zze

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

2

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.