ฉันจะรวมส่วนที่เลือกด้วยแท็ก HTML ใน Visual Studio ได้อย่างไร


110

นี่เป็นคำถามพื้นฐานที่สุดในโลก แต่ถ้าฉันหาคำตอบได้

มีแป้นพิมพ์ลัดที่มาจาก Visual Studio หรือผ่าน Code Rush หรือปลั๊กอินของบุคคลที่สามอื่น ๆ เพื่อรวมการเลือกปัจจุบันด้วยแท็ก HTML หรือไม่ ฉันเบื่อที่จะพิมพ์แท็กเปิดตัดแท็กปิดที่วางผิดตำแหน่งไปยังคลิปบอร์ดเลื่อนเคอร์เซอร์แล้ววางที่ส่วนท้ายของตำแหน่งนั้น

ปรับปรุง: นี่คือวิธีการจับ TextMate รอบคัดเลือกกับแท็ก ตรงไปตรงมาฉันตะลึงที่ Visual Studio ดูเหมือนจะไม่มีคุณสมบัติที่คล้ายกัน การสร้างมาโครหรือข้อมูลโค้ดสำหรับทุกแท็กที่เป็นไปได้ที่ฉันอาจต้องการใช้ดูเหมือนจะไร้สาระ


คุณสามารถเขียนมาโครในลักษณะที่จะแจ้งให้คุณใส่แท็กเพื่อปิดการเลือกด้วย ฉันสามารถขุดมาโครได้ถ้าคุณต้องการ?
Ian Jacobs

ใครพบวิธีทำหรือยัง
SamWM

คำตอบ:


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. Do ctrl-k ctrl-s(หรือคลิกขวาแล้วเลือกSurround with....
  3. มีข้อมูลโค้ด HTML ให้เลือกมากมาย

คุณสามารถสร้าง SurroundsWith ของคุณเองด้วยตัวอย่างหากคุณไม่พบสิ่งที่คุณกำลังมองหา:

  1. คลิกFileแล้วคลิกNewและเลือกประเภทไฟล์XML.
  2. ในเมนูคลิกFileSave
  3. ในกล่องเลือกSave asAll 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และคลิกแล้วFinishOK

จากนั้นคุณจะมีตัวอย่าง HTML ใหม่ของคุณสำหรับการห่อสิ่งของ!


2
เมื่อคุณพูดว่า "คลิกไฟล์ XML แล้วคลิกเปิด" คุณหมายถึงอะไร? คลิกไฟล์ xml อะไร
ผู้ใช้

นั่นเป็นเคล็ดลับที่ยอดเยี่ยม! คุณรู้จักการย้อนกลับหรือไม่? คุณจะลบแท็กโดยรอบได้อย่างไร
Trio Cheung

@ ผู้ใช้ ... ฉันกำลังแก้ไขอยู่ ไม่ควรพูดว่า "Click XML File ... " เพียงแค่ "Click File ... "
Watki02

3
สิ่งนี้ใช้งานได้ แต่ไม่ใช่ทางลัดอย่างแน่นอนทางลัดมากกว่า
Pixelomo

@AlanSutherland ครั้งแรกที่ตั้งใช่ เมื่อตั้งค่าแล้วก็เป็นเรื่องง่าย ๆ ของ ctrl-k ctrl-s และเลือกเทมเพลต
Bradley Mountford

50

แท็ก> ประเภท - - Ctrl-X> Ctrl-V ยังคงเป็นวิธีที่เร็วที่สุดที่ผมเคยเห็นตามที่กล่าวไว้ในคำตอบนี้: https://stackoverflow.com/a/5109994/486325


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>

7

เมื่อเผชิญกับสถานการณ์นี้ฉันมักจะพิมพ์แท็กปิดก่อนจากนั้นจึงพิมพ์แท็กเปิด ซึ่งจะป้องกันไม่ให้ IDE "ช่วย" โดยการใส่แท็กปิดในที่ที่ฉันไม่ต้องการ ฉันยังสนใจวิธีแก้ปัญหาที่ดีกว่าด้วย


3
+1. น่าทึ่งจริงๆว่าความซับซ้อนนี้เป็นอย่างไรสำหรับคุณสมบัติง่ายๆเช่นนี้
John Hargrove

เกือบ 8 ปีต่อมาฉันก็ยังใช้แบบเดิม
แจ็ค

7

สำหรับผู้ที่ใช้ Visual Studio 2017: คลิกขวาที่html/ cshtmlพื้นที่หรือเลือกองค์ประกอบบางอย่างที่จะตัดจะมีWrap With <div>ปุ่มในรายการ ใส่คำอธิบายภาพที่นี่


1
คำตอบนี้ซ้ำกับคำตอบที่เลือกในปัจจุบัน (ใช้shift+alt+w)
Zze

ฉันควรทำอย่างไร? อย่างไรก็ตาม Visual Studio 2015 ไม่มีองค์ประกอบ UI ดังที่ฉันแสดงไว้ในคำตอบของฉันเมื่อฉันเขียนฉันแค่ต้องการแสดงให้เห็นว่ามีองค์ประกอบ UI ที่จะทำสิ่งเดียวกันผ่านการคลิกเมาส์ใน Visual Studio 2017
Burak Karakuş

2

ฉันไม่ทราบอะไรเลย แต่การเขียนมาโครเพื่อรวมไว้ในแท็กที่คุณต้องการไม่ควรยาก ฉันมีสิ่งที่คล้ายกันซึ่งจะรวมการเลือกของฉันไว้ในบล็อกภูมิภาค

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.