A szövegszerkesztővel már biztosan tisztában van, ha részt vett valamelyik Codecademy tanfolyamon. Az alábbiakban a Codecademy szövegszerkesztője látható teljes képernyőn a HTML-tanfolyam első moduljának végén.
Míg a Codecademy tanulási környezete intuitív és felhasználóbarát kódolási élményt nyújt, néha szükség lesz a saját szövegszerkesztőjére. Ha például úgy döntesz, hogy részt veszel egy Meetupon vagy egy személyes kódolási tanfolyamon, akkor egy letölthető szövegszerkesztőt fognak használni, és ezt kell telepítened, hogy a projekteken dolgozhass az órán és otthon is.
Megpróbálkoztam néhány szövegszerkesztővel, hogy jobban ráérezzek, melyik felel meg a legjobban az igényeimnek. Ez kulcsfontosságú, mivel nincs “legjobb” szövegszerkesztő, csak az, amelyikkel a legjobb munkát tudod létrehozni.
Ebben a cikkben a két legnépszerűbb szövegszerkesztőt fogom alaposan összehasonlítani: Visual Studio és Sublime Text.
Visual Studio
A Visual Studio (a szövegszerkesztő Visual Studio Code néven ismert, ezért a továbbiakban erre fogunk hivatkozni) a Microsoft ingyenes szövegszerkesztője, amely Windows, Linux és macOS rendszereken fut. Nemrég jelent meg a piacon; a Microsoft 2015 végén adta ki a terméket nyilvános előzetesként, a nyílt forráskódot a Githubra posztolva, mielőtt 2016 áprilisában általános kiadásként elérhetővé tette volna.
A Visual Studio Code újonc státusza ellenére gyorsan népszerűvé vált a fejlesztők körében, a Stack Overflow 2018-as fejlesztői felmérésében összességében a legnépszerűbb fejlesztőkörnyezetként szerepelt.
Az alapok
Így néz ki a Visual Studio Code kezdőképernyője, amikor megírja az első kódsorát, vagy megnyit egy már létrehozott fájlt:
A bal felső panelen láthatja a szerkesztett kód különböző változatait. Ebben az esetben a “style.css” nevű fájlt szerkesztem.”
A középső panelen szerkesztheti a megírt vagy javítandó kódot; több különböző fájlt nyithat meg és szerkeszthet egymás mellett.
A Visual Studio elrendezése egyszerűségében és könnyű használhatóságában hasonlóságot mutat a Codecademy saját szövegszerkesztőjének elrendezésével. Nézze meg az alábbiakban a Codecademy szövegszerkesztőjét az összehasonlításhoz.
Az elrendezést természetesen szerkesztheti is. A Zen mód az egyik kedvencem, különösen azért, mert olyan pihentetőnek hangzik. A valóságban ez egy teljes képernyős mód, amely lehetővé teszi a kódszerkesztést zavaró tényezők nélkül.
Még több funkció
A Visual Studio Code lehetővé teszi a kódszerkesztést számos programozási nyelven. A fenti példaként a CSS-t használtam (igen, a CSS-t kódolási nyelvnek minősítem!). A CSS az egyik beépített programozási nyelv, de a Bővítmények piacterén keresztül más nyelveket, például Pythont és C#-ot is telepíthet és konfigurálhat.
Hibakeresés
A programozás tanulásakor az egyik klasszikus gyakorlat az, hogy “elrontunk” egy kódot, majd megpróbáljuk újra kijavítani. A programozás kezdeti időszakában sokáig bámultam a kódsorokat, amíg el nem homályosodott a szemem, és próbáltam kitalálni, hogy miért nem tükröződik a végtermékben, amit írtam.
Hála Istennek, a Visual Studio Code tartalmaz hibakeresési funkciókat, amelyek segítenek felismerni ezeket a hibákat, mielőtt elérnénk a homályos szemű állapotot. A kód hibakeresésének megkezdéséhez csak annyit kell tennie, hogy vagy megnyomja az F5 billentyűt a kód futtatásához az aktuális ablakban, vagy a “Debug” menübe lép.
A “töréspontokat” is létrehozhat, amelyek olyan pontok, ahol a hibakeresési folyamat automatikusan leáll.
Egy alapszintű hibakeresésnél a Visual Studio Code automatikusan észleli a kisebb problémákat a kódodban, és közvetlenül oda vezet, így könnyen megoldhatod a problémát.
Intellisense
Amikor kódolni tanultam, az egyik tipp, amit a tanár adott nekünk, amikor nem tudjuk, hogyan kell valamit csinálni, az volt, hogy guglizzunk rá. A Microsoft beépített a Visual Studio Code-ba egy Intellisense nevű funkciót, amely a probléma beguglizásának (vagy a Microsoft esetében “Bing-elésének”) alternatívája.
Az Intellisense elemzi a beírt szöveg szemantikáját (betűit), valamint a létrehozott kód többi részét, majd javaslatokat ad arra vonatkozóan, hogyan fejezzük be, amit írunk. Az Intellisense segítségével számos különböző kiegészítést érhet el, többek között nyelvi kiszolgáló javaslatokat, snippeteket és szóalapú szöveges kiegészítéseket.
Az IntelliSense a leggyakoribb programozási nyelvekhez, köztük a HTML, CSS és Javascript nyelvekhez elérhető, más nyelvekhez azonban bővítményt kell telepítenie.
És a többi
A Visual Studio Code számos egyéb hasznos funkcióval rendelkezik, amelyek segítenek a kódolás során, mivel jobban vizualizálják a kódot és felgyorsítják a programozást. Ezek közé tartozik:
- A snippetek támogatása: Ez lehetővé teszi, hogy az újrafelhasználható kód kis részeinek katalógusát hozza létre, amelyeket nagyobb kódrészletekbe illeszthet
- “Go to” funkció: Ez lehetővé teszi a szimbólumok, fájlok, sorok és definíciók gyors megtalálását és elérését
- Szintaxis-kiemelés: Ez a kódot különböző színekkel és betűtípusokkal jeleníti meg a használt kódolási nyelv típusának megfelelően.
Általános benyomás
Bevallás ideje: Windows/Microsoft Office felhasználó vagyok. Ennek a (nem túl menő) döntésnek részben az az oka, hogy a Microsoft termékeit ismerősnek és könnyen kezelhetőnek találom. Ugyanez vonatkozik a Visual Studio Code-ra is.
A VS Code még akkor is könnyen kezelhető és azonnal használható, ha valaki nem ismeri a szövegszerkesztőket. Microsoftos kinézete és érzése van, és két rétege van, ami ideális bármilyen típusú felhasználó számára.
Ha kezdő programozó vagy, könnyen ki tudod dolgozni az alapvető parancsokat (ráadásul a Microsoft rengeteg dokumentációt írt hozzá), de ha szakértő felhasználó vagy, aki komoly programozásra vágyik, rengeteg fejlett funkciót is kínál.
Sublime Text (3. verzió)
A Sublime Text, amelyet egy korábbi Google mérnök fejlesztett ki, 2007 óta létezik. Az első nagy különbség a Visual Studio Code-hoz (VSC) képest, hogy 80 dolláros licencdíjjal rendelkezik, bár van ingyenes próbaverziója. A VSC-hez hasonlóan Windowson, Linuxon és macOS-en fut, és a StackOverflow szerint 2018-ban a negyedik legnépszerűbb fejlesztőkörnyezet.
A Sublime Text legújabb verziója, a 3-as verzió több mint négy évig volt bétaverzióban, 2013 januárjától a 2017 szeptemberében történt nyilvános kiadásáig.
Az alapok
Amikor először megnyitja a Sublime Textet, egy lecsupaszított szövegszerkesztőt kap. Nincs oldalsáv, nincsenek keresési lehetőségek, nincs olyan opció, amely közvetlenül a bővítmény oldalsávjára vezetne. Ez egy koncentráltabb elrendezést biztosít, amely segít a kódolásra koncentrálni. A jobb felső sarokban egy kis minimap található, hogy ránézésre láthassa a kódját.
A Visual Studio Code-hoz képest elég gyorsan megnyílt, és ha készen áll a kódszerkesztésre, tökéletes kiindulópontot biztosít. Ha azonban még nem ismeri a szövegszerkesztőket, a többi funkciót és funkciót nehezebben találja meg. A legtöbb dolog, amire szüksége van, a tetején található menükben található, de érdemes lesz az Eszközök menüből a Parancspalettát is előhívni (erről bővebben alább), hogy gyorsabban elérje, amire szüksége van.
Sublime Text funkciók
Ha a legtöbbet szeretné kihozni a Sublime Textből, akkor érdemes lesz extra bővítményeket telepítenie, amelyek az extra funkciókat biztosítják. Ehhez telepítenie kell a Package Controlt, amelyet az alábbiakban végigvezetünk.
Package Control
A csomagvezérlés hasonló a Visual Studio bővítmények piacteréhez, de nem érhető el out-of-the-box. Rengeteg csomag (vagy bővítmény) áll rendelkezésre a programozásban kezdő emberek számára, például egy kezdőcsomag a C++ nyelvhez, egy csomag, amely segít a Python kitöltésében (kicsit olyan, mint az Intellisense a Visual Studióban), és az Emmet, amely segít gyorsabban írni a HTML és CSS nyelvet azáltal, hogy lehetővé teszi a rövidítések használatát, amelyeket automatikusan kibővít.
Parancspaletta
A parancspaletta funkció használatával sokkal gyorsabban megtalálja és eligazodik bármely parancshoz, mintha menükben kellene keresgélnie. Nagyjából bármit elérhet, és a Parancspaletta automatikus kitöltést is végez, így ha nem tudja, hogy pontosan mit keres, javasol néhány lehetőséget.
Ha például egy projekten dolgozik, és gyorsan hozzá kell adnia egy új mappát, vagy el kell mentenie a projektet, amin dolgozik, gyorsan elő tudja hívni ezt a lehetőséget. Vagy ha snippeteket szeretne létrehozni anélkül, hogy a menükben kellene navigálnia, azt is megteheti.
A parancspaletta eléréséhez csak a ctrl + shift + p billentyűkombinációt kell lenyomnia.
Goto funkció
A Sublime Textben van egy menü, amely a szövegszerkesztő összes “Goto” funkciójának van szentelve. Ez a Visual Studio saját “Go to” menüjének sokkal teljesebb funkciójú változata.
A legfontosabb funkciók közé tartozik a Goto Symbol (a Sublime Text 3-ban hozzáadva), amellyel könnyen megtalálhatja a szimbólumok összes példáját egy fájlban. Az alábbi példa a H1 címkékre vonatkozik (ebben a fájlban csak egy példány volt).
Projektek
A Projektek funkció a mappák és fájlok Sublime Textben történő szervezésére utal. Ez azt jelenti, hogy az összes mappa és fájl egy helyen tárolódik, és gyorsan elérhető az oldalsávból, amint megnyitja a projektet, ahelyett, hogy folyamatosan manuálisan kellene újabb és újabb fájlokat megnyitnia. Ez azt is jelenti, hogy egyszerre (gyorsan) kereshet a projekten belüli összes fájlban.
A munkaterületen egyszerre csak egy projekt lehet nyitva, így ha projektet szeretne váltani, akkor a “Projektváltás” opciót kell kiválasztania.
A Visual Studio rendelkezik egy hasonló funkcióval, a “Munkaterületekkel”, amely lehetővé teszi, hogy egyszerre több fájlt nyisson meg és dolgozzon rajta.
És a többi
A Sublime Text számos más, “kisebb” funkcióval rendelkezik, amelyekről itt érdemes szót ejteni. Ezek közé tartozik:
- Snippets: Ezek ugyanúgy működnek, mint a Visual Studióban, de sajátot is készíthetsz, vagy több bővítményből telepíthetsz
- Multi-szerkesztés: Ha megnyomod a ctrl + d billentyűt, az éppen aktuális szó vagy parancs összes előfordulása kiemelésre kerül a fájlban, a ctrl + f billentyűkombinációt is megnyomhatod a szavak kereséséhez és cseréjéhez.
Általános benyomás
A Sublime Text egy gyors és lecsupaszított szövegszerkesztő, amely forró a megírt kód rendszerezésében és keresésében, valamint abban, hogy könnyen és gyorsan tudjon bármelyik funkcióra vagy szimbólumra ugrani. A “Goto” funkció és a sok billentyűparancs megkönnyíti a tapasztalt fejlesztők számára a navigálást, valamint a kód könnyű megírását és megtalálását anélkül, hogy le kellene venniük a kezüket a billentyűzetről. A kezdőbb programozóknak (mint például nekem) hosszabb időbe telik megszokni.
A Sublime Text nem tartalmaz hibakeresési lehetőséget, ami problémát jelenthet azoknak a fejlesztőknek, akiknek szükségük van erre a funkcióra.
Melyik szövegszerkesztőt válasszam?
A Visual Studio az integrált fejlesztőkörnyezet (IDE) kategóriájába sorolható, mivel lehetővé teszi a programozók számára a kód írását és tesztelését is. A Sublime Text ezzel szemben “csak” egy szövegszerkesztő (bár kiváló), mert arra összpontosít, hogy a leggyorsabb módot biztosítsa a kód rendszerezésére és írására, de nincs lehetősége a kód tesztelésére (hibakeresésre).
A másik nagy különbség a Visual Studio Code és a Sublime Text között a Microsoft által nyújtott támogatás a Sublime Texthez képest. A Microsoft rengeteg dokumentációt készített, amely szinte minden funkciót és azok használatát elmagyarázza, valamint blogbejegyzéseket és videós oktatóanyagokat, hogy segítsen a felhasználóknak eligazodni a szövegszerkesztő használatában.
A Sublime Text néhány nehezebben megtalálható dokumentációt, a legújabb verzió funkcióit magyarázó blogbejegyzést és fórumot biztosít.
A Sublime Textben gyorsan és egyszerűen lehet kódot írni és navigálni, ha tudjuk, mit csinálunk. A Visual Studio több segítséget nyújt, és remek választás a hibakeresési funkciói miatt, de néhány gyors, tapasztalt programozót lelassíthat a kódírás során.