8 Hatékony Visual Studio kódbővítmények a front-end fejlesztők számára

Bár a Microsoft csak néhány hónappal ezelőtt kiadta a Visual Studio Code első, stabil kódszerkesztőjének stabil verzióját, 2016 márciusáig már számos bővítményt tartalmaz, amelyek a kódolási élményt a következő szintre tudják vinni. A hivatalos Visual Studio kódbővítmények a Visual Studio Code Marketplace-ben vannak elhelyezve, amelyek közül sokan nagy segítséget jelenthetnek a webfejlesztők számára.

Ehhez a hozzászóláshoz teszteltem egy csomó VS-kód kiterjesztést a front-end fejlesztéshez kapcsolódóan, és felsoroltam azokat, amelyek közül a legtöbbet találtam intuitív, könnyen használható és kényelmes. Ez nem végső lista. Szánjon időt arra, hogy böngészhessen a piacon, és nézze meg, hogy mit is kínálhat neked, különösen azért, mert sok nagy kiterjesztés még nem jön el.

A VS kódbővítmények telepítése

A bővítmény telepítése a Visual Studio Code-ban elég egyszerű csináld ezt a kódszerkesztőben. A VS-kód piactéren minden kiterjesztésnek saját oldala van, és megtalálhatja azt a parancsot, amelyre az adott kiterjesztést telepítheti az oldal tetején..

A parancs mindig a ext telepítés távon. Egy bővítmény telepítése, csak nyomja meg CTRL + P A VS kódon belül a Quick Open panel elindításához, másolja be ezt a parancsot bele, és végül indítsa újra a kódszerkesztőt az új kiterjesztési munkát.

8 Erős Visual Studio kódbővítmények

1. HTML töredékek

   Ha gyakran szeretne HTML-t írni a Visual Studio Kódban, akkor a HTML-töredékek kiterjesztése is hasznos eszköz lehet bonyolult támogatást nyújt a HTML-hez. Bár a VS-kód alapvető támogatást nyújt a HTML-hez, mint például szintaxis színezés, a HTML töredékek kiterjesztése sokkal többet ismer.

   

   Valószínűleg ez a kiterjesztés leghasznosabb jellemzője amikor elkezdi a HTML címke nevének beírását (a kezdő szögtartó nélkül), HTML-kódrészletek gyorsan listát jelenít meg a rendelkezésre álló lehetőségek rövid ismertetése.

   

   Ha rákattint a kívánt elemre, a HTML-kódrészletek hozzáadják a teljes HTML5-címkét a leggyakoribb tulajdonságaihoz. Ha például egy linket (horgonycímkét) szeretne hozzáadni a dokumentumhoz, írjon be egy egy VS kódba, válassza ki a megfelelő opciót a felugró ablakban, és a HTML töredékek beillesztik a szükséges elemeket szúrja be a szerkesztõjét.

   A kiterjesztés szerzője is figyelmet fordít az elavult elemek eltávolítására, így ha olyan HTML-címkét szeretne használni, amelyet nem talál a felugró listában, érdemes megnézni, hogy még mindig érvényes-e vagy sem.

2. HTML CSS osztály befejezése

   A HTML CSS osztály befejezése hasznos kiterjesztés lehet, ha sokat kell használni CSS osztályok a projektben. Gyakran történik velünk a fejlesztők, hogy mi vagyunk nem teljesen biztos az osztály pontos nevében, de csak az elménk hátsó részén passzív tudásként ül.

   Ez az intelligens kiterjesztés megoldást kínál erre a problémára az összes CSS osztály nevét veszi fel az aktuális munkaterületen, és megjelenít egy listát róluk.

   

   Tegyük fel, hogy a Zurb Alapítvány segítségével szeretnénk létrehozni egy webhelyet, és szeretné használni a kis rácsot. Nem emlékszel arra, hogy az osztályok pontosan meg vannak nevezve, de tudod, hogy szemantikus nevük van.

   A HTML CSS Class Completion használatával csak a szó beírását kell kezdeni kicsi, és a rendelkezésre álló opciók egyszerre jelennek meg a képernyőn, így könnyen kiválaszthatja azt, amire szüksége van.

   

3. Nézet a böngészőben

   A böngészőben a Visual Studio Code egyszerű, de hatékony kiterjesztése. Ez megkönnyítheti a front-end fejlesztést azáltal, hogy lehetővé teszi a kódolás során gyorsan nézze meg a böngészőben végzett munka eredményét. A HTML-fájlt az alapértelmezett böngészőben közvetlenül a VS kódból nyithatja meg a CTRL + F1 billentyűparancs.

   Ne feledje, hogy a böngészőben megtekinthető csak a HTML-t támogatja, így ha meg szeretné tekinteni webhelyét, akkor a HTML-fájlnak nyitva kell lennie. Ön nem tud közvetlenül elérni a böngészőt egy CSS vagy JavaScript fájlból.

   

