Recenzia: 10 najlepších editorov JavaScriptu

Programátori JavaScriptu majú na výber z mnohých dobrých nástrojov - takmer príliš veľa na to, aby ich bolo možné sledovať. V tomto článku rozoberám 10 textových editorov s dobrou podporou pre vývoj pomocou JavaScriptu, HTML5 a CSS a pre dokumentáciu pomocou Markdown. Prečo namiesto editora IDE používať editor na programovanie v jazyku JavaScript? Jedným slovom: rýchlosť.

Zásadný rozdiel medzi editormi a IDE je v tom, že IDE môžu ladiť a niekedy profilovať váš kód a IDE majú podporu pre systémy správy životného cyklu aplikácií (ALM). Mnoho redaktorov, o ktorých tu diskutujeme, podporuje aspoň jeden systém riadenia verzií, často Git, takže kritérium je menej diferenciátorom medzi IDE a editormi, ako bývalo.

Sublime Text a Visual Studio Code sú špičkou medzi editormi JavaScriptu - Sublime Text pre jeho rýchlosť rovnako ako jeho pohodlné editačné funkcie, a Visual Studio Code pre ešte lepšie funkcie a rýchlosť, ktorá je takmer rovnako dobrá. V zátvorkách je tretie miesto. Aj keď sa TextMate pred niekoľkými rokmi umiestnil na prvom mieste na mojom zozname, jeho schopnosti v skutočnosti nedržali krok s novým vývojom.

S najväčšou pravdepodobnosťou nájdete svoj editor JavaScriptu podľa výberu v Sublime Text, Visual Studio Code alebo Brackets. Ale niekoľko ďalších nástrojov - Atom, BBEdit, Komodo Edit, Notepad ++, Emacs a Vim - má všetky, čo ich odporúča. V závislosti od úlohy, ktorú práve máte k dispozícii, môžete mať pri ruke niektorého z nich.

Súvisiace video: Čo je to JavaScript? Vysvetľuje tvorca Brendan Eich

Brendan Eich, tvorca programovacieho jazyka JavaScript, vysvetľuje, ako sa tento jazyk používa a prečo je stále obľúbený medzi programátormi pre jeho jednoduché použitie.

Poďme si prejsť jednotlivé možnosti a na konci ich porovnať.

Vznešený text

Ak chcete flexibilný, výkonný a rozšíriteľný programovací textový editor, ktorý je bleskový a nevadí vám prepínanie do iných okien na kontrolu, ladenie a nasadenie kódu, nehľadajte nič iné ako Sublime Text.

Okrem rýchlosti podporuje mnoho pozoruhodných silných stránok pokrytia Sublime Text viac ako 70 typov súborov, medzi nimi napríklad JavaScript, HTML a CSS; takmer okamžitá navigácia a okamžité prepínanie projektov; viac výberov (urobte veľa zmien naraz), vrátane výberov stĺpcov (vyberte obdĺžnikovú oblasť súboru); viac okien (použite všetky svoje monitory) a rozdelené okná (využite výhody svojej obrazovky); úplné prispôsobenie pomocou jednoduchých súborov JSON; API založené na Pythone; a jednotnú prehľadateľnú paletu príkazov.

Pre programátorov pochádzajúcich z iných editorov podporuje program Sublime Text zväzky TextMate (okrem príkazov) a emuláciu Vi / Vim. Neoficiálna dokumentácia Sublime Text obsahuje znevažujúce (a nesprávne) poznámky o používateľoch Emacsu (moi(napríklad)), ale prehliadnem ich. Prečo vôbec existuje neoficiálna dokumentácia Sublime Text? Jedna vec je, že oficiálna dokumentácia je menej ako úplná - oveľa menej.

Keď som predtým povedal „takmer okamžitú navigáciu“, myslel som to vážne. Napríklad skok z aktuálneho umiestnenia na obrazovke na definíciu getResponseHeader v ajax.js potom môžem napísať Command-P na Macu alebo Ctrl-P na PC aj a potom otvorte prechodný pohľad do súboru ajax.js @grh a Enter na otvorenie karty s getResponseHeader vybraný. Sublime Text je schopný držať krok s mojím písaním. Je rovnako citlivý ako niektorí z najlepších starých editorov systému DOS, ako sú Brief a Kedit.

Keď som si vybralgetResponseHeader, Všetky spôsoby použitia tejto funkcie nájdem v kontexte zadaním klávesovej skratky Shift-Command-F na počítači Mac alebo Shift-Ctrl-F na počítači PC a následným zadaním klávesu Enter. Na novej karte sa mi zobrazia výsledky vyhľadávania s hľadaným výrazom v každom útržku s piatimi riadkami. Dvojitým kliknutím na text v škatuli sa na celej karte otvorí celý kontext súboru.

