Bagaimana cara pembungkus tag dalam kode VS?

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

Emmet Tertanam dapat melakukan trik:

1. Pilih teks (opsional)
2. Buka palet perintah (biasanya Ctrl+ Shift+ P)
3. Menjalankan Emmet: Wrap with Abbreviation
4. Masukkan tag div(atau singkatan .wrapper>p)
5. 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

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

1. Luncurkan VS Code Buka Cepat ( Ctrl+ P)

2. rekatkan ext install htmltagwrapdan masukkan

3. pilih HTML

4. tekan Alt+ W( Option+ Wuntuk Mac).

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)

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

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.