Wie verpacke ich eine Auswahl in Visual Studio mit einem HTML-Tag?

110

Dies scheint die grundlegendste Frage der Welt zu sein, aber verdammt, wenn ich eine Antwort finden kann.

Gibt es eine Tastenkombination, die entweder in Visual Studio oder über Code Rush oder ein anderes Plug-In eines Drittanbieters stammt, um die aktuelle Auswahl mit einem HTML-Tag zu versehen? Ich habe es satt, das Eröffnungs-Tag einzugeben, das falsch platzierte Schließ-Tag in die Zwischenablage zu schneiden, den Cursor zu bewegen und es an das Ende einzufügen, zu dem es gehört.

Update: So behandelt TextMate das Umgeben einer Auswahl mit einem Tag . Ehrlich gesagt bin ich fassungslos, dass Visual Studio keine ähnliche Funktion zu haben scheint. Das Erstellen eines Makros oder Snippets für jedes denkbare Tag, das ich verwenden möchte, erscheint absurd.

dansays
quelle
Sie können das Makro so schreiben, dass Sie aufgefordert werden, das Tag mit der Auswahl zu versehen. Ich kann mein Makro ausgraben, wenn Sie möchten?
Ian Jacobs
Hat jemand schon einen Weg gefunden, dies zu tun?
SamWM

Antworten:

132

Visual Studio 2015 enthält eine neue Verknüpfung, Umschalt + Alt + W, die die aktuelle Auswahl mit einem Div umschließt. Diese Verknüpfung lässt den Text "div" ausgewählt, sodass er nahtlos in jedes gewünschte Tag geändert werden kann. Dies in Verbindung mit dem automatischen Austausch des Endetiketts sorgt für eine schnelle Lösung.

AKTUALISIEREN

Diese Verknüpfung ist auch in Visual Studio 2017 verfügbar, Sie müssen jedoch die Workload "ASP.NET and Web Development" installiert haben.

Beispiel

Shift+Alt+W > p > Enter
D-Jones
quelle
Gilt weiterhin für VS2017.
Zze
funktioniert bei mir in VS 2017 nicht. Ich denke, das funktioniert nur, wenn Sie über das Wesentliche im Internet verfügen.
RayLoveless
1
@ RayLoveless Strg-K Strg-S funktioniert für mich, um mit einem Snippet zu umgeben. Ihre Auswahl muss jedoch aus der Snippet-Liste (kein Div) stammen, und die Snippets enthalten zusätzliche zu bearbeitende Felder, die den oben beschriebenen Workflow unterbrechen. Man könnte für benutzerdefinierte Schnipsel argumentieren, aber ich bevorzuge Out-of-the-Box-Lösungen!
D-Jones
1
@WildJoe Welche Art von Datei hast du geöffnet? Wenn es sich zufällig um eine XML- oder XAML-Datei handelt, bin ich mir nicht sicher, ob dies funktionieren wird, da ich glaube, dass dies nur für HTML-Editoren funktioniert.
D-Jones
1
@WildJoe siehe hier stackoverflow.com/a/34799783/1647159 und hier stackoverflow.com/a/22274313/1647159 Warnung, Sie könnten mit einer verschlechterten Erfahrung enden
D-Jones
65