Kliknutím na názov súboru na ľavom bočnom paneli Priečinky sa zobrazí prechodná karta s obsahom súboru. Túto kartu nahradí kliknutím na iný súbor. Aj tu je Sublime Text schopný držať krok s mojím písaním a klikaním. Podobne aj navigácia so zmenšenou veľkosťou v pravom hornom rohu stránky mi umožňuje pohybovať sa v súbore takmer okamžite, bez nutnosti rolovania. Prial by som si, aby bol Microsoft Word rovnako citlivý.

Viacnásobný výber a výber stĺpcov umožňuje rýchlu prácu s druhmi nepríjemných úprav, ktoré si vyžadovali regulárne výrazy. Potrebujete zmeniť zoznam slov na štruktúru JSON, kde je každé slovo obklopené dvojitými úvodzovkami a každé citované slovo je oddelené od nasledujúceho čiarkou? Trvá to asi osem klávesových skratiek vo vznešenom texte, bez ohľadu na to, koľko slov máte v zozname.

Na svojom vývojovom poli pre Windows používam dva široké monitory. Na svojom MacBooku používam displej Retina plus displej Thunderbolt. Pokiaľ nebudem upravovať na jednom displeji a ladiť na druhom, zvyčajne chcem vidieť veľa rôznych zdrojových súborov a rôzne pohľady do zdrojových súborov súčasne. Sublime Text podporuje viac okien, rozdelených okien, viac pracovných priestorov na projekt, viac pohľadov a viac tabúľ obsahujúcich pohľady. Je to celkom jednoduché, keď chcem, používať všetky svoje nehnuteľnosti na obrazovke a konsolidovať ich, keď potrebujem uvoľniť priestor na ladenie a testovanie.

Môžete upraviť všetko, čo sa týka vznešeného textu: farebná schéma, písmo textu, globálne väzby klávesov, zarážky tabulátora, klávesové väzby a úryvky klávesov špecifické pre súbor a dokonca aj pravidlá zvýrazňovania syntaxe. Predvoľby sú zakódované ako súbory JSON. Definície špecifické pre jazyk sú súbory preferencií XML. Okolo Sublime Textu je aktívna komunita, ktorá vytvára a udržuje balíčky a doplnky Sublime Textu. Mnoho funkcií, ktoré som si pôvodne myslel, že Sublime Text postráda - vrátane rozhraní JSLint a JSHint, podpory JsFormat, JsMinify, PrettyJSON a Git - sa ukázalo byť dostupných v komunite pomocou Inštalátora balíkov.

Jedným z dôvodov skvelého výkonu programu Sublime Text je jeho prísne kódovanie. Ďalším dôvodom je, že Sublime Text nie je IDE a nepotrebuje režijné náklady IDE.

Z hľadiska vývojára je to zložitý kompromis. Ak ste v tesnom testovacom vývojovom cykle „červená, zelená, refaktor“, potom vám najviac pomôže IDE, ktoré je nastavené na úpravy, testovanie, refaktorovanie a sledovanie pokrytia kódom. Na druhej strane, ak robíte kontroly kódu alebo väčšie úpravy, potrebujete najrýchlejší a najefektívnejší editor, aký nájdete. Týmto editorom by mohol byť pokojne Sublime Text.

Cena: Neobmedzená bezplatná skúšobná verzia; 70 dolárov na používateľa za obchodnú alebo osobnú licenciu. Platformy: Windows, MacOS a Linux.

Kód Visual Studio

Visual Studio Code je bezplatný ľahký editor a IDE od spoločnosti Microsoft. Má komponenty Visual Studio, zmiešané s otvoreným zdrojom Atom Electron, poskytuje vynikajúcu podporu pre vývoj ASP.Net Core s C # a pre vývoj Node.js s TypeScript a JavaScript. Program Visual Studio Code, ktorý je v rozpore s historickým vzorom spoločnosti Microsoft, ktorý podporuje iba Visual Studio pre Windows, beží aj na MacOS a Linux. Screenshot nižšie bol vytvorený v systéme MacOS.

Visual Studio Code má úžasne dobré dokončenie kódu JavaScript, a to vďaka zahrnutiu kompilátora TypeScript a motora Salsa. Kód Visual Studio Code odošle váš kód JavaScript do kompilátora TypeScript na pozadí, aby odvodil typy a vytvoril tabuľku symbolov. Výsledky môžete vidieť v poli v dolnej časti obrazovky, ktoré zobrazuje informácie prehasOwnProperty metóda.

Rovnaká tabuľka symbolov umožňuje technológii IntelliSense poskytnúť vám vynikajúce vyskakovacie zoznamy možností na dokončenie kódu počas zadávania výrazu. Po zadaní získate automatické uzavretie zátvoriek, možnosti automatického dokončovania slov, automatické zoznamy metód .a automatické zoznamy parametrov v rámci metódy. IntelliSense môžete vylepšiť pridaním odkazov na súbory d.ts zDefinitívne napísanéa Visual Studio Code to ponúkne za vás, keď rozpozná bežné problémy, ako napríklad použitie__dirname, čo je vstavaná premenná Node.js.

