Visual Studio - как быстро обернуть текст в тегах HTML?

В новом редакторе HTML в VS 2013 удален режим WYSIWYG, и панель инструментов форматирования отключена. Это хорошо, в общем, но оно также сделало простые изменения, например, сделать текст полужирным или курсивом сложнее.

Что я сейчас делаю, чтобы сделать текст полужирным шрифтом:

  • Тип <b>
  • VS autocompletes </b>
  • Я выбираю конечный тег и нажимаю Ctrl + X
  • Я иду в конец текста, который должен быть полужирным, и нажмите Ctrl + V

Это гораздо менее удобно, чем просто нажимать Ctrl + B или что-то подобное. Я знаю, что в Visual Studio есть команда "Surround with", есть настраиваемые сочетания клавиш и т.д., Поэтому я надеюсь, что функциональность Ctrl + B каким-то образом может быть достигнута в Visual Studio. Есть ли какой-нибудь умный трюк, или я, возможно, пропустил что-то другое, довольно простое?

Ответ 1

Web Essentials 2013 имеет функцию Surround with tag... (Alt + Shift + W), которая более жидкая, чем встроенная Окружать с. Я, вероятно, просто буду придерживаться этого, поскольку я использую Web Essentials в любом случае.

Ответ 2

Вы также можете добавить собственный фрагмент кода (я не знаю, почему Visual Studio не предоставил фрагмент для сильного тега по умолчанию).

Чтобы создать фрагмент:

1) Создайте текстовый файл в C:\Users\USERNAME\Documents\Visual Studio 2013\Фрагменты кода \Visual Web Developer\Мои фрагменты HTML с именем strong.snippet

2) Поместите следующий текст внутри текстового файла:

<CodeSnippet Format="1.1.0" xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
  <Header>
    <Title>strong</Title>
    <Author>YOUR NAME</Author>
    <Shortcut>strong</Shortcut>
    <Description>Markup snippet for a strong text</Description>
    <SnippetTypes>
      <SnippetType>Expansion</SnippetType>
      <SnippetType>SurroundsWith</SnippetType>
    </SnippetTypes>
  </Header>
  <Snippet>
    <Code Language="html"><![CDATA[<strong>$selected$$end$</strong>]]></Code>
  </Snippet>
</CodeSnippet>

Чтобы использовать фрагмент:

1) Выберите текст

2) Щелкните правой кнопкой мыши текст и выберите "Surround With..." или нажмите Ctrl-K, Ctrl-S

3) Откройте папку "My HTML Snippets" во всплывающем меню и выберите сильный фрагмент

Ответ 3

Хорошее предложение от Как быстро разместить текст с помощью html-разметки в версии 2008?:

  • Выберите текст
  • Нажмите Ctrl-X, чтобы вырезать его в буфер обмена
  • Введите тэг <strong>, который Visual Studio автоматически закроет с помощью курсора, оставшегося в середине начального и конечного тегов
  • Нажмите Ctrl-V, чтобы повторно вставить текст между тегами

Ответ 4

Создайте HTML-код-фрагмент кода в Visual Studio

1. Создайте новый .xml файл

2. Используйте следующий шаблон фрагмента:

 <CodeSnippet Format="1.1.0" xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
  <!-- HTML Anchor Snippet -->
  <Header>
    <Title>P</Title>
    <Author>Microsoft Corporation</Author>
    <Shortcut>P</Shortcut>
    <Description>Markup snippet for a Paragraph</Description>
    <SnippetTypes>
      <SnippetType>Expansion</SnippetType>
      <SnippetType>SurroundsWith</SnippetType>
    </SnippetTypes>
  </Header>
  <Snippet>
    <Declarations>
      <Literal>
        <ID>Paragraph</ID>
        <ToolTip>Paragraph</ToolTip>
        <Default>p</Default>
      </Literal>
      <Literal>
        <ID>selected</ID>
        <ToolTip>content</ToolTip>
        <Default>content</Default>
      </Literal>
    </Declarations>
    <Code Language="html"><![CDATA[<p>$selected$</p>$end$]]></Code>

  </Snippet>
</CodeSnippet>

3.. Дайте имя вашему фрагменту и сохранить-как-это, используя (YourFileName.snippet) расширение

Добавить фрагмент в Visual Studio

1. Использовать менеджер фрагментов кода: Перейти к: Инструменты/Менеджер фрагментов кода /

2. Выберите HTML из списка DropDown и откройте HTML папку DoubleClick на нем.
< ш > 4. Нажмите кнопку Импорт и просмотреть в новый файл .snippet.


Использовать свой собственный фрагмент

1. Выберите текст в Текстовом редакторе.

2. используйте комбинацию CTRL + K CTRL + X, чтобы открыть Диалоговое окно "Вставить фрагмент"

3. Выберите HTML из списка DropDown, в котором вы ранее сохранили файл .snipped

4. Выберите свой собственный фрагмент из списка. Теперь он должен обернуть ваш текст тегом </</p> , например


★ Follow the above procedure again for creating a new snippents.

Read More about custom snippets



☕ HINT (just like in Sublime text editor build in feature)
You could create a Lorem Ipsum custom snippet just like this in a seconds:

<CodeSnippet Format="1.1.0" xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
  <!-- HTML Anchor Snippet -->
  <Header>
    <Title>LoremIpsum</Title>
    <Author>Microsoft Corporation</Author>
    <Shortcut>Lorem</Shortcut>
    <Description>Markup snippet for a Lorem Ipsum</Description>
    <SnippetTypes>
      <SnippetType>Expansion</SnippetType>
      <SnippetType>SurroundsWith</SnippetType>
    </SnippetTypes>
  </Header>
  <Snippet>
    <Declarations>
      <Literal>
        <ID>Lorem</ID>
        <ToolTip>LoremIpsum</ToolTip>
        <Default>Lorem</Default>
      </Literal>
      <Literal>
        <ID>selected</ID>
        <ToolTip>content</ToolTip>
        <Default>content</Default>
      </Literal>
    </Declarations>
    <Code Language="html"><![CDATA[$selected$Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus blandit nunc eget consectetur aliquet. Vivamus feugiat ipsum ex, eget egestas erat condimentum eget. Suspendisse luctus velit ac purus venenatis imperdiet sed vel mauris. Ut tempus risus elit, eget molestie purus hendrerit a. Curabitur ac urna posuere, lacinia neque quis, facilisis libero. Cras viverra tellus eu lacus hendrerit, in auctor neque sodales. Pellentesque et finibus lectus. Vestibulum pulvinar, lorem in dignissim fermentum, nunc ipsum luctus arcu, non malesuada nisi sem nec libero. Integer eget arcu interdum, elementum lacus et, ornare arcu. Phasellus quis nulla non enim porta ornare non eget ex. Mauris at purus sed ipsum congue facilisis. Donec tempor, eros ac posuere tempus, velit sapien faucibus augue, vitae convallis augue nulla ut felis. Nunc sapien libero, dictum non finibus nec, rutrum at odio. Nulla facilisi. $end$]]></Code>
  </Snippet>
</CodeSnippet>



☕ HINT
Вы можете создать почти любой фрагмент кода, который вы хотите, предоставив свойство language = "", и установив правильное описание в <code> раздел
Ниже приведен пример функции JavaScript Alert()

<Code Language="JavaScript"><![CDATA[alert($selected$);$end$]]></Code>

Ответ 5

Нажмите на тег, который вы хотите обернуть, затем нажмите Ctrl + Alt + W.