Ich weiß, dass dies alt ist und Sie haben wahrscheinlich schon die Antwort gefunden, aber ich möchte nur für diejenigen, die es vielleicht nicht wissen, hinzufügen, dass dies in VS 2010 möglich ist:

  1. Wählen Sie den Code aus, den Sie umgeben möchten.
  2. Tun Sie ctrl-k ctrl-s(oder klicken Sie mit der rechten Maustaste und wählen Sie Surround with....
  3. Es stehen verschiedene HTML-Snippets zur Auswahl.

Sie können Ihre eigenen SurroundsWith-Snippets erstellen, wenn Sie nicht finden, wonach Sie suchen:

  1. Klicken Sie auf Fileund dann auf Newund wählen Sie einen Dateityp von XML.
  2. FileKlicken Sie im Menü auf Save.
  3. Wählen Sie im Save asFeld aus All Files (*.*).
  4. Geben Sie in das File nameFeld einen Dateinamen mit der .snippetDateinamenerweiterung ein.
  5. Klicken Sie auf Save.

Geben Sie so etwas wie das folgende Beispiel in die XML-Datei ein:

<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. Öffnen Sie Tools> Code Snippets Manager.
  2. Klicken Sie auf Importund navigieren Sie zu dem gerade erstellten Snippet.
  3. Überprüfen My HTML Snippetsund klicken Finishund dann OK.

Sie haben dann Ihr glänzendes neues HTML-Snippet zum Einwickeln zur Verfügung!

Bradley Mountford
quelle
2
Wenn Sie sagen "Klicken Sie auf XML-Datei und dann auf Öffnen." Was meinst du? Klicken Sie auf welche XML-Datei?
Benutzer
Das ist ein toller Tipp! Kennst du das Gegenteil? Wie können Sie umgebende Tags entfernen?
Trio Cheung
@ Benutzer ... Ich behebe es jetzt. Es sollte nicht "Click XML File ...", sondern nur "Click File ..." stehen.
Watki02
3
Das funktioniert, aber es ist nicht gerade eine Abkürzung, sondern eher eine Abkürzung
Pixelomo
@AlanSutherland Das erste Mal, wenn Sie es einrichten, ja. Sobald es eingerichtet ist, ist es eine einfache Sache von Strg-K Strg-S und Auswahl der Vorlage.
Bradley Mountford
42

Wenn Sie Web Essentials installiert haben, können Sie eine Auswahl mit Umschalt + Alt + W mit einem Tag umgeben.

zhech
quelle
6
Das Tolle daran ist, dass Sie nur das Tag hervorheben müssen oder nur den Cursor im Tag haben müssen. Der Text muss nicht explizit ausgewählt werden.
Alex KeySmith
8

Ich weiß, dass dies ein uralter Thread ist, aber nachdem ich auf das Problem gestoßen bin, bin ich endlich dazu gekommen, mein eigenes zu machen, und da dies eines der ersten Ergebnisse in Google ist, dachte ich, dass die Leute dies nützlich finden könnten.

Eigentlich war es ziemlich einfach, ich habe nur aus einem vorhandenen HTML-Snippet kopiert und mich in den Literalen bewegt. Das folgende Snippet wird von einem generischen HTML-Tag umgeben, fordert zur Eingabe des Tags auf und fügt es sowohl in das öffnende als auch in das schließende Tag ein.

<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
quelle
7

In dieser Situation tippe ich oft zuerst das schließende Tag und dann das öffnende Tag. Dies verhindert, dass die IDE "hilft", indem das schließende Tag dort eingefügt wird, wo ich es nicht möchte. Ich bin aber auch an einer besseren Lösung interessiert.

Tvanfosson
quelle
3
+1. Wirklich erstaunlich, wie kompliziert dies für eine so einfache Funktion ist.
John Hargrove
Fast 8 Jahre später benutze ich immer noch das gleiche
Jack
7

Für diejenigen, die Visual Studio 2017 verwenden: Klicken Sie mit der rechten Maustaste auf einen html/ cshtmlBereich oder wählen Sie einige Elemente aus, die umbrochen werden sollen. Wrap With <div>Die Liste enthält eine Schaltfläche. Geben Sie hier die Bildbeschreibung ein

Burak Karakuş
quelle
1
Dies ist ein Duplikat der aktuell ausgewählten Antwort (mit shift+alt+w).
Zze
Was sollte ich dann tun? Übrigens hatte Visual Studio 2015 kein solches UI-Element, wie ich es in meiner Antwort beim Schreiben gezeigt habe. Ich wollte nur zeigen, dass es in Visual Studio 2017 ein UI-Element gibt, das dasselbe mit Mausklicks macht.
Burak Karakuş
2

Nichts, was mir bekannt ist, aber ein Makro zu schreiben, um es in ein beliebiges Tag zu verpacken, sollte nicht schwierig sein. Ich habe eine ähnliche, die meine Auswahl in einen Regionsblock einschließt.

Ian Jacobs
quelle