Labākie VS koda HTML saīsnes

Visual Studio Code (VS Code) piedāvā daudzas vērtīgas funkcijas un saīsnes, lai vienkāršotu HTML izstrādi. Šīs funkcijas ir parocīgas un ļauj izstrādātājiem tērēt mazāk laika koda rakstīšanai. Lai gan jūs, iespējams, neizmantojat visus pieejamos īsceļus, svarīgāko īsceļu apgūšana var būt ļoti noderīga. Šajā rakstā ir apskatīti daži no ērtākajiem īsceļiem, kas jāņem vērā, kodējot HTML.

Emmeta saīsinājumi

VS Code atbalsta Emmetu. Šis rīks atvieglo CSS un HTML koda rakstīšanu, izmantojot īsinājumtaustiņus. HTML pamatstruktūra tiek paplašināta, ja ierakstāt izsaukuma zīmi (!) un pēc tam nospiežat tabulēšanas taustiņu.

Emmet ievieš paplašināšanas iespējas, kas samazina laiku, kas nepieciešams kodēšanai, izmantojot HTML programmā Visual Studio Code. Varat to izmantot arī citos redaktoros. Rakstot stenogrāfijas izteiksmes, tiek iegūtas pilnīgas HTML struktūras.

• Pamata Emmeta saīsinājumi : šie saīsinājumi paplašina dažus bieži lietotos elementus. Ierakstot div un pēc tam nospiežot Tab , tiek izvērsts , bet p tiek izvērsts līdz

  . Ja ierakstāt ul>li*3 , tas tiks izvērsts līdz trīs vienumiem.

• Ligzdotie elementi : > var izmantot, lai norādītu pakārtotos elementus. Piemēram, div>h1 izvēršas līdz , būtībā izveidojot elementu ar

  elements iekšā.

