Parhaat VS-koodin HTML-pikakuvakkeet

Visual Studio Code (VS Code) tarjoaa monia arvokkaita ominaisuuksia ja pikakuvakkeita HTML-kehityksen yksinkertaistamiseksi. Nämä ominaisuudet ovat käteviä ja antavat kehittäjille mahdollisuuden käyttää vähemmän aikaa koodin kirjoittamiseen. Vaikka et ehkä käytä kaikkia saatavilla olevia pikanäppäimiä, tärkeimpien pikanäppäimien oppiminen voi auttaa. Tämä artikkeli kattaa joitain kätevimmistä pikanäppäimistä, jotka on otettava huomioon HTML-koodauksessa.

Emmet Lyhenteet

VS Code tukee Emmetiä. Tämä työkalu helpottaa CSS- ja HTML-koodin kirjoittamista pikakuvakkeiden avulla. HTML-perusrakenne laajenee, jos kirjoitat huutomerkin (!) ja painat sitten sarkainta.

Emmet esittelee laajennusominaisuudet, jotka vähentävät HTML-koodaukseen kuluvaa aikaa Visual Studio Codessa. Voit käyttää tätä myös muissa muokkausohjelmissa. Pikalauseiden kirjoittaminen johtaa täydelliseen HTML-rakenteisiin.

• Emmetin peruslyhenteet : Nämä lyhenteet laajentavat joitain yleisesti käytettyjä elementtejä. Kun kirjoitat div ja painat sitten Tab, laajenee muotoon, kun taas p laajenee muotoon

  . Jos kirjoitat ul>li*3 , se laajenee luetteloksi, jossa on kolme kohdetta.

• Sisäkkäiset elementit : > voidaan käyttää alielementtien määrittämiseen. Esimerkiksi div>h1 laajenee muotoon ja luo elementin, jossa on

  elementti sisällä.

