Bestu VS kóða HTML flýtileiðir

Visual Studio Code (VS Code) býður upp á marga dýrmæta eiginleika og flýtileiðir til að einfalda HTML þróun. Þessir eiginleikar eru handhægir og gera forriturum kleift að eyða minni tíma í að skrifa kóða. Þó að þú gætir ekki notað allar tiltækar flýtileiðir, getur það farið langt að læra þær mikilvægustu. Þessi grein fjallar um nokkrar af handhæstu flýtileiðunum sem þarf að hafa í huga þegar HTML er kóða.

Emmet skammstafanir

VS Code styður Emmet. Þetta tól gerir það auðveldara að skrifa CSS og HTML kóða með flýtileiðum. Grunnuppbygging HTML stækkar ef þú skrifar upphrópunarmerki (!) og ýtir svo á Tab.

Emmet kynnir stækkunarmöguleika sem dregur úr þeim tíma sem það tekur að kóða með HTML í Visual Studio Code. Þú getur líka notað þetta í öðrum ritstjórum. Að skrifa styttingartjáningu leiðir til fullkominnar uppbyggingar í HTML.

• Basic Emmet skammstafanir : Þessar skammstafanir víkka út suma algengustu þætti. Að slá inn div og ýta svo á Tab stækkar í , en p stækkar í

  . Ef þú slærð inn ul>li*3 stækkar það í lista með þremur hlutum.

• Nested Elements : hægt er að nota > til að tilgreina undireiningar. Til dæmis, div>h1 stækkar í , í raun og veru að búa til frumefni með

  þáttur innan.

