Bagaimana cara membungkus seleksi dengan tag HTML di Visual Studio?


110

Ini sepertinya pertanyaan paling mendasar di dunia, tetapi terkutuk jika saya dapat menemukan jawabannya.

Apakah ada pintasan keyboard, baik asli ke Visual Studio atau melalui Code Rush atau plugin pihak ketiga lainnya, untuk membungkus pilihan saat ini dengan tag HTML? Saya lelah mengetik tag pembuka, memotong tag penutup yang salah tempat ke clipboard, menggerakkan kursor, dan menempelkannya di ujung tempatnya.

Pembaruan: Ini adalah cara TextMate menangani pemilihan dengan tag . Terus terang, saya terkejut bahwa Visual Studio tampaknya tidak memiliki fitur serupa. Membuat makro atau cuplikan untuk setiap tag yang memungkinkan yang mungkin ingin saya gunakan tampaknya tidak masuk akal.


Anda dapat menulis makro sedemikian rupa sehingga akan meminta tag untuk membungkus seleksi. Saya bisa menggali makro saya jika Anda mau?
Ian Jacobs

Adakah yang menemukan cara untuk melakukan ini?
SamWM

Jawaban:


132

Visual Studio 2015 hadir dengan pintasan baru, Shift + Alt + W, yang membungkus pilihan saat ini dengan div. Pintasan ini membiarkan teks "div" dipilih, membuatnya dapat diubah dengan mulus ke tag yang diinginkan. Ini digabungkan dengan penggantian tag akhir otomatis membuat solusi cepat.

MEMPERBARUI

Pintasan ini tersedia di Visual Studio 2017 juga, tetapi Anda harus memiliki beban kerja "ASP.NET dan Pengembangan Web" yang diinstal.

Contoh

Shift+Alt+W > p > Enter

Masih berlaku di VS2017.
Zze

tidak bekerja untuk saya di VS 2017. Saya pikir ini hanya berfungsi jika Anda memiliki kebutuhan web.
RayLoveless

1
@RayLoveless ctrl-k ctrl-s berfungsi untuk saya mengelilingi dengan potongan. Namun pilihan Anda harus berasal dari daftar cuplikan (tanpa div), dan cuplikan menyediakan bidang tambahan yang akan diedit yang menghentikan alur kerja yang dijelaskan di atas. Seseorang dapat memperdebatkan cuplikan khusus tetapi saya lebih suka solusi di luar kotak!
D-Jones

1
@WildJoe jenis file apa yang Anda buka? jika itu adalah file xml atau xaml secara kebetulan, saya tidak yakin ini akan berhasil, karena saya yakin ini hanya berfungsi untuk editor HTML.
D-Jones

1
@WildJoe lihat di sini stackoverflow.com/a/34799783/1647159 dan di sini stackoverflow.com/a/22274313/1647159 Peringatan, Anda mungkin akan mendapatkan pengalaman yang terdegradasi
D-Jones

65

Saya tahu ini sudah lama dan Anda mungkin telah menemukan jawabannya sekarang, tetapi saya hanya ingin menambahkan demi mereka yang mungkin tidak tahu bahwa ini mungkin terjadi di VS 2010:

  1. Pilih kode yang ingin Anda lingkari.
  2. Lakukan ctrl-k ctrl-s(atau klik kanan dan pilih Surround with....
  3. Ada berbagai macam potongan HTML untuk dipilih.

Anda dapat membuat SurroundsWith Anda sendiri dengan cuplikan jika Anda tidak menemukan apa yang Anda cari:

  1. Klik Filedan kemudian klik New, dan pilih jenis file XML.
  2. Di Filemenu, klik Save.
  3. Di Save askotak, pilih All Files (*.*).
  4. Di dalam File namekotak, masukkan nama file dengan .snippetekstensi nama file.
  5. Klik Save.

Masukkan sesuatu seperti contoh berikut di file 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. Buka Tools> Code Snippets Manager.
  2. Klik Importdan ramban ke cuplikan yang baru saja Anda buat.
  3. Periksa My HTML Snippetsdan klik Finishlalu OK.

Anda kemudian akan memiliki cuplikan HTML baru yang mengkilap tersedia untuk membungkus barang!


2
Saat Anda mengatakan "Klik File XML lalu klik Buka." Maksud kamu apa? klik file xml apa?
Pengguna

Itu tip yang bagus! Apakah Anda tahu kebalikannya? Bagaimana Anda bisa menghapus tag di sekitarnya?
Trio Cheung

@ Pengguna ... Saya sedang memperbaikinya sekarang. Seharusnya tidak tertulis "Klik File XML ...", hanya "Klik File ...".
Watki02

3
ini berfungsi tetapi itu bukan jalan pintas, lebih merupakan jalan pintas
Pixelomo

@AlanSutherland Pertama kali Anda mengaturnya, ya. Setelah itu di set up maka tinggal ctrl-k ctrl-s dan pilih template.
Bradley Mountford



8

Saya tahu ini adalah utas kuno tetapi setelah menemukan masalah, saya akhirnya memutuskan untuk membuatnya sendiri dan karena ini adalah salah satu hasil pertama di Google, saya pikir orang mungkin menganggap ini berguna.

Sebenarnya itu cukup mudah, saya hanya menyalin dari potongan HTML yang ada dan berpindah-pindah literal. Cuplikan berikut akan dikelilingi dengan tag HTML umum, yang meminta tag dan akan meletakkannya di tag pembuka dan penutup.

<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

Saat dihadapkan pada situasi ini, saya sering mengetikkan tag penutup terlebih dahulu, baru kemudian tag pembuka. Ini mencegah IDE "membantu" dengan memasukkan tag penutup di tempat yang tidak saya inginkan. Saya juga tertarik dengan solusi yang lebih baik.


3
+1. Sungguh menakjubkan betapa rumitnya hal ini untuk fitur yang begitu sederhana.
John Hargrove

Hampir 8 tahun kemudian saya masih menggunakan yang sama
Jack

7

Bagi mereka yang menggunakan Visual Studio 2017: Klik kanan pada area html/ cshtml, atau pilih beberapa elemen untuk dibungkus, ada Wrap With <div>tombol di daftar. masukkan deskripsi gambar di sini


1
Ini adalah duplikat dari jawaban yang saat ini dipilih (menggunakan shift+alt+w).
Zze

Apa yang harus saya lakukan? Omong-omong, Visual Studio 2015 tidak memiliki elemen UI seperti yang saya tunjukkan dalam jawaban saya ketika saya menulis, saya hanya ingin menunjukkan bahwa ada elemen UI untuk melakukan hal yang sama melalui klik mouse di Visual Studio 2017.
Burak Karakuş

2

Tidak ada yang saya ketahui, tetapi menulis makro untuk membungkusnya dengan tag apa pun yang Anda inginkan seharusnya tidak sulit. Saya memiliki yang serupa yang akan membungkus pilihan saya di blok wilayah.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.