• Kertominen : Kertominen luo useita elementtejä. *3 lisääminen järjestettyyn luetteloon luo luettelon, jossa on kolme kohdetta.
• Attribuutit : Lisää attribuutteja HTML-elementteihin hakasulkeissa. Esimerkiksi [href=”#”] muuttuu , mikä luo ankkurielementin, jossa on href-attribuutti.
• CSS:n kaltainen syntaksi : Syntaksi on saanut inspiraationsa CSS-valitsimista, mikä tekee siitä tutun ja intuitiivisen web-kehittäjille.
• Matemaattiset lausekkeet : Voit suorittaa joitain matemaattisia perustoimintoja lyhenteiden sisällä. Esimerkiksi div>ul>li.item$*3 laajenee muotoon

  elementti, joka sisältää järjestetyn luettelon, jossa on kolme luettelokohdetta luokan nimillä item1, item2 ja item3.

Lyhenteet laajennetaan kirjoittamalla ja painamalla sitten sarkainpainiketta . Jos lyhenteelläsi on muutama kelvollinen selitys, kierrä ne painamalla Tab- vaihtoehtoa uudelleen. Emmet-lyhenteet eivät liity VS-koodiin. Voit käyttää niitä muissa Emmetiä tukevissa muokkausohjelmissa.

Tunnisteen kääre

Valitse rivi tai komento ja paina sitten Ctrl+Shift+G, jos käytät Linuxia tai Windowsia. Jos käytät Macia, käytä Cmd+Shift+G . Tämä pikanäppäin rivittää valitun sisällön HTML-tunnisteella.

Tämä on kätevä ominaisuus VS Codessa. Se on hyödyllinen, kun sinun on liitettävä sisällön sisältö tunnisteisiin tai kun sinun täytyy jäsentää koodia. Valinta voi olla yksi rivi, useita rivejä tai koodilohko.

Toinen vaihtoehto on napsauttaa valittua koodia hiiren kakkospainikkeella ja valita sitten pikavalikosta Kääri lyhenteellä. Kun käynnistät tagin rivityskomennon, näkyviin tulee kehote, jossa voit valita haluamasi HTML-tunnisteen nimen. Jos kirjoitat esimerkiksi div , a

elementti kääri valitun koodin.

Tunnisteiden rivitys auttaa merkitsemään ja jäsentämään koodia kirjoittamatta manuaalisesti avaus- ja sulkemistunnisteita. Tämä säästää paljon aikaa ja vähentää syntaksivirheiden esiintymistä.

Muotoilu

HTML-koodin muotoilu on hyvä tapa ylläpitää johdonmukaisuutta ja luettavuutta projekteissa. VS Codessa sisäänrakennetut muotoiluasetukset sallivat toiminnon tapahtuvan automaattisesti HTML:ssä ennalta määritettyjen sääntöjen mukaisesti.

HTML-muotoilun pikanäppäin on Shift+Alt+F Windowsissa ja Linuxissa. Shift+Option+F toimii macOS:ssä. 

Pikakuvake voi muotoilla koko HTML-dokumentin tai osan koodista. Kun painat sitä, muotoilusääntöjä sovelletaan. Sisennysvälit ja rivinvaihdot säädetään vastaavasti.

Voit myös muotoilla koodin automaattisesti VS Codessa .

Kommentointi

Voit kommentoida tai poistaa kommentin joko yhdelle riville tai useille valituille koodiriveille samanaikaisesti. Jos kommentti on jo olemassa, pikakuvake poistaa kommentin, ja jos sitä ei ole kommentoitu, kommentit lisätään. HTML:n kommentit on suljettu tageihin .

Koodinavigointi

Tämä viittaa kykyyn liikkua koodikannan eri osien välillä tai siirtyä suoraan HTML-attribuuttien tai -tunnisteiden määritelmiin. Ctrl+]- vaihtoehdon käyttäminen Linuxissa ja Windowsissa tunnisteiden selaamiseen. Mac-käyttäjät voivat käyttää Cmd+] siirtyäkseen elementin sulkevaan tunnisteeseen. Siirry avaustunnisteeseen painamalla Ctrl+[ (Windows ja Linux) tai Cmd +[ (Mac).

Voit siirtyä määritteen tai tunnisteen määritelmään F12 -näppäimellä. Se tunnistaa koodikannan vastaavan sulkevan tai avaavan tagin oikean sijainnin löytämiseksi.

Pääset silti käyttämään määritelmää, kun pidät Ctrl-näppäintä painettuna ja napsautat HTML-attribuuttia tai -tunnistetta Windowsissa. Paina Komento + napsauta macOS:ssa samaa toimintoa. Tämä poistaa tarpeen etsiä sijaintia manuaalisesti.

Zen-tila

Tämä tila on häiriötön. Se helpottaa kehittäjien keskittymistä kokonaan koodiin piilottamalla painikkeet ja työkalurivit. Aktivoi tämä tila käyttämällä Ctrl+KZ- pikanäppäintä Windowsissa ja Cmd+KZ Macissa. Vaihtoehtoisesti voit siirtyä kohtaan Näytä ja sitten Ulkoasu . Ota Zen-tila käyttöön tästä.

Komentopaletti

Tämä on laajalti käytetty ominaisuus VS Codessa ja on erityisen hyödyllinen aloittelijoille. Se edustaa kaikkia määrityksiä, pikakuvakkeita ja toimintovaihtoehtoja ja on luettelon muodossa.

Sinun tarvitsee vain kirjoittaa mitä haluat tehtävän komentopalettiin. Saat erilaisia ​​komentoja auttamaan sinua.

Käytä komentopalettia Ctrl+Shift+P Windowsin pikanäppäimellä . Macin pikanäppäin on Cmd+Shift+P .

Etsi tiedostoja

Jos nykyisissä projektitiedostoissa on tarvitsemaasi tekstiä, voit käyttää sitä napsauttamalla sivupalkin Haku-kuvaketta. Vaihtoehtoisesti voit käyttää Ctrl+Shift+F -pikanäppäintä Windowsissa tai Cmd+Shift+F Macissa.

Poista edellinen sana

Kun pidät askelpalautinta painettuna poistaaksesi sanan, voit vahingossa poistaa muita osia. Jos haluat rajoittaa poiston edelliseen sanaan, käytä Windowsissa Ctrl+askelpalautin tai Macissa Cmd+askelpalautin .

Kopioi rivi

Kehityksen aikana ohjelmoijien on toisinaan kopioitava ja liitettävä rivejä muihin projektin osiin. Sen jälkeen linjoihin voidaan tehdä pieniä muutoksia tarpeen mukaan. Pikanäppäin on hyvä tapa nopeuttaa tätä prosessia, varsinkin jos teet sen säännöllisesti.

Windowsin pikanäppäin on Vaihto+alt+ylös tai Vaihto+alt+alas . Macissa pikanäppäin on Opt+vaihto+ylös tai Opt+vaihto+alas .

Avaa Suljettu editori uudelleen

Jos käsittelet valtavaa HTML-projektia, jossa on monia tiedostoja, se voi turhautua, jos suljet välilehden vahingossa. Onneksi voit käyttää pikakuvaketta avataksesi viimeisen suljetun välilehden VS Codessa

Voit avata suljetun editorin uudelleen käyttämällä Ctrl+Shift+T- pikanäppäintä Windowsissa tai Cmd +Shift+T Macissa. Voit avata useita suljettuja välilehtiä tällä pikanäppäimellä.

Nopeuta koodausta HTML-pikanäppäimillä

Monet pikanäppäimet tekevät VS-koodin käytöstä suhteellisen helpompaa. Vaikka vaihtoehtoja on enemmän kuin mitä artikkelissa on, yllä olevat ovat joitakin yleisimpiä, joista aloittelijat ja kokeneet käyttäjät voivat olla hyödyllisiä. VS Coden suosion ansiosta kaikkien ominaisuuksien hyödyntäminen voi tehdä siitä nautinnollisempaa. Valitse pikanäppäimet, joita käytät yleisesti koodausnopeuden nostamiseen.

Seuraavaksi sinun pitäisi oppia vertailemaan kahta tiedostoa VS Codessa .

UKK

K: Ovatko HTML-pikakuvakkeet muokattavissa VS Codessa?

V: Kyllä. Voit mukauttaa HTML-pikakuvakkeita VS Codessa muuttamalla käyttäjä- tai työtilan asetuksia.

K: Voinko luoda omia mukautettuja HTML-pikakuvakkeita VS Codessa?

V: Kyllä. Voit luoda mukautettuja HTML-katkelmia tai pikakuvakkeita VS Codessa määrittämällä ne käyttäjän tai työtilan asetuksissa. Tämän avulla voit luoda pikakuvakkeita usein käytetyille koodimalleille tai mukautetuille elementeille.