Najbolji VS Code HTML prečaci

Visual Studio Code (VS Code) nudi mnoge vrijedne značajke i prečace za pojednostavljenje razvoja HTML-a. Ove značajke su praktične i omogućuju programerima da troše manje vremena na pisanje koda. Iako možda nećete koristiti sve dostupne prečace, učenje onih najvažnijih može vam pomoći. Ovaj članak pokriva neke od najpraktičnijih prečaca koje treba uzeti u obzir prilikom kodiranja HTML-a.

Emmet kratice

VS Code podržava Emmet. Ovaj alat olakšava pisanje CSS i HTML koda putem prečaca. Osnovna HTML struktura se proširuje ako upišete uskličnik (!) , a zatim pritisnete Tab.

Emmet predstavlja mogućnosti proširenja koje smanjuju vrijeme potrebno za kodiranje pomoću HTML-a u Visual Studio Code. Ovo možete koristiti iu drugim uređivačima. Pisanje skraćenih izraza rezultira kompletnim strukturama u HTML-u.

• Osnovne Emmet kratice : Ove kratice proširuju neke često korištene elemente. Upisivanje div i zatim pritiskanje Tab proširuje se u , dok se p proširuje u

  . Ako upišete ul>li*3 , proširit će se na popis s tri stavke.

• Ugniježđeni elementi : > se može koristiti za određivanje podređenih elemenata. Na primjer, div>h1 proširuje se na , stvarajući u biti element s

  element unutar.

