HTML-fájl futtatása VS-kódban

A Visual Studio Code (VS Code) nagyszerű alternatívája a nagyobb, összetettebb kódszerkesztőknek azok számára, akik kezdik a kódolást. Különösen a webfejlesztők számára kínál számos lehetőséget a HTML-szakaszok írására és módosítására, valamint rengeteg olyan funkciót, amelyek izgalmassá teszik a fejlesztést.

HTML-fájl futtatása VS-kódban

De hogyan kell pontosan futtatni egy HTML-fájlt a VS Code-ban, ha még új a fejlesztő világban? Válaszoljunk erre a kérdésre, és fedezzük fel a VS Code által a HTML kódolók számára kínált funkciókat.

HTML-fájl futtatása VS Code-ban

Annak ellenére, hogy a VS Code nem rendelkezik nyilvánvaló HTML-előnézeti funkcióval, amint elindítja, a bővítmények hatalmas választékával pótolja. Ezek a közösségi bővítmények áthidalhatják az űrt, és valós idejű nézetet biztosítanak, mintha mindig is beépítették volna. Használja őket:

  1. Nyissa meg a Bővítmények nézetet a VS Code alkalmazásban a Ctrl+Shift+X billentyűkombináció megnyomásával. Innentől bármilyen bővítményt kereshet, amely megfelel az Ön elképzelésének.
    HTML-fájl futtatása VS-kódban
  2. A megfelelő kiterjesztés megtalálásához írjon be kulcsszavakat, például „élő nézet” vagy „HTML előnézet” ebbe a nézetbe. Mindegyik bővítmény különböző funkciókkal rendelkezik, például könnyen használható élő előnézetekkel vagy integrált böngészőnézetekkel a VS Code környezetben.
    HTML-fájl futtatása VS-kódban

  3. Ha megtalálta a projektjéhez megfelelőnek tűnő bővítményt, kattintson a „Telepítés” gombra, és a későbbi használatra a Visual Studio Code környezet része lesz .
    HTML-fájl futtatása VS-kódban
  4. Kattintson az osztott képernyős előnézet gombra a HTML-fájl osztott képernyőn történő megtekintéséhez.
    HTML-fájl futtatása VS-kódban

Akkor itt az ideje, hogy felfedezze az imént telepített bővítmény újdonságait. Tekintse meg a dokumentációját, vagy nézze meg, milyen lehetőségek állnak rendelkezésre a HTML-fájlon belüli jobb gombbal kattintva helyi menükben.

Futtassa a HTML-t a terminálban

Ha még nem szeretne bíbelődni a kiterjesztésekkel, a VS Code termináljával kiterjesztések nélkül is futtathat egy HTML-fájlt, bár az egy kicsit bonyolultabb:

  1. Nyisson meg vagy hozzon létre egy új fájlt a HTML kódhoz.
    HTML-fájl futtatása VS-kódban
  2. Kattintson a Terminál elemre a tetején, és válassza az Új terminál lehetőséget a megnyitásához.
    HTML-fájl futtatása VS-kódban
  3. Váltson a HTML-fájl helyére a cd paranccsal.
    HTML-fájl futtatása VS-kódban
  4. Írja be a „ start ” szót, majd a HTML-fájl nevét, és nyomja meg az Enter billentyűt. Ezzel elindítja a HTML-fájlt az alapértelmezett böngészőben.
    HTML-fájl futtatása VS-kódban

Megnyitás böngészőben

Visszatérve a kiterjesztésekhez, a HTML és a webfejlesztés egy másik hasznos kiterjesztése általában az „Open in browser”, amely közvetlenül a VS Code-ból nyit meg egy HTML-fájlt a webböngészőben. Itt van, hogyan:

  1. Kattintson az oldalsó Bővítmények gombra.
    HTML-fájl futtatása VS-kódban
  2. A bővítmény megtalálásához írja be a keresősávba a „megnyitás a böngészőben” kifejezést.
    HTML-fájl futtatása VS-kódban
  3. Amint látja a névadó kiterjesztést, telepítse.
    HTML-fájl futtatása VS-kódban
  4. A telepítés után kattintson a jobb gombbal bárhol a HTML-kódban.
    HTML-fájl futtatása VS-kódban
  5. Válassza a „Megnyitás az alapértelmezett böngészőben” lehetőséget, vagy válasszon másik böngészőt a „Megnyitás másik böngészőben” opcióból.
    HTML-fájl futtatása VS-kódban

Speciális funkciók a VS Code HTML-fejlesztéséhez

