Bagaimana cara pembungkus tag dalam kode VS?

170

Saya ingin membungkus html yang saya pilih dalam tag dalam kode VS. Bagaimana aku melakukan itu?

html visual-studio-code

— hannes neukermans
sumber

1

Salah satu alasan saya tidak dapat sepenuhnya pindah ke VSCode dan membuang Sublime.

— Budji

3

@budji Ini adalah fitur bawaan dengan emmet ... Apa pun yang Anda inginkan juga merupakan ekstensi sekarang dan jika tidak, Anda selalu dapat membuatnya sendiri.

— James Coyle

Saya suka pertanyaan ini dan saya tahu dan panggilan ekstensi (Emmet Wrap with Abbrevation), tetapi siapa pun akan tahu bagaimana melakukan tindakan terbalik. Misalnya: tulis dulu <p> ... </p> dan sertakan di dalam <u> ** </u> dengan hasil ini <p> ... <u> ** </u> ... </ p>

— Jmainol

341

Emmet Tertanam dapat melakukan trik:

Pilih teks (opsional)
Buka palet perintah (biasanya Ctrl+ Shift+ P)
Menjalankan Emmet: Wrap with Abbreviation
Masukkan tag div(atau singkatan .wrapper>p)
Memukul Enter

Perintah dapat ditugaskan ke keybinding.

Hal ini bahkan mendukung argumen yang lewat:

{
    "key": "ctrl+shift+9",
    "command": "editor.emmet.action.wrapWithAbbreviation",
    "when": "editorHasSelection",
    "args": {
        "abbreviation": "span"
    }
},

Gunakan seperti ini:

span.myCssClass
span#myCssId
b
b.myCssClass

— Alex
sumber

3

marketplace.visualstudio.com/…

— Alex

4

Ini seharusnya jawabannya, emmet sudah terpasang di vscode

— Nathan

15

Ctrl+ padalah goToFile. Palet perintah adalah Ctrl+ Shift+ P.

— Alex

1

Untuk BEJ, harus menambahkan langkah tambahan ini: github.com/Microsoft/vscode/issues/4962#issuecomment-323880988

— Gezim

1

Dengan VSCode 1.35.0 (dan mungkin sebelumnya) ini bekerja di luar kotak dengan JSX - tidak perlu untuk konfigurasi tambahan

— davnicwil

98

Pencarian cepat di pasar VSCode: https://marketplace.visualstudio.com/items/bradgashler.htmltagwrap .

Luncurkan VS Code Buka Cepat ( Ctrl+ P)
rekatkan ext install htmltagwrapdan masukkan
pilih HTML
tekan Alt+ W( Option+ Wuntuk Mac).

— hannes neukermans
sumber

Anda mungkin bermaksud memilih Instal pada langkah 3.

— Samir

1

"Untuk menggunakan, pilih sepotong kode dan tekan" Alt + W "(" Option + W "untuk Mac)." Cukup sederhana! Kecuali itu tidak berfungsi. Saya mencoba versi 0.0.3 dengan VS Code 1.16.1. Ini hampir bekerja. Ia mencoba untuk membungkus seleksi dalam <p></p>tag, bukan generik <div></div>yang akan tampak lebih waras untuk dilakukan. Yang lebih buruk adalah gagal. Ini menghasilkan keluaran seperti<p><p>My selected text.</p>

— Samir

1

Saya mencoba ekstensi lain seperti itu. Tapi sejauh ini saya tidak beruntung menemukan yang berhasil. Yang ini paling dekat dengan solusi yang berfungsi. Saya mencoba membungkus 0.0.1 oleh David Taylor, dan Ctrl + i tidak bekerja sama sekali.

— Samir

1

UPDATE: ekstensi sekarang berfungsi dengan benar dan mengatasi masalah di atas. Tidak ada lagi tag duplikat, dan sekarang Anda dapat menyesuaikan tag yang ingin Anda masukkan melalui suatu pengaturan. Jadi, jika Anda ingin tag menjadi <div>Anda tambahkan pengaturan berikut "htmltagwrap.tag": "div",.

