Ako spustiť súbor HTML v kóde VS

Visual Studio Code (VS Code) sa javí ako skvelá alternatíva k väčším a zložitejším editorom kódu pre tých, ktorí začínajú s kódovaním. Najmä webovým vývojárom ponúka veľa príležitostí na písanie a vylepšovanie sekcií HTML a množstvo funkcií, vďaka ktorým je vývoj vzrušujúcou jazdou.

Ale ako presne spustíte súbor HTML v kóde VS, ak ste vo svete vývoja nový? Odpovedzme na túto otázku a preskúmajme funkcie, ktoré má VS Code pre HTML kódery.

Spustenie súboru HTML v kóde VS

Aj keď VS Code nemá zjavnú funkciu náhľadu HTML hneď po spustení, kompenzuje to obrovským rozsahom rozšírení. Tieto komunitné doplnky môžu preklenúť prázdnotu a poskytnúť vám funkciu zobrazenia v reálnom čase, ako keby bola vždy zabudovaná. Tu je návod, ako ich používať:

1. Otvorte zobrazenie rozšírení v kóde VS stlačením Ctrl+Shift+X. Odtiaľ si môžete vyhľadať akékoľvek rozšírenie, ktoré vám vyhovuje.
   
2. Ak chcete nájsť správne rozšírenie, zadajte v tomto zobrazení kľúčové slová, ako napríklad „živé zobrazenie“ alebo „ukážka HTML“. Každé rozšírenie má rôzne funkcie, ako napríklad ľahko použiteľné živé ukážky alebo integrované zobrazenia prehliadača v prostredí VS Code.
   
3. Keď nájdete rozšírenie, ktoré sa zdá byť vhodné pre váš projekt, kliknite na „Inštalovať“ a bude súčasťou
   vášho prostredia Visual Studio Code na budúce použitie.
   
4. Kliknutím na tlačidlo ukážky rozdelenej obrazovky zobrazíte súbor HTML na rozdelenej obrazovke.
   

Potom je čas preskúmať novoobjavené možnosti rozšírenia, ktoré ste práve nainštalovali. Pozrite si jeho dokumentáciu alebo zistite, aké možnosti sú dostupné prostredníctvom kontextových ponúk v súbore HTML, ktoré sú dostupné po kliknutí pravým tlačidlom myši.

Spustite HTML v termináli

Ak sa ešte nechcete zaoberať rozšíreniami, terminál vo VS Code vám umožní spustiť súbor HTML bez rozšírení, aj keď je to o niečo zložitejšie:

1. Otvorte alebo vytvorte nový súbor pre kód HTML.
   
2. Kliknite na Terminál v hornej časti a vyberte Nový terminál, aby ste ho otvorili.
   
3. Pomocou príkazu cd prepnite na umiestnenie súboru HTML .
   
4. Napíšte „ start “, za ktorým nasleduje názov súboru HTML a stlačte Enter. Tým sa spustí súbor HTML vo vašom predvolenom prehliadači.
   

Otvoriť v prehliadači

Späť k rozšíreniam, ďalším užitočným rozšírením pre HTML a vývoj webových aplikácií vo všeobecnosti je „Otvoriť v prehliadači“, ktoré otvorí súbor HTML vo webovom prehliadači priamo z VS Code. Tu je postup:

1. Kliknite na tlačidlo Rozšírenia na bočnej strane.
   
2. Do vyhľadávacieho panela zadajte „otvoriť v prehliadači“, aby ste našli rozšírenie.
   
3. Keď uvidíte rovnomenné rozšírenie, nainštalujte ho.
   
4. Po nainštalovaní kliknite pravým tlačidlom myši kdekoľvek v kóde HTML.
   
5. Vyberte „Otvoriť v predvolenom prehliadači“ alebo vyberte iný prehliadač z možnosti „Otvoriť v inom prehliadači“.
   

Pokročilé funkcie pre vývoj HTML vo VS kóde

Keď nastavíte svoje vývojové prostredie a získate všetky správne rozšírenia, váš projekt sa práve začal. Poďme stručne preskúmať funkcie VS Code, ktoré môžete použiť pri prezeraní súborov HTML, aby ste si uľahčili prácu.

IntelliSense

IntelliSense je digitálny programátor, ktorý urýchľuje vývoj automatickým vypĺňaním kódu počas písania. Uhádne najpravdepodobnejší kód a robí to inteligentne a neinvazívne. IntelliSense ponúka okamžitú pomoc pri písaní štruktúr HTML, správne predpovedá, kedy je potrebné zatvoriť značky, a poskytuje kontextový zoznam potenciálnych prvkov alebo atribútov.

Táto funkcia vám zabráni strácať čas prechádzaním syntaxami alebo ručným vkladaním a zapamätávaním všetkého. Týmto spôsobom môžete spustiť webovú stránku rýchlejšie ako kedykoľvek predtým.