Miután beállította a fejlesztői környezetet, és megszerezte a megfelelő bővítményeket, a projekt csak most indul. Fedezze fel röviden a VS Code funkcióit, amelyeket a HTML-fájlok megtekintése közben használhat, hogy megkönnyítse munkáját.

IntelliSense

Az IntelliSense egy digitális programozótárs, amely felgyorsítja a fejlesztést azáltal, hogy gépelés közben automatikusan kitölti a kódot. Kitalálja a legvalószínűbb kódot, és ezt intelligensen és nem invazívan teszi. Az IntelliSense azonnali segítséget nyújt a HTML-struktúrák megírásakor, helyesen jelzi előre, mikor kell bezárni a címkéket, és kontextus alapú listát készít a lehetséges elemekről vagy attribútumokról.

Ez a funkció megakadályozza, hogy időt pazaroljon a szintaxisok görgetésével, vagy mindent kézzel szúrjon be és memorizáljon. Így minden eddiginél gyorsabban hozhat létre webhelyet.

Érvényesítés

A kódolási hibák elkövetése elkerülhetetlen, függetlenül attól, hogy mennyire tapasztalt vagy jól tájékozott – mindenkivel előfordulnak hibák. Ha azonban időben megtalálja ezeket a hibákat, megóvhatja Önt a végtelen hibakereséstől. A VS Code remek beépített érvényesítéssel rendelkezik, amely a beágyazott HTML-t, JavaScriptet és CSS-t górcső alá veszi, hogy elkapja a hibákat, mielőtt azok megjelennének a webhelyen, és fennakadást okoznának a felhasználók számára. A hibamentes webhely olyan webhely, amely vonzza a felhasználókat, és arra készteti őket, hogy maradjanak.

Formázás

A helyes formázással lépést tartani néha ijesztő lehet, különösen, ha a „dobja be a dolgokat, és nézze meg, mi működik” csapat tagja. A szervezés nem mindig egyszerű. De megfelelő struktúra nélkül a dolgok gyorsan zűrzavarossá és zavaróvá válhatnak Önnek és más, esetleg Önnel együttműködő fejlesztőknek.

A VS Code Format Document parancsával (Ctrl+Shift+I) az iparági szabványokat követve tisztán és rendezetten tarthatja a kódot. Ez egy látszólag kicsi, egy kattintással végrehajtott módosítás, de ha egyszer meglátja, azonnal értékelni fogja a funkcionalitását.

Emmet Snippets

A VS Code Emmet-kódrészletei jelentősen felgyorsíthatják a fejlesztést. Képzelje el, hogy tizenhat gombja van a navigációs sávhoz. Az egyes gombok címkéinek manuális kiírása fáradságos feladat lenne. A kivonatok segítségével könnyedén átlépheti ezeket az ismétlődő feladatokat, így több ideje marad a projekt lényegére.

Ezekkel a hatékony rövidítésekkel egyszerű az összetett HTML (és CSS) struktúrák elsajátítása. Hozzáadhatja azt a kódot, amelyet gyakran szeretne használni, és egyszerűen hozzáadhatja a fájlhoz. Akár kezdő, akár tapasztalt kódoló, nem akarja kihagyni a kódrészletek használatával járó időtakarékos hackelést.

Rengeteg bővítmény

A VS Code Marketplace bővelkedik a kiterjesztések spektrumában. Legtöbbjüket lelkes közösségtagok és olyan fejlesztők készítik, mint te, akik megosztják tudásukat, hogy megkönnyítsék mások munkáját. A Linting eszközök tisztán tartják a kódot, az élő szerverek a háttérben frissítik a böngészőt renderelés közben, és még sok más. Ez egy erőmű kifinomult webalkalmazások létrehozásához. Ha kódolási igénye van, valószínűleg van egy bővítmény a Marketplace-en, amely készen áll annak teljesítésére.

Színválasztó

A webfejlesztésben a látvány a minden. A VS Code színválasztóval nem kell bonyolult hexadecimális kódokat megjegyeznie. Válasszon színeket, figyelje meg valós időben, hogyan néznek ki – még azt is felfedezheti és megértheti, hogyan kapcsolódnak egymáshoz szomszédos árnyalataikhoz.

A VS kód testreszabása HTML-fejlesztéshez

A VS Code nem egy gyárilag készített szerkesztő, amelynek bizonyos módon kell kinéznie. Tegyük fel, hogy homályos témákat szeretne az egész éjszakai kódoláshoz, vagy könnyebben elérhető megtekintést szeretne kevesebb szem megerőltetése mellett, meghatározott tabulátorközt szeretne a kódösszetétel és rendszerezés javítása érdekében, vagy egyedi adatformátumokat szeretne exkluzív projektekhez. Ebben az esetben a VS Code számos személyre szabási lehetőséget kínál.

