Visual StudioでHTMLタグを使用して選択範囲をラップするにはどうすればよいですか?


110

これは世界で最も基本的な質問のようですが、答えを見つけることができれば、のろわれます。

現在の選択をHTMLタグでラップするためのキーボードショートカットは、Visual Studioにネイティブであるか、Code Rushまたは他のサードパーティのプラグインを介していますか?私は、開始タグを入力し、誤って配置された終了タグをクリップボードに切り取り、カーソルを移動し、それが属する最後に貼り付けるのにうんざりしています。

更新: これは、TextMateがタグで選択範囲を囲む方法です。率直に言って、Visual Studioには同様の機能がないように思えます。使用する可能性のある考えられるすべてのタグにマクロまたはスニペットを作成するのは、ばかげているようです。


選択をラップするタグを要求するようにマクロを書くことができます。必要に応じて、マクロを掘り出すことができますか?
イアンジェイコブス

誰でもこれを行う方法をまだ見つけましたか?
SamWM

回答:


132

Visual Studio 2015には、現在の選択をdivでラップする新しいショートカットShift + Alt + Wが付属しています。このショートカットはテキスト「div」を選択したままにし、任意のタグにシームレスに変更可能にします。これと自動で終了タグを置き換えることで、迅速な解決が可能になります。

更新

このショートカットはVisual Studio 2017でも利用できますが、 "ASP.NET and Web Development"ワークロードがインストールされている必要があります。

Shift+Alt+W > p > Enter

VS2017でも引き続き適用されます。
Zze

VS 2017では私には機能しません。これは、Webの必需品がある場合にのみ機能すると思います。
RayLoveless 2017

1
@RayLoveless ctrl-k ctrl-sは、スニペットで囲むために機能します。ただし、選択はスニペットリスト(divではない)から行う必要があり、スニペットは編集する追加のフィールドを提供し、上記のワークフローを中断します。カスタムスニペットを主張することもできますが、すぐに使用できるソリューションを好みます。
Dジョーンズ

1
@WildJoeどのような種類のファイルを開いていますか?たまたまそれがxmlまたはxamlファイルである場合、これが動作するかどうかはわかりません。これはHTMLエディターでのみ機能すると思います。
D-ジョーンズ

1
こちらをご覧@WildJoe stackoverflow.com/a/34799783/1647159、ここstackoverflow.com/a/22274313/1647159警告を、あなたは、劣化した経験で終わるかもしれない
D-ジョーンズ

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

@ユーザー...私は今それを修正しています。「Click XML File ...」ではなく、「Click File ...」とだけ表示されます。
Watki02 2013年

3
これは機能しますが、正確にはショートカットではなく、より詳細な説明です
Pixelomo

@AlanSutherland初めて設定したときはそうです。設定したら、ctrl-k ctrl-sを押してテンプレートを選択するだけです。
Bradley Mountford 14



8

私はこれが古いスレッドであることを知っていますが、問題に直面して、ようやく自分で作成することにしました。これはGoogleでの最初の結果の1つであるため、これが役立つと思います。

実際、それは非常に簡単でした。既存の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。これがそのような単純な機能にとってどれほど複雑であるかは本当に驚くべきことです。
John Hargrove 2013

ほぼ8年後、私は今でも同じものを使用しています
ジャック

7

Visual Studio 2017を使用する場合:html/ cshtml領域を右クリックするか、ラップする要素を選択するWrap With <div>と、リストにボタンがあります。 ここに画像の説明を入力してください


1
これは、現在選択されている回答の複製です(を使用shift+alt+w)。
Zze

どうしたらいいですか?私は私が書いていた私の答えに示したような方法では、Visual Studioの2015年にはそのようなUI要素を持っていた、私はVisual Studioの2017年にマウスのクリックを経由して同じことを行うためのUI要素があることを示したかった
ブラクKarakuş

2

私が知っていることは何もありませんが、必要なタグでそれをラップするマクロを書くのは難しくありません。選択範囲をリージョンブロックでラップする同様のものがあります。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.