• Reizināšana : reizināšana ģenerē vairākus elementus. Pievienojot *3 sakārtotam sarakstam, tiek izveidots saraksts ar trim vienumiem.
• Atribūti : pievienojiet atribūtus HTML elementiem kvadrātiekavās. Piemēram, [href=”#”] kļūst par , izveidojot enkura elementu ar atribūtu href.
• CSS līdzīga sintakse : sintakse ir iedvesmota no CSS atlasītājiem, padarot to pazīstamu un intuitīvu tīmekļa izstrādātājiem.
• Matemātiskās izteiksmes : jūs varat veikt dažas pamata matemātikas darbības saīsinājumos. Piemēram, div>ul>li.item$*3 tiks izvērsts kā an

  elements, kas satur sakārtotu sarakstu ar trim saraksta vienumiem ar klases nosaukumiem item1, item2 un item3.

Saīsinājumi tiek paplašināti, ierakstot un pēc tam nospiežot taustiņu Tab . Ja jūsu saīsinājumam ir vairāki derīgi skaidrojumi, mainiet tos, vēlreiz nospiežot tabulēšanas opciju. Emmeta saīsinājumi neattiecas uz VS kodu. Varat tos izmantot citos redaktoros, kas atbalsta Emmetu.

Tagu iesaiņošana

Atlasiet rindiņu vai komandu un pēc tam nospiediet Ctrl+Shift+G, ja izmantojat Linux vai Windows. Ja izmantojat Mac, izmantojiet Cmd+Shift+G . Šī saīsne aplauza atlasīto saturu ar HTML tagu.

Šī ir ērta VS Code funkcija. Tas ir noderīgi, ja satura saturs ir jāiekļauj tagos vai ja nepieciešams strukturēt savu kodu. Atlase var būt viena rinda, vairākas rindiņas vai koda bloks.

Vēl viena iespēja ir ar peles labo pogu noklikšķināt uz atlasītā koda un pēc tam konteksta izvēlnē izvēlēties Aplauzt ar saīsinājumu . Kad aktivizējat tagu aplaušanas komandu, tiek parādīta uzvedne, kurā varat izvēlēties vajadzīgo HTML taga nosaukumu. Ja ievadāt div , piemēram, a

elements iesaiņo atlasīto kodu.

Tagu iesaiņošana palīdz iezīmēt un strukturēt kodu, manuāli neievadot sākuma un aizvēršanas tagus. Tas ietaupa daudz laika un samazina sintakses kļūdu biežumu.

Formatēšana

HTML koda formatēšana ir labs veids, kā uzturēt projektu konsekvenci un lasāmību. Programmā VS Code iebūvētās formatēšanas opcijas ļauj darbībai automātiski notikt HTML, ievērojot iepriekš definētus noteikumus.

HTML formatēšanai izmantotais īsinājumtaustiņš ir Shift+Alt+F operētājsistēmām Windows un Linux. Shift+Option+F darbojas operētājsistēmā macOS. 

Īsceļš var formatēt visu HTML dokumentu vai koda daļu. Nospiežot to, tiek piemēroti formatēšanas noteikumi. Attiecīgi tiek koriģētas atkāpju atstarpes un līniju pārtraukumi.

Varat arī automātiski formatēt kodu programmā VS Code .

Komentējot

Varat komentēt vai atsaukt komentārus vai nu vienā rindiņā, vai vairākās koda rindiņās, kas atlasītas vienlaikus. Ja komentārs jau pastāv, saīsne noņem komentāru, un, ja komentārs nav komentēts, komentāri tiek pievienoti. Komentāri HTML ir ietverti tagos.

Kodu navigācija

Tas attiecas uz spēju pārvietoties starp dažādām kodu bāzes daļām vai tieši pāriet uz definīcijām HTML atribūtos vai tagos. Izmantojiet opciju Ctrl+] operētājsistēmās Linux un Windows, lai pārvietotos pa tagiem. Mac lietotāji var izmantot Cmd+], lai pārietu uz elementa beigu tagu. Lai pārietu uz sākuma tagu, nospiediet Ctrl+[ operētājsistēmām Windows un Linux vai Cmd +[ operētājsistēmām Mac.

Lai pārietu uz atribūta vai taga definīciju, izmantojiet taustiņu F12 . Tas identificē kodu bāzes atbilstošo aizvēršanas vai sākuma tagu, lai atrastu pareizo atrašanās vietu.

Jūs joprojām varēsit piekļūt definīcijai, turot nospiestu vadības taustiņu un noklikšķinot uz HTML atribūta vai taga operētājsistēmā Windows. Lai veiktu to pašu darbību, nospiediet Command+click uz macOS. Tas novērš nepieciešamību meklēt atrašanās vietu manuāli.

Zen režīms

Šis režīms nenovērš uzmanību. Tas ļauj izstrādātājiem vieglāk koncentrēties uz kodu, paslēpjot pogas un rīkjoslas. Aktivizējiet šo režīmu, izmantojot saīsni Ctrl+KZ operētājsistēmā Windows un Cmd+KZ operētājsistēmā Mac. Varat arī doties uz Skats un pēc tam uz Izskats . Šeit ieslēdziet Zen režīmu .

Komandu palete

Šī ir plaši izmantota funkcija VS Code, un tā ir īpaši noderīga iesācējiem. Tas atspoguļo visas konfigurācijas, saīsnes un funkcionalitātes opcijas un ir saraksta veidā.

Viss, kas jums jādara, ir komandu paletē ierakstiet to, ko vēlaties darīt. Jūs saņemsiet dažādas komandas, kas jums palīdzēs.

Lai piekļūtu komandu paletei , izmantojiet Windows saīsni Ctrl+Shift+P . Mac saīsne ir Cmd+Shift+P .

Meklēt failus

Ja esošajos projekta failos ir nepieciešams teksts, varat tam piekļūt, sānjoslā noklikšķinot uz ikonas Meklēt. Varat arī izmantot īsinājumtaustiņus Ctrl+Shift+F operētājsistēmā Windows vai Cmd+Shift+F operētājsistēmā Mac.

Izdzēsiet iepriekšējo vārdu

Turot nospiestu atpakaļatkāpes taustiņu, lai dzēstu vārdu, jūs varat nejauši izdzēst citas daļas. Lai ierobežotu dzēšanu līdz iepriekšējam vārdam, izmantojiet īsinājumtaustiņu Ctrl+Backspace operētājsistēmā Windows vai Cmd+Backspace operētājsistēmā Mac.

Kopēšanas līnija

Izstrādes laikā programmētājiem dažreiz ir jākopē un jāielīmē rindas citās projekta daļās. Pēc vajadzības līnijās var veikt nelielas izmaiņas. Tastatūras īsinājumtaustiņš ir labs veids, kā paātrināt šo procesu, it īpaši, ja to darāt regulāri.

Windows īsinājumtaustiņš ir Shift+alt+uz augšu vai Shift+alt+down . Operētājsistēmā Mac īsinājumtaustiņš ir Opt+shift+up vai Opt+shift+down .

Atkārtoti atveriet slēgto redaktoru

Ja strādājat ar milzīgu HTML projektu ar daudziem failiem, nejauši aizverot cilni, tas var radīt vilšanos. Par laimi, varat izmantot saīsni, lai atvērtu pēdējo aizvērto cilni programmā VS Code

Lai atkārtoti atvērtu aizvērtu redaktoru, izmantojiet īsinājumtaustiņus Ctrl+Shift+T operētājsistēmā Windows vai Cmd+Shift+T operētājsistēmā Mac. Izmantojot šo saīsni, varat atvērt vairākas aizvērtas cilnes.

Paātriniet kodēšanu, izmantojot HTML saīsnes

Daudzi īsinājumtaustiņi salīdzinoši atvieglo VS koda izmantošanu. Lai gan ir vairāk iespēju, nekā norādīts rakstā, iepriekš minētās ir dažas no visbiežāk sastopamajām, kuras var noderēt iesācējiem un pieredzējušiem lietotājiem. Pateicoties VS Code popularitātei, visu funkciju izmantošana var padarīt to patīkamāku. Izvēlieties īsinājumtaustiņus, ko parasti izmantojat, lai palielinātu kodēšanas ātrumu.

Tālāk jums vajadzētu uzzināt, kā salīdzināt divus failus programmā VS Code .

FAQ

J: Vai HTML īsceļus var pielāgot programmā VS Code?

A: Jā. Varat pielāgot HTML īsceļus programmā VS Code, mainot lietotāja vai darbvietas iestatījumus.

J: Vai varu izveidot savus pielāgotos HTML īsceļus programmā VS Code?

A: Jā. Varat izveidot pielāgotus HTML fragmentus vai saīsnes VS Code, definējot tos lietotāja vai darbvietas iestatījumos. Tas ļauj izveidot īsceļus bieži lietotiem koda modeļiem vai pielāgotiem elementiem.