Podpora Git je veľmi dobrá a jej použitie je celkom jednoduché. Ladiaci program Visual Studio Code poskytuje vynikajúce prostredie pri ladení pre vývoj Node.js (a vývoj ASP.Net). Visual Studio Code má veľmi dobré nástroje pre HTML, CSS, Less, Sass a JSON, ktoré sú založené na rovnakej technológii ako vývojové nástroje prehľadávača Internet Explorer F12. Okrem toho má prispôsobiteľnú integráciu s externými bežcami úloh, ako súdúšok ajake.

Kód Visual Studio Code prilákal silný ekosystém doplnkov - napríklad na podporu Angular a React. Teraz je to editor, ktorého odporúčam, keď píšem tutoriály o vytváraní aplikácií pomocou rámcov a knižníc JavaScript a TypeScript.

Cena: bezplatný otvorený zdroj. Platforma: Windows, MacOS a Linux.

Konzoly

Brackets je bezplatný editor otvoreného zdroja, pôvodne od spoločnosti Adobe, ktorý bol navrhnutý tak, aby poskytoval lepšie nástroje pre JavaScript, HTML a CSS, ako aj súvisiace otvorené webové technológie. Samotné zátvorky sú napísané v jazykoch JavaScript, HTML a CSS a vývojári ich používajú na zostavenie zátvoriek. Okrem vstavaných funkcií má Brackets aj správcu rozšírení a rozšírenia sú k dispozícii pre mnoho jazykov a nástrojov, ktoré front-end vývojári používajú. Konzoly nie sú také rýchle ako Sublime Text alebo TextMate, ale stále sú dosť rýchle, s výnimkou prestávok na načítanie alebo aktualizáciu obsahu programu z webu.

Brackets má dobrú podporu pre JavaScript, CSS, HTML a Node.js. Má tiež pekné funkcie, ako je napríklad okamžitá úprava CSS súvisiaca s HTML ID (rýchla úprava). Brackets navyše obsahujú čisté používateľské rozhranie a živý náhľad na webové stránky, ktoré upravujete. Je to veľmi dobrá voľba pre bezplatný editor kódov.

Automatické dopĺňanie JavaScriptu v zátvorkách je veľmi dobré, s automatickým zatváraním zátvoriek, lomených zátvoriek a hranatých zátvoriek, ako aj automatické rozbaľovacie ponuky pre kľúčové slová, premenné a metódy vrátane metód jQuery po zadaní $. Konzoly môžu ovládať ladiaci program Node.js a reštartovať Node z položky ponuky. Je ľahké pridať rozšírenia o ďalšie funkcie, ako je podpora TypeScript a JSX, integrácia Bower a integrácia Git.

Rýchle úpravy, rýchle dokumenty, rýchle otvorenie a živý náhľad pomáhajú optimalizovať úpravy webových aplikácií a umožňujú vám sústrediť sa na to, čo programujete alebo navrhujete. Nevýhodou je, že konfigurácia niektorých rozšírení v zátvorkách môže byť zložitá, ale nie tak zložitá ako balíčky Emacs alebo doplnky Vim.

Cena: bezplatný otvorený zdroj. Platformy: Windows, MacOS, Linux.

Atom

Atom je bezplatný otvorený hackovateľný programovací editor od GitHub pre Windows, MacOS a Linux, ktorý sa integruje do aplikácie GitHub a má k dispozícii tisíce balíkov a tém. Vystačím si s niekoľkými komunitnými balíčkami, plus základnými balíčkami a témami.

Nie je prekvapujúce, že vzhľadom na svoj pôvod je zdroj Atómu hostený na GitHub. Je napísaný v jazyku CoffeeScript a integrovaný s jazykom Node.js. Atom je špecializovaný variant prehliadača Chromium, ktorý je navrhnutý skôr ako textový editor ako webový prehliadač; každé okno Atom je v podstate lokálne vykreslená webová stránka. Tím Atom vyvíja Atom v Atome.

Výkon Atómu je celkom dobrý, keď sa neaktualizuje sám. Je plne vybavený hneď po vybalení z krabice, s fuzzy vyhľadávačom, rýchlym hľadaním a nahradením celého projektu, viacerými kurzormi a výbermi, viacerými tablami, úryvkami, skladaním kódu a možnosťou importovať gramatiky a témy TextMate. Atom môže inštalovať dva pomocné programy príkazového riadku: Atom na spustenie editora z shellu a APM na správu balíkov Atom v duchu NPM pre Node.js. Pri prehliadaní repozitárov, ktoré som klonoval z GitHubu, často používam Atom, pretože aplikácia GitHub obsahuje položku kontextového menu.