• Margföldun : Margföldun myndar marga þætti. Með því að bæta *3 við pantaðan lista myndast listi með þremur hlutum.
• Eiginleikar : Bættu eiginleikum við HTML þætti innan hornklofa. Til dæmis, [href=”#”] verður , sem býr til akkerisþátt með href eigind.
• CSS-lík setningafræði : Setningafræðin er innblásin af CSS vali, sem gerir það kunnuglegt og leiðandi fyrir vefhönnuði.
• Stærðfræðitjáning : Þú getur framkvæmt nokkrar helstu stærðfræðiaðgerðir innan skammstafana. Til dæmis mun div>ul>li.item$*3 stækka í an

  þáttur sem inniheldur raðaðan lista með þremur listaatriðum með flokksnöfnum item1, item2 og item3.

Skammstafanir eru stækkaðar með því að slá inn og ýta síðan á Tab hnappinn. Ef það eru nokkrar gildar skýringar fyrir skammstöfuninni þinni skaltu hringja í þær með því að ýta aftur á flipann . Emmet skammstafanir eru ekki sérstakar fyrir VS kóða. Þú getur notað þá í öðrum ritstjórum sem styðja Emmet.

Merki umbúðir

Veldu línu eða skipun og ýttu síðan á Ctrl+Shift+G ef þú notar Linux eða Windows. Ef þú notar Mac skaltu nota Cmd+Shift+G . Þessi flýtileið umlykur innihaldið sem er valið með HTML merki.

Þetta er þægilegur eiginleiki í VS kóða. Það er gagnlegt þegar þú verður að láta innihaldsefnið fylgja með merkjum eða þegar þú þarft að skipuleggja kóðann þinn. Valið gæti verið ein lína, margar línur eða kóðablokk.

Annar valkostur er að hægrismella á valda kóðann og velja síðan Wrap with skammstöfun í samhengisvalmyndinni. Þegar þú kveikir á skipuninni um umbúðir merki kemur upp hvetja þar sem þú getur valið tiltekið HTML merki nafn. Ef þú slærð inn div , til dæmis, a

þáttur umlykur valda kóðann.

Merkjaumbúðir hjálpa til við merkingu og uppbyggingu kóða án þess að slá handvirkt inn opnunar- og lokunarmerki. Þetta sparar mikinn tíma og dregur úr tíðni setningafræðivillna.

Forsníða

Formatting HTML kóða er góð leið til að viðhalda samræmi og læsileika í verkefnum. Í VS kóða leyfa innbyggðir sniðvalkostir að aðgerðin gerist sjálfkrafa í HTML eftir fyrirfram skilgreindum reglum.

Lyklaborðsflýtivísan sem notuð er til að forsníða HTML er Shift+Alt+F fyrir Windows og Linux. Shift+Option+F virkar á macOS. 

Flýtileiðin getur sniðið heilt HTML skjal eða hluta kóðans. Þegar þú ýtir á það eru sniðreglurnar beittar. Inndráttarbil og línuskil eru stillt í samræmi við það.

Þú getur líka sniðið kóða sjálfkrafa í VS kóða .

Athugasemdir

Þú getur skrifað athugasemdir eða aflýst annað hvort á einni línu eða á mörgum kóðalínum eins og þær eru valdar á sama tíma. Ef athugasemd er þegar til fjarlægir flýtileiðin athugasemdina og ef athugasemdum er ekki skrifað er athugasemdum bætt við. Athugasemdir í HTML eru innifaldar í merkjum.

Code Navigation

Þetta vísar til getu til að fara á milli mismunandi hluta kóðagrunnsins eða hoppa beint í skilgreiningar í HTML eiginleikum eða merkjum. Notaðu Ctrl+] valkostinn á Linux og Windows til að fletta í gegnum merki. Mac notendur geta notað Cmd+] til að fara í lokunarmerki þáttarins. Til að hoppa í upphafsmerkið, ýttu á Ctrl+[ fyrir Windows og Linux eða Cmd +[ fyrir Mac.

Til að fara í skilgreininguna á eigind eða merki, notaðu F12 takkann. Það auðkennir samsvarandi lokunar- eða opnunarmerki kóðagrunnsins til að finna rétta staðsetningu.

Þú munt samt fá aðgang að skilgreiningunni þegar þú heldur stjórnlyklinum og smellir á HTML eigind eða merki á Windows. Ýttu á Command+smelltu á macOS fyrir sömu aðgerð. Þetta útilokar þörfina á að leita að staðsetningu handvirkt.

Zen hamur

Þessi háttur er truflunlaus. Það auðveldar forriturum að einbeita sér alfarið að kóða með því að fela hnappa og tækjastikur. Virkjaðu þessa stillingu með því að nota Ctrl+KZ flýtileiðina á Windows og Cmd+KZ á Mac. Að öðrum kosti skaltu fara í Skoða og síðan Útlit . Kveiktu á Zen ham hér.

Skipunarpalletta

Þetta er mikið notaður eiginleiki í VS kóða og er sérstaklega gagnlegur fyrir byrjendur. Það táknar allar stillingar, flýtileiðir og virknivalkosti og er í formi lista.

Allt sem þú þarft að gera er að slá inn það sem þú vilt gera innan skipanaspjaldsins. Þú munt fá mismunandi skipanir til að aðstoða þig.

Til að fá aðgang að skipanapallettunni , notaðu Ctrl+Shift+P flýtileiðina fyrir Windows. Mac flýtileiðin er Cmd+Shift+P .

Leita í skrám

Ef það er texti sem þú þarft í núverandi verkefnaskrám geturðu nálgast hann með því að smella á leitartáknið í hliðarstikunni. Að öðrum kosti, notaðu Ctrl+Shift+F flýtileiðina á Windows eða Cmd+Shift+F á Mac.

Eyða fyrra orði

Þegar þú heldur inni á bakhliðarstikunni til að eyða orði gætirðu eytt öðrum hlutum fyrir slysni. Til að takmarka eyðinguna við fyrra orð, notaðu flýtileiðina Ctrl+Backspace á Windows eða Cmd+Backspace á Mac.

Afritaðu línu

Við þróun þurfa forritarar stundum að afrita og líma línur í aðra verkhluta. Þá er hægt að gera litlar breytingar á línunum eftir þörfum. Flýtilykla er góð leið til að flýta fyrir þessu ferli, sérstaklega ef þú gerir þetta reglulega.

Windows flýtileiðin er Shift+alt+upp eða Shift+alt+niður . Fyrir Mac er flýtileiðin Opt+shift+upp eða Opt+shift+niður .

Opnaðu aftur lokaðan ritstjóra

Ef þú ert að meðhöndla risastórt HTML verkefni með mörgum skrám getur það orðið pirrandi ef þú lokar óvart flipa. Sem betur fer geturðu notað flýtileið til að opna síðasta lokaða flipann í VS kóða

Til að opna aftur lokaðan ritstjóra skaltu nota Ctrl+Shift+T flýtileiðina á Windows eða Cmd +Shift+T á Mac. Þú getur opnað marga lokaða flipa með þessari flýtileið.

Flýttu kóðun með HTML flýtileiðum

Margir flýtileiðir gera notkun VS kóða tiltölulega auðveldari. Þó að það séu fleiri valkostir en það sem er í greininni, þá eru ofangreindir þeir algengustu sem byrjendur og vanir notendur geta fundið gagnlegt. Með vinsældum VS Code getur það gert það skemmtilegra að nýta alla eiginleikana. Veldu flýtileiðir sem þú notar venjulega til að ná upp kóðunarhraða.

Næst ættirðu að læra hvernig á að bera saman tvær skrár í VS kóða .

Algengar spurningar

Sp.: Eru HTML flýtileiðir sérsniðnar í VS kóða?

A: Já. Þú getur sérsniðið HTML flýtileiðir í VS kóða með því að breyta stillingum notanda eða vinnusvæðis.

Sp.: Get ég búið til mínar eigin sérsniðnu HTML flýtileiðir í VS kóða?

A: Já. Þú getur búið til sérsniðna HTML búta eða flýtileiðir í VS kóða með því að skilgreina þá í notenda- eða vinnusvæðisstillingum. Þetta gerir þér kleift að búa til flýtileiðir fyrir oft notuð kóðamynstur eða sérsniðna þætti.