• Množenje : Množenje generira više elemenata. Dodavanje *3 na uređeni popis generira popis s tri stavke.
• Atributi : Dodajte atribute HTML elementima unutar uglatih zagrada. Na primjer, [href=”#”] postaje , stvarajući element sidra s atributom href.
• Sintaksa slična CSS-u : Sintaksa je inspirirana CSS selektorima, što je čini poznatom i intuitivnom za web programere.
• Matematički izrazi : možete izvoditi neke osnovne matematičke operacije unutar kratica. Na primjer, div>ul>li.item$*3 proširit će se u an

  element koji sadrži uređeni popis s tri stavke popisa s imenima klasa item1, item2 i item3.

Kratice se proširuju upisivanjem, a zatim pritiskom na tipku Tab . Ako postoji nekoliko valjanih objašnjenja za vašu kraticu, kružite ih ponovnim pritiskom na opciju Tab . Emmet kratice nisu specifične za VS Code. Možete ih koristiti u drugim uređivačima koji podržavaju Emmet.

Omatanje oznaka

Odaberite redak ili naredbu, zatim pritisnite Ctrl+Shift+G ako koristite Linux ili Windows. Ako koristite Mac, koristite Cmd+Shift+G . Ovaj prečac omotava odabrani sadržaj HTML oznakom.

Ovo je zgodna značajka u VS Codeu. Korisno je kada sadržaj sadržaja morate priložiti oznakama ili kada trebate strukturirati svoj kod. Odabir može biti jedan redak, više redaka ili blok koda.

Druga je mogućnost da desnom tipkom miša kliknete odabrani kod, a zatim u kontekstnom izborniku odaberete Prelomi kraticom . Kada pokrenete naredbu za omatanje oznake, pojavljuje se upit u kojem možete odabrati željeni naziv HTML oznake. Ako unesete div , na primjer, a

element omotava odabrani kod.

Omatanje oznaka pomaže u označavanju i strukturiranju koda bez ručnog upisivanja početnih i završnih oznaka. Ovo štedi puno vremena i smanjuje učestalost sintaktičkih pogrešaka.

Oblikovanje

Formatiranje HTML koda dobar je način održavanja dosljednosti i čitljivosti u projektima. U VS Codeu, ugrađene opcije oblikovanja omogućuju da se radnja dogodi automatski u HTML-u prema unaprijed definiranim pravilima.

Tipkovnički prečac koji se koristi za formatiranje HTML-a je Shift+Alt+F za Windows i Linux. Shift+Option+F radi na macOS-u. 

Prečac može formatirati cijeli HTML dokument ili dio koda. Kada ga pritisnete, primjenjuju se pravila oblikovanja. Razmak uvlaka i prijelomi redaka prilagođeni su u skladu s tim.

Također možete automatski formatirati kod u VS Codeu .

Komentiranje

Možete komentirati ili uklanjati komentare u jednom retku ili u više redaka koda koji su odabrani u isto vrijeme. Ako komentar već postoji, prečac uklanja komentar, a ako nema komentara, dodaju se komentari. Komentari u HTML-u zatvoreni su u oznake.

Kodna navigacija

To se odnosi na sposobnost kretanja između različitih dijelova baze kodova ili izravnog skoka na definicije u HTML atributima ili oznakama. Korištenje opcije Ctrl+] u sustavu Linux i Windows za navigaciju kroz oznake. Korisnici Maca mogu koristiti Cmd+] za odlazak na završnu oznaku elementa. Za skok na početnu oznaku pritisnite Ctrl+[ za Windows i Linux ili Cmd +[ za Mac.

Za skok na definiciju atributa ili oznake koristite tipku F12 . Identificira odgovarajuću završnu ili otvarajuću oznaku baze koda kako bi pronašao točnu lokaciju.

Još uvijek ćete pristupiti definiciji kada držite tipku Control i kliknete na HTML atribut ili oznaku u sustavu Windows. Pritisnite Command+klik na macOS za istu radnju. To eliminira potrebu za ručnim traženjem lokacije.

Zen način rada

Ovaj način je bez ometanja. Programerima olakšava potpuno fokusiranje na kod tako što skriva gumbe i alatne trake. Aktivirajte ovaj način rada pomoću prečaca Ctrl+KZ na Windowsima i Cmd+KZ na Macu. Alternativno, idite na Pogled , a zatim na Izgled . Ovdje uključite Zen način rada .

Paleta naredbi

Ovo je široko korištena značajka u VS Codeu i posebno je korisna za početnike. Predstavlja svaku konfiguraciju, prečac i funkcionalnu opciju i u obliku je popisa.

Sve što trebate učiniti je upisati ono što želite učiniti unutar palete naredbi. Primit ćete različite naredbe koje će vam pomoći.

Za pristup paleti naredbi upotrijebite prečac Ctrl+Shift+P za Windows. Mac prečac je Cmd+Shift+P .

Traži datoteke

Ako se u datotekama trenutnog projekta nalazi tekst koji vam je potreban, možete mu pristupiti klikom na ikonu Traži na bočnoj traci. Alternativno, koristite prečac Ctrl+Shift+F u sustavu Windows ili Cmd+Shift+F na Macu.

Izbriši prethodnu riječ

Kada držite tipku backspace za brisanje riječi, možete slučajno izbrisati druge dijelove. Da biste ograničili brisanje na prethodnu riječ, upotrijebite prečac Ctrl+Backspace u sustavu Windows ili Cmd+Backspace na Macu.

Kopiraj liniju

Tijekom razvoja programeri ponekad moraju kopirati i zalijepiti retke u druge dijelove projekta. Po potrebi se na linijama mogu napraviti male izmjene. Tipkovnički prečac dobar je način da ubrzate ovaj proces, pogotovo ako to radite redovito.

Windows prečac je Shift+alt+gore ili Shift+alt+dolje . Za Mac, prečac je Opt+shift+gore ili Opt+shift+dolje .

Ponovno otvorite zatvoreni uređivač

Ako radite s velikim HTML projektom s mnogo datoteka, može biti frustrirajuće ako slučajno zatvorite karticu. Srećom, možete upotrijebiti prečac za otvaranje posljednje zatvorene kartice u VS Codeu

Za ponovno otvaranje zatvorenog uređivača upotrijebite prečac Ctrl+Shift+T u sustavu Windows ili Cmd +Shift+T na Macu. Pomoću ovog prečaca možete otvoriti više zatvorenih kartica.

Ubrzajte kodiranje pomoću HTML prečaca

Mnogi prečaci čine korištenje VS koda relativno lakšim. Iako postoji više opcija od onoga što je navedeno u članku, gore su neke od najčešćih koje bi početnicima i iskusnim korisnicima mogle biti korisne. Uz popularnost VS Codea, iskorištavanje svih značajki može ga učiniti ugodnijim. Odaberite prečace koje obično koristite za povećanje brzine kodiranja.

Zatim biste trebali naučiti kako usporediti dvije datoteke u VS Codeu .

FAQ

P: Mogu li se HTML prečaci prilagoditi u VS Codeu?

O: Da. Možete prilagoditi HTML prečace u VS Codeu promjenom postavki korisnika ili radnog prostora.

P: Mogu li stvoriti vlastite prilagođene HTML prečace u VS Codeu?

O: Da. Možete stvoriti prilagođene HTML isječke ili prečace u VS Codeu tako da ih definirate u postavkama korisnika ili radnog prostora. To vam omogućuje stvaranje prečaca za često korištene uzorke koda ili prilagođene elemente.