Mari kita bincangkan tentang cara menambah kekunci pintasan Emmet dalam VSCode

Artikel ini akan membawa anda melalui alat Emmet dalam VSCode dan memperkenalkan kaedah mengikat kekunci panas Emmet dalam VSCode untuk meningkatkan kecekapan penyuntingan HTML. Saya harap ia akan membantu semua orang.

Emmet ialah alat yang secara automatik mengembangkan coretan kod ke dalam HTML. Ia termasuk dalam Kod VS. [Pembelajaran yang disyorkan: "tutorial pengenalan vscode"]

Sebagai contoh, serpihan berikut:

div.someClass>span*5

akan dikembangkan kepada:

<div class="someClass">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

Emmet juga Menyediakan beberapa pintasan lain untuk meningkatkan kecekapan pembangunan HTML.

Disyorkan: Sintaks Emmet

Tambah pintasan Kod VS

gabungan kekunci : Ctrl K dan Ctrl S Buka tetingkap pintasan papan kekunci dan masukkan Emmet dalam kotak carian untuk mengetahui operasi khusus yang Emmet terbina dalam boleh mengikat kekunci panas.

Tekan dan tahan Ctrl Shift p untuk membuka panel arahan, taip shortcut dan cari pilihan untuk membuka pintasan papan kekunci .

Fail pengikatan kunci keybindings.json akan dibuka:

[]

Setiap pintasan tersuai yang ditambahkan ditunjukkan dalam fail ini dan mempunyai struktur berikut:

{
  "key": "<key combination>",
  "command": "<command to run>"
}

Arahan Emmet tersedia dalam Kod VS

Arahan yang tersedia untuk Emmet adalah seperti berikut:

editor.emmet.action.balanceIn
editor.emmet.action.balanceOut
editor.emmet.action.decrementNumberByOne
editor.emmet.action.decrementNumberByOneTenth
editor.emmet.action.decrementNumberByTen
editor.emmet.action.evaluateMathExpression
editor.emmet.action.incrementNumberByOne
editor.emmet.action.incrementNumberByOneTenth
editor.emmet.action.incrementNumberByTen
editor.emmet.action.matchTag
editor.emmet.action.mergeLines
editor.emmet.action.nextEditPoint
editor.emmet.action.prevEditPoint
editor.emmet.action.reflectCSSValue
editor.emmet.action.removeTag
editor.emmet.action.selectNextItem
editor.emmet.action.selectPrevItem
editor.emmet.action.splitJoinTag
editor.emmet.action.toggleComment
editor.emmet.action.updateImageSize
editor.emmet.action.updateTag
editor.emmet.action.wrapIndividualLinesWithAbbreviation
editor.emmet.action.wrapWithAbbreviation

Berikut ialah beberapa contoh. Kami menggunakan gabungan alt e dan alt * Kekunci mungkin bercanggah dengan sistem dan perisian lain. Cuma laraskannya mengikut keselesaan anda.

Smooth In/Smooth Out — Mencari label atau kandungan label dalam sempadan daripada kedudukan tanda tanda semasa dan memilihnya.

[
  {
    "key": "alt+e alt+i",
    "command": "editor.emmet.action.balanceIn"
  },
  {
    "key": "alt+e alt+o",
    "command": "editor.emmet.action.balanceOut"
  }
]

Pergi ke gandingan tag — melompat antara tag elemen pembukaan dan penutup.

[
  {
    "key": "alt+e alt+e",
    "command": "editor.emmet.action.matchTag"
  }
]

Alih Keluar Teg — Mengalih keluar teg daripada pepohon HTML tetapi mengekalkan HTML dalamannya.

[
  {
    "key": "alt+e alt+d",
    "command": "editor.emmet.action.removeTag"
  }
]

Selain itu, jika anda tidak mahu mengkonfigurasi kekunci pintas sendiri, anda boleh memasang sambungan Emmet Keybindings, iaitu satu set pengikatan kekunci Emmet untuk Kod VS. Ia boleh digunakan sebagai kumpulan pengikat kekunci yang dipratentukan sekiranya anda tidak tahu kunci mana yang hendak dipetakan.

Maklumat lanjut

Terdapat juga banyak singkatan yang berguna, seperti Balut dengan Singkatan dan Alih Keluar Tag, semaknya keluar untuk mengetahui lebih lanjut.

Untuk pengetahuan lanjut tentang VSCode, sila lawati: tutorial vscode!

Atas ialah kandungan terperinci Mari kita bincangkan tentang cara menambah kekunci pintasan Emmet dalam VSCode. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!