Konkrétan a HTML egy egyszerű jelölőnyelv, amelyet ha akarsz, ugyanúgy beírhatsz a jó öreg Jegyzettömbbe, de akkor lemaradsz sok olyan kényelemről, amelyet a szerkesztők, például a VS Code kínálnak. Érintse meg a beállításokat, fedezze fel és alakítsa át a szerkesztőt – tegye azt a kódoló énje kifejezésévé.

Valós idejű webfejlesztés

Eleinte kissé homályosnak tűnhet egy HTML-fájl VS Code-ban való futtatása, különösen, ha kifejezetten a webfejlesztési kényelem miatt irányították erre a szerkesztőre. De a megfelelő bővítményekkel (vagy a praktikus terminállal) és a szerkesztő képességeinek megértésével ez gyerekjáték.

A VS Code egyesíti az egyszerű felületeket és a hatékony funkciókat a kezdők és a tapasztalt webfejlesztők számára, hogy gyorsan elvégezzék a munkát. Mindezek az ügyes funkciók valószínűleg ezt a helyet fogják előnyben részesíteni a kód manipulálásához – és nem csak a HTML-hez.

A Visual Studio Code a legjobb szerkesztője a HTML-ben történő íráshoz? Tapasztalt webfejlesztő vagy, vagy csak most kezded? Írjon megjegyzést alább, és ossza meg történeteit, tippjeit és trükkjeit.


Leave a Comment

A Steam Disk írási hiba egyszerű javítása Windows 10 rendszeren

A Steam Disk írási hiba egyszerű javítása Windows 10 rendszeren

Steam Disk Write Disk Error hibát észlel Windows 10 rendszeren a játék frissítése vagy letöltése közben? Íme néhány gyorsjavítás, amellyel megszabadulhat a hibaüzenettől.

Alkalmazások vagy programok eltávolítása Windows 10 rendszerben

Alkalmazások vagy programok eltávolítása Windows 10 rendszerben

Fedezze fel, hogyan távolíthat el alkalmazásokat a Windows 10 rendszerből a Windows Store segítségével. Gyors és egyszerű módszerek a nem kívánt programok eltávolítására.

A Microsoft Edge böngészési előzményeinek megtekintése vagy törlése

A Microsoft Edge böngészési előzményeinek megtekintése vagy törlése

Fedezze fel, hogyan tekintheti meg vagy törölheti a Microsoft Edge böngészési előzményeit Windows 10 alatt. Hasznos tippek és lépésről-lépésre útmutató!

Google Meet korlát: A résztvevők maximális száma, a hívások időtartama és egyebek

Google Meet korlát: A résztvevők maximális száma, a hívások időtartama és egyebek

A Google zökkenőmentessé tette a csoportos megbeszélések lebonyolítását. Tudd meg a Google Meet korlátait és lehetőségeit!

Hogyan állítsuk vissza a Gmail jelszavát

Hogyan állítsuk vissza a Gmail jelszavát

Soha nincs rossz idő a Gmail jelszavának megváltoztatására. Biztonsági okokból mindig jó rutinszerűen megváltoztatni jelszavát. Ráadásul soha

Hogyan lehet törölni a böngésző előzményeit

Hogyan lehet törölni a böngésző előzményeit

Az online adatvédelem és biztonság megőrzésének egyik alapvető része a böngészési előzmények törlése. Fedezze fel a módszereket böngészőnként.

A zoom némítása: Minden, amit tudnod kell

A zoom némítása: Minden, amit tudnod kell

Ismerje meg, hogyan lehet némítani a Zoom-on, mikor és miért érdemes ezt megtenni, hogy elkerülje a zavaró háttérzajokat.

A parancssori parancsok teljes listája

A parancssori parancsok teljes listája

Használja ki a Command Prompt teljes potenciálját ezzel a több mint 280 (CMD) Windows-parancsot tartalmazó átfogó listával.

Feltételes formázás egy másik cella alapján [Google Táblázatok]

Feltételes formázás egy másik cella alapján [Google Táblázatok]

Alkalmazhatja a Google Táblázatok feltételes formázását egy másik cella alapján, a Feltételes formázási segédprogrammal, a jelen cikkben ismertetettek szerint.

A Rendszer-visszaállítás használata Windows 11 rendszeren

A Rendszer-visszaállítás használata Windows 11 rendszeren

Kíváncsi vagy, hogyan használhatod a Rendszer-visszaállítás funkciót a Windows 11 rendszeren? Tudd meg, hogyan segíthet ez a hasznos eszköz a problémák megoldásában és a számítógép teljesítményének helyreállításában.