— bgashler1

itu implementasi yang sangat buruk - berfungsi untuk satu tag, alangkah baiknya memiliki sesuatu yang mirip dengan notepad ++ html plugin di mana Anda dapat membungkus seleksi dengan tag dari pilihan tag yang dapat dikonfigurasi

— Sasha Bond

37

Karena saya tidak bisa berkomentar, saya akan memperluas jawaban Alex yang fantastis.

Jika Anda ingin pengalaman seperti Sublime dengan pembungkus membuka Ekstensi Keymap (Preferensi> Ekstensi Keymap [ Cmd+ K Cmd+ M]) dan tambahkan objek berikut:

{
    "key": "alt+w",
    "command": "editor.emmet.action.wrapIndividualLinesWithAbbreviation",
    "when": "editorHasSelection && editorTextFocus"
}

Yang akan mengikat perintah bungkus Emmet ke Alt+ Wketika teks dipilih

(Maaf hanya untuk instruksi OSX)

— Andrew Lewis
sumber

7

Inilah cara saya menambahkan pintasan: Preferensi> Pintasan Keyamp; ... lalu cari bungkus emmet; ... klik + untuk menambahkan pintasan Anda; ... :)

— Luckylooke

1

selain itu saya menambahkan && resourceLangId == 'html' hanya untuk halaman web

— surpavan

@surpavan, bagus tapi bisa juga berguna untuk memiliki tipe file lain misalnya file template html

— Andrew Lewis

1

@AndrewLewis - ya, itu sebabnya saya menyimpannya dalam bahasa id dan bukan ekstensi file (files.associations).

— surpavan

Shift + Alt + W gratis untuk windows.

— Timofeus

24

Buka Pintasan Keyboard dengan mengetik ⌘ Command+ k ⌘ Command+ satauCode > Preferences > Keyboard Shortcuts
Tipe emmet wrap
Klik tanda plus di sebelah kiri "Emmet: Wrap with Abbreviation"
Ketik ⌥ Option+w
tekan Enter

— Adam Gonzales
sumber

3

imo ada jawaban yang lebih baik untuk ini menggunakan Cuplikan

Buat cuplikan dengan definisi seperti ini:

"name_of_your_snippet": {
    "scope": "javascript,html",
    "prefix": "name_of_your_snippet",
    "body": "<${0:b}>$TM_SELECTED_TEXT</${0:b}>"
}

Kemudian ikat ke kunci di keybindings.json Misal seperti ini:

{ 
    "key": "alt+w",
    "command": "editor.action.insertSnippet",
    "args": { "name": "name_of_your_snippet" }
}

Saya pikir ini akan memberi Anda hasil yang persis sama dengan htmltagwrap tetapi tanpa harus menginstal ekstensi.

Ini akan menyisipkan tag di sekitar teks yang dipilih, default untuk <b>menandai & memilih tag sehingga mengetik memungkinkan Anda mengubahnya.

Jika Anda ingin menggunakan tag default yang berbeda hanya mengubah bdalam bodymilik potongan.

— Unifex
sumber

Ini bagus, tetapi Emmet dapat melakukan ini dan banyak lagi, seperti menghasilkan HTML bersarang, atribut, dan daftar. Emmet keluar dari kotak dengan kode VS.

— Andrew Lewis

Saya tidak mengerti downvotes. Tentu saja, Emmet lebih kompleks dan saya dapat melakukan banyak hal tetapi untuk membungkus pilihan teks dengan tag solusi ini sangat bagus! Saat Anda membungkus, Anda tidak perlu menggerakkan mata Anda ke bagian atas layar / jendela Anda. Itu terjadi di sana, di mana Anda sudah berada karena Anda memilih teks! Ini adalah kasus penggunaan yang cukup umum dan solusi cepat dengan waktu proses yang rendah!

— Andrei V

Saya sangat senang dengan ini namun saya tidak bisa membuatnya bekerja: /

— Icaro