Hogyan válasszuk ki a legjobb JavaScript-szerkesztőt a webfejlesztéshez

Számos lehetőség kínálkozik azoknak a fejlesztőknek, akik egy jó JavaScript-szerkesztőt keresnek, amely hatékonyabb és kellemesebb munkakörnyezetet biztosít.

A vezető JavaScript-kódszerkesztők sok ugyanazon nagyszerű funkcióval rendelkeznek, mint amire számíthat, beleértve az automatikus kiegészítést (a kód befejezését), a git integrációt és a bővítmények támogatását. De az apróságok miatt az egyik szerkesztő jobban illeszkedik az adott fejlesztőhöz, mint a másik.

Ha jól érzi magát egy kódszerkesztővel és megismeri a hatékonyabbá tevő munkafolyamatot, nehéz lehet szerkesztőt váltani, mivel a fejlesztési folyamatok optimalizálásához újra kell tanulnia a parancsikonokat.

Még akkor is, ha hosszú távon hatékonyabbá válik, a váltáskor még mindig nagy akadálya van a belépésnek, ezért érdemes egy kis időt fektetni előre, hogy kiválaszthassa az igényeinek leginkább megfelelő szerkesztőt.

Nézzük át most a legnépszerűbb szerkesztő lehetőségeket.

Visual Studio kód

A Microsoft VSCode ingyenes, nyílt forráskódú és telepítéskor elég könnyű. Ez a kezdő JavaScript-fejlesztők de facto szerkesztője, részben azért, mert előre be van töltve jó funkciókkal, amelyek nem igényelnek további beépülő modulokat. A VSCode szintén népszerű, és ideális lehet olyan haladóbb felhasználók számára, akiknek gyorsan el kell kezdenie.

A VSCode egyedülálló tulajdonsága, hogy a böngészőn keresztül használható. Tehát ugyanaz a környezet, amelyet az asztalon használ, útközben is lehetséges a táblagép használatával. A kódszervert egy olyan hálózaton kell konfigurálni, amelyhez hozzáférhet, hogy ez a funkció működjön, de a beállítás után nagyon kényelmes.

Tipp : Ha egy másik IDE-ben dolgozom egy nagy projekten, ahol az elkészítési folyamat eltarthat egy ideig, gyakran megnyitom a hatalmas JS kimeneti fájlt a VSCode-ban, és megcsípem, hogy azonnal teszteljem a böngésző változását, mielőtt alkalmaznám. A VSCode úszóan kezeli ezeket a nagy fájlokat.

A Git be van építve az IDE-be, de az integráció nem olyan robusztus, mint néhány más szerkesztő. Például a WebStorm felhasználói inkább a push / merge élményt részesítik előnyben, mint a VSCode.

Számos további funkciót telepíthet, amelyekre szükség lehet bővítményként, amelyek közül több ezer. De nem mindegyik tényleges jellemző. A kódrészletek keverednek a szolgáltatásokkal és a kiegészítőkkel, amelyek áttekintése és a hozzáadáshoz szükséges legjobb lehetőségek megtalálása időt vehet igénybe. Ha valaha is problémába ütközik, a VSCode hatalmas felhasználói közösséggel rendelkezik; valakinek valószínűleg ugyanaz volt a problémája, és megoldotta.

Ha még nem áll készen a teljes fizetett IDE-re az összes csengővel és síppal, és nem ismeri eléggé az összes szükséges plugint és funkciót, akkor ez a logikus kiindulópont.

Atom

Az ingyenes Atom szerkesztőt a GitHub fejlesztette ki. Ez valójában a króm böngésző speciális verziója, amelyet szöveg- és forráskód-szerkesztővé alakítottak át. Belsőleg a Node.js-t használja a beépülő modulok támogatásához.

Rengeteg plugin érhető el minden olyan funkcióhoz, amelyre vágyhat, azonban a dobozon kívül nem olyan erős. Számos plugint kell összegyűjteni, hogy a fejlesztői környezet felépüljön ott, ahol a lehető leghatékonyabb lehet. Ha JavaScript-szel dolgozik, itt van néhány alapvető Atom bővítmény a kezdéshez:

  • atom-gépirat
  • fájl-ikonok - az ikonok színezése és hozzárendelése különböző fájltípusokhoz
  • atomszépít
  • linter