Validácia

Robiť chyby v kódovaní je nevyhnutné bez ohľadu na to, aké máte skúsenosti alebo znalosti – chyby sa stávajú každému. Včasné nájdenie týchto chýb vás však môže zachrániť pred nekonečným ladením. VS Code má šikovnú vstavanú validáciu, ktorá podrobuje váš vložený kód HTML, JavaScript a CSS, aby sa zachytili chyby skôr, ako sa dostanú na váš web a spôsobia prerušenia používateľov. Web bez chýb je web, ktorý priťahuje používateľov a prinúti ich zostať.

Formátovanie

Udržať krok so správnym formátovaním môže byť niekedy skľučujúce, najmä ak ste v tíme „hoďte veci a uvidíte, čo funguje“. Organizácia nie je vždy jednoduchá. Ale bez správnej štruktúry sa veci môžu rýchlo stať chaotickými a mätúcimi pre vás a ostatných vývojárov, ktorí s vami môžu spolupracovať.

Pomocou príkazu Formát dokumentu VS Code (Ctrl+Shift+I) môžete udržiavať kód čistý a uprataný podľa priemyselných štandardov. Je to zdanlivo malá zmena na jedno kliknutie, no akonáhle ju uvidíte, okamžite oceníte jej funkčnosť.

Emmet Snippets

Úryvky Emmet pre VS Code môžu výrazne urýchliť váš vývoj. Predstavte si, že máte šestnásť tlačidiel, ktoré môžete navrhnúť pre navigačný panel. Ručné písanie značiek každého tlačidla by bola náročná úloha. Úryvky vám umožnia prejsť týmito opakujúcimi sa úlohami, takže budete mať viac času na jadro svojho projektu.

S týmito výkonnými skratkami je zvládnutie zložitých štruktúr HTML (a CSS) jednoduché. Môžete pridať ľubovoľný kód, ktorý očakávate, že ho budete často používať, a jednoducho ho pridať do súboru. Či už ste začiatočník alebo skúsený kodér, nenechajte si ujsť hack, ktorý vám šetrí čas pomocou útržkov kódu.

Množstvo rozšírení

VS Code Marketplace prekypuje spektrom rozšírení. Väčšinu z nich tvoria zanietení členovia komunity a vývojári, ako ste vy, ktorí zdieľajú svoje znalosti, aby uľahčili prácu ostatným. Nástroje na linting udržujú váš kód čistý, živé servery aktualizujú váš prehliadač na pozadí pri vykresľovaní a oveľa viac. Je to sila na vytváranie sofistikovaných webových aplikácií. Ak potrebujete kódovanie, s najväčšou pravdepodobnosťou je na Marketplace pripravené rozšírenie, ktoré to dokáže splniť.

Výber farieb

Pri vývoji webu sú vizuály všetkým. S výberom farieb VS Code si nemusíte pamätať zložité hexadecimálne kódy. Vyberte si farby, sledujte, ako vyzerajú v reálnom čase – dokonca skúmajte a pochopte, ako sa spájajú so susednými odtieňmi a odtieňmi.

Prispôsobenie kódu VS pre vývoj HTML

VS Code nie je továrenský editor, ktorý musí vyzerať určitým spôsobom. Predpokladajme, že chcete stlmené témy pre celonočné programovanie alebo dostupnejšie prezeranie s menšou námahou očí, špecifikované rozstupy kariet na zlepšenie zloženia a organizácie kódu alebo vlastné dátové formáty navrhnuté pre exkluzívne projekty. V takom prípade má VS Code veľa možností prispôsobenia.

Najmä HTML je priamočiary značkovací jazyk, ktorý, ak chcete, môžete rovnako dobre písať v starom dobrom Poznámkovom bloku, ale potom by ste prišli o mnohé vymoženosti, ktoré prinášajú editory ako VS Code. Dotknite sa nastavení, preskúmajte a upravte tvar editora – urobte z neho vyjadrenie vlastného kódovania.

Vývoj webu v reálnom čase

Na začiatku sa môže spustenie súboru HTML v kóde VS zdať trochu nejasné, najmä ak ste boli nasmerovaní do tohto editora špeciálne pre jeho vymoženosti pri vývoji webu. Ale so správnymi rozšíreniami (alebo šikovným terminálom) a pochopením možností editora je to hračka.

VS Code kombinuje jednoduché rozhrania a výkonné funkcie pre začiatočníkov a skúsených webových vývojárov, aby túto prácu zvládli rýchlo. Všetky tieto elegantné funkcie z neho pravdepodobne urobia vaše preferované miesto na manipuláciu s kódom – a nielen s HTML.

Je Visual Studio Code váš obľúbený editor na písanie v HTML? Ste skúsený webový vývojár alebo len začínate? Napíšte komentár nižšie a podeľte sa o svoje príbehy, tipy a triky.