Geriausi VS kodo HTML spartieji klavišai

Visual Studio Code (VS Code) siūlo daug vertingų funkcijų ir nuorodų, kad supaprastintų HTML kūrimą. Šios funkcijos yra patogios ir leidžia kūrėjams praleisti mažiau laiko rašant kodą. Nors galbūt nenaudosite visų galimų sparčiųjų klavišų, išmokę svarbiausius klavišus, galite labai daug. Šiame straipsnyje aprašomi keli patogiausi spartieji klavišai, į kuriuos reikia atsižvelgti koduojant HTML.

Emmeto santrumpos

VS Code palaiko Emmetą. Šis įrankis leidžia lengviau rašyti CSS ir HTML kodus naudojant sparčiuosius klavišus. Pagrindinė HTML struktūra išsiplečia, jei įvedate šauktuką (!) ir paspausite Tab.

Emmet pristato išplėtimo galimybes, kurios sumažina kodavimo naudojant HTML laiką „Visual Studio Code“ programoje. Tai galite naudoti ir kituose redaktoriuose. Rašant stenografines išraiškas gaunamos visos HTML struktūros.

• Pagrindinės Emmeto santrumpos : šios santrumpos išplečia kai kuriuos dažniausiai naudojamus elementus. Įvedus div ir paspaudus Tab išplečiama į , o p išplečiama iki

  . Jei įvesite ul>li*3 , jis bus išplėstas iki trijų elementų sąrašo.

• Įdėtieji elementai : > gali būti naudojamas antriniams elementams nurodyti. Pavyzdžiui, div>h1 išplečiamas iki , iš esmės sukuriant elementą su

  elementas viduje.

