Visual Studio Code használata 2. rész
Ebben a részben a VS Code további haladó funkcióiról, testreszabási lehetőségeiről és a mindennapi fejlesztést segítő bővítményekről olvashatsz. Az előző részben a telepítésről, alapbeállításokról és a legfontosabb billentyűparancsokról esett szó, így most a folytatás következik.
Többfájlos nézet és integrált eszközök
Osztott ablakok
Több panelre oszthatod az ablakot, ha a fájlt a felületre húzod, sőt, ugyanezzel a módszerrel akár rácsozhatod is. Ennek segítségével több fájl lesz szem előtt egyszerre, ezáltal könnyebbé válik az osztott figyelem fenntartása.
Teljes képernyős mód
Aktiváld a teljes képernyős, minimalista nézetet, hogy jobban koncentrálhass, majd visszatérhetsz a többpaneles elrendezéshez, amikor szükséges.
Integrált terminál
Akár egyszerre több terminált is nyithatsz a vscode-ban, aztán még ketté vagy több felé is oszthatod ezeket, gördülékenyebbé téve a munkafolyamatot.
Javasolt bővítmények és hasznosságuk
Live Server
Élő előnézetet biztosít webfejlesztés során, vagyis azonnal mutatja, hogy a kód átírásával hogy fog kinézni a látvány, amivel a felhasználó találkozik a böngészőben. Az ott található funkciók kombinálásával pedig még kifinomultabbá teheted a design fejlesztését és a weboldal rendezését.
Live Share
Egy adott mappát megoszthatod másokkal és valós időben, párhuzamosan tudtok a kódon dolgozni. Hasznos például oktatáshoz, vagy közös munkákhoz a github nélkül.
Nyelvi Bővítmények
Az adott programozási nyelvhez készült kiegészítők (pl. Python, C++, stb.) fejlett IntelliSense, debuggolási és egyéb funkciókat biztosítanak.
Vue Preview
Ez a kiegészítő a vue.js fájlok megjelenítését teszi lehetővé az ablakon belül. Addig hasznos, míg nem dinamikus felületet készítünk, mivel a dinamikus felületeket már nem tudja kezelni.
Emmet – A gyors HTML és CSS kódgenerálás
Az Emmet egy rövidítéseken alapuló szintaxis, amely gyors kódírást tesz lehetővé. Használata egyszerű: beírod a rövidített formát, majd megnyomod a Tab billentyűt, és a szerkesztő automatikusan kibővíti a megfelelő HTML vagy CSS kódra.
Alapvető HTML struktúrák generálása:
• Egyszerű elem: div → <div></div>
• Elem osztállyal: .container → <div class="container"></div>
• Elem azonosítóval: #header → <div id="header"></div>
• Több elem egyszerre: ul>li*5 →
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
Összetett szerkezetek:
Szekció és cikk kombináció: div>section+article →
<div>
<section></section>
<article></article>
</div>
Kódminták használata (snippetek)
Mi az a snippet?
A snippet egy sablon kódot jelent, melyet te készítesz el előre, ezzel megkönnyítve a saját munkádat. HTML cikket, stílus sablont, vagy előre elkészített js logikákat készíthetsz és használhatsz fel, miközben a kódodat írod. Arra is hasznos, ha egy projekten dolgozol, és vannak kész mintáid hozzá.
Beállítani a következőképpen tudod:
1. Nyisd meg a Command Palette-et (Ctrl + Shift + P).
2. Írd be: "Preferences: Configure User Snippets", majd válaszd ki a kívánt fájltípust.
3. Adhatsz hozzá egyéni snippeteket, pl.: { "Console Log": { "prefix": "cl", "body": ["console.log('$1');"], "description": "Gyors console.log()" } }
Placeholderek és változók
A snippetben használhatsz placeholdereket (például ${1:default}), melyekkel később egyszerűen navigálhatsz (Tab billentyűvel) és módosíthatod az értékeket a beillesztés után.
Hogyan használd ezeket?
Amikor a snippet hívó szót begépeled az editorba, a VS Code automatikusan felajánlja a snippet kibővítését. Ez különösen hasznos sablon kódok, funkciók vagy akár kommentek esetén, így rengeteg időt spórolhatsz meg.
Közösségi snippetek
Emellett számos, a közösség által készített snippet csomag is elérhető, melyek segítségével még szélesebb körben tudod testreszabni a kódolást, és meggyorsítani a munkát.
Egyéb Hasznos Tippek
Mini-map és navigáció
A mini-map vizuális áttekintést nyújt a kódról, segítve a gyors navigációt, különösen nagyobb fájlok esetén. Segítségével oldalt láthatod, hol vannak esetleges kódhibák, vagy elmaradások. Vörössel a hibát, sárgával a nem használt kódokat jelöli, ezekre kattintva pedig odapörget téged a megfelelő helyre.
Kombinált kurzor
Több helyen szeretnél változtatni, vagy pedig egyszerre írnád több helyre ugyanazt a kódot? Ehhez csak tartsd lenyomva az ALT billentyűt és kattints oda, ahol a szerkesztést végeznéd; vagy használd a CTRL + ALT + ↓/↑ kombinációt több kurzor egyszerre történő hozzáadásához.
Automatikus tagzárás
HTML szerkesztés közben Alt + / bezárja az aktuális nyitott taget.
CSS gyorsírás
pl. m10 → margin: 10px;, p20-30 → padding: 20px 30px;
Források, ahonnan az emmetekhez, snippetekhez kaphatsz további ötleteket és leírásokat:
Emmetek:
• https://docs.emmet.io/cheat-sheet/
• https://code.visualstudio.com/docs/editor/emmet
Snippetek: https://code.visualstudio.com/docs/editor/userdefinedsnippets
Egy kis fun
A végére egy érdekes bővítmény: ProbeJS
A Minecraftba berakható KubeJS lehetőséget biztosít arra, hogy Javascript kód segítségével egyedi kódot írjunk a játékhoz. Ehhez fejlesztettek a Vscode-ba egy kiegészítőt, mely segítségével bepillantást nyerhetünk a játék kódjába. Ehhez ráadásul elérhetőek különböző extra dokumentációk és sokat segít, ha például a bárányokon szeretnénk repülni, vagy egy disznó segítségével szeretnénk bányát ásni.