4. Debugger for Chrome

   A Chrome hibakeresőjét maga a Microsoft építette, és jelenleg a negyedik leggyakrabban letöltött Visual Studio Code kiterjesztés.

   A Chrome hibakereső lehetővé teszi hibakeresés a Google Chrome-ban a kódszerkesztő nélkül. Ez azt jelenti, hogy nem kell dolgoznia a böngésző által látott átmásolt JavaScript-tel, de lehet hajtsa végre a hibakeresést az eredeti forrásfájlokból. Tekintse meg ezt a demót, hogy megtudja, hogyan működik.

   

   A kiterjesztésnek minden funkciója tisztességes hibakeresési igény van, mint például töréspont beállítás, változó figyelés, léptetés, egy hasznos hibakereső konzol, és még sokan mások (lásd az első kiadás funkciólistáját).

   A bővítmény használatához el kell indítania a Chrome-ot távoli hibakeresés engedélyezve, és hozzon létre egy megfelelőt launch.json fájlba. Ez utóbbi eltarthat egy ideig, de részletes utasításokat találhat a GitHub-ról, hogy hogyan kell ezt megfelelően elvégezni.

5. JSHint

   A Visual Studio Code JSHint kiterjesztése integrálja a népszerű JSHint JavaScript lintert a kódszerkesztőbe, így lehet értesüljön a hibákról, amint elkötelezi magát. Alapértelmezés szerint a JSHint kiterjesztés a linter alapértelmezett beállításait használja, amelyeket egy konfigurációs fájl segítségével testre szabhat.

   

   Ennek a kiterjesztésnek a használata meglehetősen egyszerű, mivel a JSHint a hibákat piros színnel jelöli, az értesítéseket pedig zöld aláhúzással. Ha többet szeretne tudni a kérdésekről, csak az aláhúzott részek felett mozogjon, és a JSHint egyszerre lebeg egy címkét a probléma leírásával.

   

6. jQuery kódrészletek

   A jQuery kódrészletek nagyban felgyorsíthatják a Visual Studio kód elejének fejlesztését, mivel lehetővé teszi, hogy gyorsan írjon jQuery-t anélkül, hogy alapszintű szintaxishiba lenne. jQuery kódrészletek jelenleg van 130 elérhető részlet a jobb oldali trigger beírásával hivatkozhat.

   

   Minden jQuery-részlet csak egy JQ előtagot. Az egyik kivétel a func kiváltani egy névtelen funkciót helyez be a szerkesztőbe.

   Ez a praktikus kiterjesztés kényelmes segítség, ha nem vagy teljesen biztos a megfelelő szintaxisban, és időt akar tölteni a dokumentáció ellenőrzéséhez. Ez is megkönnyíti a rendelkezésre álló lehetőségek gyors görgetését.

   

7. Lugas

   A Bower VS kód kiterjesztése intuitívabbá teheti a webfejlesztés munkafolyamatát a Bower csomagkezelő integrálásával a Visual Studio kódba.

   Ha ezt a kiterjesztést használja nem kell átkapcsolni a terminál és a szerkesztő között, de a csomagkezelési feladatokat könnyen elvégezheti közvetlenül a Visual Studio kódban.

   

   A Bower bővítmény a projekt létrehozásán keresztül vezet bower.json fájl, és telepíthet, eltávolíthat, kereshet, frissíthet csomagokat, kezelheti a gyorsítótárat, és számos más feladatot is elvégezhet vele (lásd a teljes funkciók listáját).

   tudsz hozzáférjen a Bower-hez kapcsolódó parancsokhoz a Command Palette indításával nyomással F1, gépelés “Lugas” a beviteli sávba, a “Lugas” opciót a megjelenő legördülő listából, és a megfelelő Bower parancs kiválasztását.

   

8. Git története

   A Git History lehetővé teszi kövesse a Git projekt változásait a Visual Studio kódon belül. Ez a kiterjesztés különösen akkor hasznos, ha nagyobb Github projekthez kíván hozzájárulni, és szükség van egy módra, hogy gyorsan ellenőrizze a többi fejlesztő által végzett módosításokat.

   A Git History bővítmény telepítve van a történelem megtekintése egy teljes fájl vagy a adott sor belsejében. Te is hasonlítsa össze a korábbi verziókat ugyanaz a fájl.

   

   Ha beírja a szót, hozzáférhet a Git történelemhez kapcsolódó parancsokhoz “csoportos it” a parancssorba (F1), választ “csoportos it” a legördülő listában, és végül válassza ki a szükséges parancsot. Vegye figyelembe, hogy meg kell nyitnia a fájlt amelyekről a történelmet szeretné látni, mielőtt bármilyen műveletet végrehajthatna rajta.