Tipp : Engedélyezze az automatikus mentés csomagot, amely menteni fogja a szerkesztéseket, ha a fókusz elvész. Alapértelmezés szerint le van tiltva.

Több felhasználó dolgozhat ugyanazon a fájlon egyszerre, mindegyiknek több kurzora van a képernyőn, a teletype plugin segítségével. Használhatja ezt mentoráláshoz, párkódoláshoz vagy együttműködéshez. Ez a szolgáltatás megkülönbözteti az Atom-t a többi szerkesztőtől.

A git integráció jól megvalósult, ahogy azt a GitHub szoftvertől elvárhatjuk. Hasznos egy git-plus plugin is, amely lehetővé teszi a git parancsok gyorsbillentyűkön keresztül történő futtatását a git terminál használata nélkül.

Az Atom addig a pontig testreszabható, ahol szerkeszthet egy .less fájlt az IDE színeinek beállításához, ami jó, ha a környezet minden részletét meg akarja finomítani. Indításkor futtathat .coffe szkriptet, amely segítségével gyorsan módosíthatja a szerkesztő viselkedését.

Pluginokat írhat JavaScript-be egy jól dokumentált szerkesztő API-val szemben. A saját funkcionalitás és viselkedés megalkotásának lehetősége jó, ha erre szükség van.

A szerkesztési élmény zökkenőmentes, és más pluginokkal is javíthatja, például a minimap alkalmazással, de a kezdeti időbe kell fektetni a beállításhoz az összes kívánt funkcióval. Előnye, hogy a nem szükséges funkciók betöltése nem igényel időt, ami lelassítja az élményt. Némi pillanatnyi lassúságot tapasztalhat azonban nagy fájlok betöltésekor vagy fülek váltásakor.

Kezdetben tetszett a CSS-stílusok szerkesztésének ötlete az IDE-környezet testreszabása érdekében, vagy legalábbis lehetőségem nyílt arra, hogy valaha is saját témákkal álljak elő. Szórakoztatóan hangzik, de a gyakorlatban a sok változót tartalmazó témák előállítása nem triviális projekt. Szerencsére sok csiszolt téma plugin áll rendelkezésre letöltésre.

Az Atom stabil szerkesztő, és sok fejlesztő számára tökéletesen megfelel.

Fenséges szöveg

A Sublime Text egy fizetős szerkesztő, de ingyenes próbaverzió áll rendelkezésre. Az indításhoz nincs előre telepítve sok plug-in, de természetesen elérhetők az esetleges igények kielégítésére. Bizonyos csomagokat, például a SideBarEnhancements átnevezésre, áthelyezésre, másolásra és beillesztésre valószínűleg be kell építeni az alapcsomagba, de letöltheti ezeket a funkció engedélyezéséhez.

Az Atomhoz hasonlóan egy kis időbe telhet, amíg mindent beállítanak. De miután elindult, az élmény nagyon sima. Megtakarítás az elveszített fókuszon is elérhető.

A Sublime Text azért szép, mert könnyű, így nagyon gyorsan be lehet tölteni és nagy projektekkel vagy fájlokkal együtt lehet dolgozni. A "goto bármi" funkció megvalósítása kiemelkedik, mivel fájlnevekkel, szimbólumokkal és sorszámokkal használható. Az IDE-k többsége hasonló funkciókat nyújt ilyen vagy olyan formában, de az, hogy kombinálhatjuk őket, és olyan keresésekkel kereshetünk, mint a "fileName @ functionName", nagyon jó.

Egy változó kiválasztása kiválasztja a változó összes előfordulását, és átnevezi az összes előfordulást automatikusan, így ez a közös feladat nagyon korszerűsített élménnyé válik.

A Sublime Text sok szempontból nagyon hasonlít az Atomra. De a Sublime Text előnye a jobb általános teljesítmény és az érzékenység, ami kiváló.

VIM

A Vim emellett ingyenes szövegszerkesztő és nagyon konfigurálható. Eredetileg a vi nevet kapta, és az első szövegszerkesztő a Unix számára készült, később kibővítették egy funkciógazdagabb, Vim nevű szerkesztővel. A legtöbb Linux disztribúción elérhető.

A Vim robusztus keresési és szintaxis kiemelő képességekkel rendelkezik, és nagyon könnyű, így nagyon nagy fájlokkal is jól képes teljesíteni. De némi munkát igényel a beállítás és a használatra kész állapot.