• Daugyba : dauginant sukuriami keli elementai. Pridėjus *3 prie užsakyto sąrašo, sukuriamas sąrašas su trimis elementais.
• Atributai : pridėkite atributų prie HTML elementų laužtiniuose skliaustuose. Pavyzdžiui, [href=”#”] tampa , sukuriant inkaro elementą su href atributu.
• Į CSS panaši sintaksė : sintaksę įkvėpė CSS parinkikliai, todėl žiniatinklio kūrėjams ji yra pažįstama ir intuityvi.
• Matematinės išraiškos : galite atlikti kai kurias pagrindines matematines operacijas santrumpose. Pavyzdžiui, div>ul>li.item$*3 išsiplės į an

  elementas, kuriame yra sutvarkytas sąrašas su trimis sąrašo elementais, kurių klasių pavadinimai yra item1, item2 ir item3.

Santrumpos išplečiamos įvedant ir paspaudus Tab mygtuką. Jei yra keli tinkami santrumpos paaiškinimai, perjunkite juos dar kartą paspausdami skirtuką . Emmeto santrumpos nėra būdingos VS kodui. Galite juos naudoti kituose redaktoriuose, kurie palaiko Emmet.

Žymės įvyniojimas

Pasirinkite eilutę arba komandą, tada paspauskite Ctrl + Shift + G, jei naudojate Linux arba Windows. Jei naudojate Mac, naudokite Cmd + Shift + G . Šis spartusis klavišas apvynioja pasirinktą turinį su HTML žyma.

Tai patogi „VS Code“ funkcija. Tai naudinga, kai turite įtraukti turinio turinį su žymomis arba kai reikia struktūrizuoti kodą. Pasirinkimas gali būti viena eilutė, kelios eilutės arba kodo blokas.

Kita galimybė yra dešiniuoju pelės mygtuku spustelėti pasirinktą kodą ir kontekstiniame meniu pasirinkti Apvynioti su santrumpa . Kai suaktyvinate žymos įvyniojimo komandą, pasirodo raginimas, kuriame galite pasirinkti norimą HTML žymos pavadinimą. Jei įvesite div , pavyzdžiui, a

elementas apvynioja pasirinktą kodą.

Žymos įvyniojimas padeda žymėti ir struktūrizuoti kodą rankiniu būdu neįvedant pradžios ir uždarymo žymų. Tai sutaupo daug laiko ir sumažina sintaksės klaidų skaičių.

Formatavimas

HTML kodo formatavimas yra geras būdas išlaikyti projektų nuoseklumą ir skaitomumą. VS Code įtaisytosios formatavimo parinktys leidžia automatiškai atlikti veiksmą HTML pagal iš anksto nustatytas taisykles.

Spartusis klavišas, naudojamas formatuoti HTML, yra Shift + Alt + F, skirtas Windows ir Linux. „Shift“ + „Option“ + F veikia „macOS“. 

Spartusis klavišas gali formatuoti visą HTML dokumentą arba kodo dalį. Paspaudus, taikomos formatavimo taisyklės. Atitinkamai koreguojami tarpai tarp įdubimų ir eilučių pertraukos.

Taip pat galite automatiškai formatuoti kodą VS Code .

Komentuoti

Galite komentuoti arba atšaukti komentarą vienoje eilutėje arba keliose kodo eilutėse, pasirinktose tuo pačiu metu. Jei komentaras jau yra, spartusis klavišas pašalina komentarą, o jei jis nekomentuojamas, komentarai pridedami. Komentarai HTML yra įtraukti į žymas.

Kodo navigacija

Tai reiškia galimybę judėti tarp skirtingų kodų bazės dalių arba tiesiogiai pereiti prie apibrėžimų HTML atributuose arba žymose. Naudokite Ctrl+] parinktį „Linux“ ir „Windows“, kad naršytumėte žymas. „Mac“ vartotojai gali naudoti Cmd+], kad pereitų prie elemento uždarymo žymos. Norėdami pereiti prie pradžios žymos, paspauskite Ctrl+[, jei naudojate „Windows“ ir „Linux“, arba Cmd + [, jei naudojate „Mac“.

Norėdami pereiti prie atributo arba žymos apibrėžimo, naudokite klavišą F12 . Jis identifikuoja atitinkamą kodų bazės uždarymo arba atidarymo žymą, kad būtų galima rasti tinkamą vietą.

Vis tiek pasieksite apibrėžimą, kai laikysite valdymo klavišą ir spustelėsite HTML atributą arba žymą sistemoje Windows. Norėdami atlikti tą patį veiksmą, paspauskite „Command“ + spustelėkite „MacOS“. Tai pašalina poreikį ieškoti vietos rankiniu būdu.

Zen režimas

Šis režimas neblaško dėmesio. Paslėpdami mygtukus ir įrankių juostas kūrėjams lengviau sutelkti dėmesį į kodą. Suaktyvinkite šį režimą naudodami spartųjį klavišą Ctrl+KZ sistemoje Windows ir Cmd+KZ sistemoje Mac. Arba eikite į Rodinys , tada – Išvaizda . Čia įjunkite Zen režimą .

Komandų paletė

Tai plačiai naudojama VS Code funkcija ir ypač naudinga pradedantiesiems. Jame nurodoma kiekviena konfigūracija, spartusis klavišas ir funkcionalumo parinktis ir pateikiamas sąrašo pavidalu.

Viskas, ką jums reikia padaryti, tai komandų paletėje įvesti tai, ką norite padaryti. Jūs gausite įvairių komandų, kurios jums padės.

Norėdami pasiekti komandų paletę , naudokite „Windows“ skirtą spartųjį klavišą „Ctrl“ + „Shift“ + P. „Mac“ spartusis klavišas yra Cmd+Shift+P .

Ieškoti failų

Jei esamuose projekto failuose yra jums reikalingo teksto, galite jį pasiekti spustelėję paieškos piktogramą šoninėje juostoje. Arba naudokite spartųjį klavišą Ctrl+Shift+F sistemoje „Windows“ arba „Cmd“+Shift+F, jei naudojate „Mac“.

Ištrinkite ankstesnį žodį

Laikydami nuspaudę naikinimo klavišą norėdami ištrinti žodį, galite netyčia ištrinti kitas dalis. Jei norite apriboti ištrynimą iki ankstesnio žodžio, naudokite spartųjį klavišą „Ctrl“ + „Backspace“ sistemoje „Windows“ arba „Cmd“ + „Backspace“ sistemoje „Mac“.

Kopijuoti eilutę

Kūrimo metu programuotojams kartais reikia nukopijuoti ir įklijuoti eilutes į kitas projekto dalis. Tada, jei reikia, linijose galima atlikti nedidelius pakeitimus. Spartusis klavišas yra geras būdas pagreitinti šį procesą, ypač jei tai darote reguliariai.

„Windows“ spartusis klavišas yra „Shift“+alt+aukštyn arba „Shift+alt+down“ . Jei naudojate „Mac“, spartusis klavišas yra Opt+shift+aukštyn arba Opt+shift+down .

Iš naujo atidarykite uždarytą redaktorių

Jei tvarkote didžiulį HTML projektą su daugybe failų, netyčia uždarę skirtuką gali būti nemalonu. Laimei, galite naudoti spartųjį klavišą, kad atidarytumėte paskutinį uždarytą skirtuką „VS Code“.

Norėdami iš naujo atidaryti uždarytą redaktorių, naudokite spartųjį klavišą „Ctrl“ + „Shift“ + T sistemoje „Windows“ arba „Cmd“ + „Shift“ + T, jei naudojate „Mac“. Naudodami šį spartųjį klavišą galite atidaryti kelis uždarytus skirtukus.

Paspartinkite kodavimą naudodami HTML sparčiuosius klavišus

Daugelis nuorodų palengvina VS kodo naudojimą. Nors yra daugiau parinkčių, nei nurodyta straipsnyje, pirmiau pateiktos yra keletas dažniausiai pasitaikančių, kurios gali būti naudingos pradedantiesiems ir patyrusiems vartotojams. Dėl VS Code populiarumo, pasinaudoję visomis funkcijomis, galite tai padaryti maloniau. Pasirinkite sparčiuosius klavišus, kuriuos dažniausiai naudojate kodavimo greičiui padidinti.

Tada turėtumėte sužinoti, kaip palyginti du failus „VS Code“ .

DUK

Kl.: Ar HTML sparčiuosius klavišus galima tinkinti VS Code?

A: Taip. Galite tinkinti HTML sparčiuosius klavišus VS Code pakeisdami vartotojo arba darbo srities nustatymus.

Kl.: Ar galiu sukurti savo tinkintus HTML sparčiuosius klavišus „VS Code“?

A: Taip. Galite sukurti tinkintus HTML fragmentus arba nuorodas VS Code, apibrėžę juos vartotojo arba darbo srities nustatymuose. Tai leidžia kurti dažnai naudojamų kodų šablonų arba pasirinktinių elementų nuorodas.