GUI elérhető, de nem ez az alapértelmezett kezelőfelülete a Vim számára. Még az egér támogatásának engedélyezése is némi műveletet igényel annak működéséhez. Az alapértelmezett billentyűzet mód, amely egyesek előnyben részesítik az összes vezérlő és funkció elérését parancsikonok segítségével.

Ennek ellenére a Vim tökéletes IDE lehet, ha egy kis időt tölt el azzal, hogy megtanulja a szoftver csínját-bínját, és beállítja a kívánt viselkedést és funkciókat. Ha idővel görcsös vagy, és nem tudod megtenni a kezdeti befektetést a dolgok tárcsázására, akkor a Vim nem biztos, hogy a legjobb választás az Ön számára.

WebStorm

A WebStormot a JetBrains fejlesztette ki, és igazi JavaScript IDE-ként tűnik ki a többiek közül, mivel minden funkciót beépített közvetlenül a dobozba. A különböző platformok, például a React, az Angular, a Vue.js stb. Fejlesztési környezete zökkenőmentes. Hibakeresheti a csomópont-parancsfájlokat, és futtathat teszteket egy beépített kiszolgálón. Az npm szkripteket faanyag felületen keresztül is futtathatja és hibakeresheti. Ehhez pedig nem szükséges plugin.

A beépített modulok azonban elérhetők néhány olyan ritka szolgáltatáshoz, amelyek nem épülnek be közvetlenül a szoftverbe. Az egyik beépülő modul, amely alapértelmezés szerint nem szerepelt, egy markdown split szerkesztési / előnézeti ablak volt. De többnyire minden megvan, amire szüksége lehet. A dologban az a szép, hogy felfedez olyan funkciókat, amelyek létezéséről nem tudtál, és hogy milyen jó, hogy ilyenek vannak.

A fájlok automatikusan mentésre kerülnek, amikor alapértelmezés szerint dolgozik rajtuk. Ha másik alkalmazást használ, amely nem ezt teszi, akkor a kézi mentés nagyon primitívnek tűnik. Bár ez nem csak a WebStorm esetében jellemző, a megvalósítás kicsit jobb.

Lehet, hogy egyesek nem mindig bíznak a ctrl-z undo state stack integritásában, de a WebStormban van egy olyan VSC rendszer, amely alapvetően minden fájl elmentésekor elkövetést hajt végre. Ez belső és elkülönül a git elkötelezettségeitől. A fájlok legalább akkor mentésre kerülnek, amikor a fájltartalom ablak elveszíti a fókuszt. Tehát, ha egy ideig elmegy anélkül, hogy elköteleznéd magad, és vissza kell menned, vagy meg kell nézned egy korábbi állapotot az utolsó elkötelezettséged után, akkor nem probléma.

Tipp : A Ctrl-shift-up / down nyíl segítségével felfelé vagy lefelé mozgathatja a sorokat vagy a kódtömböket, miközben a szerkesztő automatikusan kezeli a vesszőket / zárójeleket.

Ha olyan projekteken dolgozik, amelyek sok fájlt tartalmaznak, a fájlfa görgetése egy adott fájl keresése esetén lelassíthatja. De ha az egyik elem már nyitva van és fókuszban van, akkor a cél ikonra kattintva a projektfa nézet ehhez a fájlhoz gördül. Nagyon kényelmes.

Néhány hátránya, hogy nem ingyenes. És időnként nagyon nagy projektekkel rendelkező memória-disznó lehet. Az évek során egyre jobb lett, és a fájlok tartalmát belsőleg indexelik, így a nagy projektek keresése nagyon gyors. Egy friss frissítés az indítási sebesség jelentős javulását is magában foglalja.

Általános szerkesztő tippjei a termelékenységről

A duplikált sor / kijelölés parancsikon (a WebStormban: ctrl-d, az Atomban: ctrl-shift-d, de mindannyian meg tudják csinálni) az egyik kedvencem, és sok kódolási forgatókönyv esetén sok időt takaríthat meg.

Ez időről időre felmerül, ahol van egy lista az elemekről, és módosítania kell az egyes sorok első (vagy néhány) karakterét a "" kifejezésből. to ', de a find-cserélni nem célszerű. A WebStorm lehetővé teszi az alt kattintással több kurzort, hogy ugyanazon szerkesztéseket több helyen végezhesse. Ennek ellenére egyes esetekben gyorsabban találom meg a következő megközelítést:

  • Helyezze a kurzort az első periódus után, és kezdje el manuálisan végrehajtani a változtatást.
  • Nyomja meg a Backspace, vessző, nyíl lefelé. Legyen egy ujja minden gombon, és ismételje meg a lassan induló megnyomásokat, majd menet közben gyorsítsa fel. Miután lerontotta a mintát, felgyorsíthatja azt, ahol pillanatok alatt átmegy egy 200 soros listán.

Ez majdnem olyan, mintha dallamot játszanánk zongorán (amilyen gyorsan csak lehet). Ezt megteheti számozási listákkal is. Írja be az első sort a szám nélkül, ismételje meg a sort 9-szer, és hajtsa végre ugyanazt a műveletet, kivéve, hogy minden egyes alkalommal nyomja meg az egyik ujját egy következő számmal. Kezdje a következő 10 sort '1' -vel, és ugyanezt a folyamatot adja hozzá egy számjeggyel minden '1' után.

Ha a „[szerkesztő neve] csalólapot” használja a Google-on, gyors összefoglalót kaphat a felhasználóktól a fontos konfigurációhoz vagy a parancsikonokhoz a szerkesztőhöz, amelyet megpróbál. Nyomtassa ki, és olvassa el az összes parancsikont, hogy megismerje azokat az új szolgáltatásokat és funkciókat, amelyek egyébként nem lehetnek kitéve.

Előnyös lesz annak mérlegelése, hogy a kiemelt műveletek hogyan javíthatják a jelenlegi folyamatokat. Ha lát valamit, ami segíthet, tegyen egy jelölést mellé, így amikor legközelebb ilyen helyzetbe kerül, könnyen felidézhető. Még akkor is, ha ritkán és főleg az elején használja, a kéznél lévő gyors referencia csökkentheti a súrlódást a szerkesztővel kapcsolatos további információk megismerésében, és időt takaríthat meg a kontextusváltás és a jövőbeni keresés során.

Oda megyek, hogy megtaláljam a PDF verziót, kinyomtassam és lamináljam az oldalt későbbi felhasználás céljából, de egyesek számára egy könyvjelző vagy képernyőkép is működhet.

Következtetés

Ha Ön kezdő, aki reméli, hogy megtanulja a JavaScript-et, és csiszolt fejlesztői környezetet használ az induláshoz, akkor a VSCode a kézenfekvő választás, mert könnyen használható, sok beépített erős funkcióval.

A tapasztaltabb fejlesztők számára, akik pontosan tudják, mit akarnak, a Sublime és az Atom lehet előnyösebb, mivel ezek teljes ellenőrzést biztosítanak a fejlesztői környezet felett. Több ezer szolgáltatás (csomag) közül választhat az alkalmazások indításának és az erőforrások használatának megőrzésére. Egy-egy idő eltöltése mindegyikkel segít a helyes választásban.

Azoknak a kemény erővel rendelkező felhasználóknak, akik otthon érzik magukat egyedül a billentyűzettel, és projekteken dolgoznak, hatékonyabb lehetsz a Vim-mel, mint bármely más szerkesztő. Ha megtakarítja azt az időt, amelyre szüksége van a kezének a billentyűzet és az egér közötti mozgatására, összeadódik, de eltart egy ideig, amíg elsajátítja ezt a folyamatot!

Végül, ha nem bánja a fizetős előfizetés fenntartását, és nem foglalkozik fejlesztői gépének memória- vagy CPU-korlátozásával, a WebStorm gyorsan felindítja és futtatja, függetlenül a JavaScript fejlesztői platformoktól, transzpilerektől vagy építési folyamatoktól. Nagyon kényelmes környezetet biztosít a munkavégzéshez.

Én személy szerint a WebStormot használom elsődleges IDE-ként, de továbbra is rendszeresen használom a VSCode-ot egyedi vagy nagyon nagy fájlok szerkesztésére, ha a teljesítmény elsőbbséget élvez.

Ha tetszett ez a cikk, fontolja meg a JSCharting, a fejlesztők számára készített JavaScript-diagramkönyvtár megtekintését. További blogbejegyzéseket itt is megtekinthet.