Programátoři JavaScriptu mají na výběr mnoho dobrých nástrojů - téměř příliš mnoho na to, aby o nich měli přehled. V tomto článku pojednávám o 10 textových editorech s dobrou podporou pro vývoj pomocí JavaScriptu, HTML5 a CSS a pro dokumentaci pomocí Markdownu. Proč používat editor pro programování JavaScriptu místo IDE? Jedním slovem: rychlost.
Základní rozdíl mezi editory a IDE spočívá v tom, že IDE mohou ladit a někdy profilovat váš kód a IDE mají podporu pro systémy správy životního cyklu aplikací (ALM). Mnoho editorů, o kterých zde diskutujeme, podporuje alespoň jeden systém pro správu verzí, často Git, takže toto kritérium je méně rozdílem mezi IDE a editory, než tomu bylo dříve.
Sublime Text a Visual Studio Code jsou špičkou mezi editory JavaScriptu - Sublime Text pro jeho rychlost stejně jako jeho pohodlné editační funkce, a Visual Studio Code pro ještě lepší funkce a rychlost, která je téměř stejně dobrá. V závorkách je třetí místo. Zatímco se TextMate před několika lety na mém seznamu umístil vysoko, jeho schopnosti ve skutečnosti nedržely krok s novým vývojem.
S největší pravděpodobností najdete editor JavaScriptu, který si vyberete, v Sublime Text, Visual Studio Code nebo Brackets. Ale několik dalších nástrojů - Atom, BBEdit, Komodo Edit, Notepad ++, Emacs a Vim - všechny je mají co doporučit. V závislosti na daném úkolu může být některý z nich po ruce.
Související video: Co je JavaScript? Tvůrce Brendan Eich vysvětluje
Brendan Eich, tvůrce programovacího jazyka JavaScript, vysvětluje, jak se tento jazyk používá a proč je stále oblíbený mezi programátory kvůli jeho snadnému použití.
Pojďme si projít možnosti a na konci je porovnat.
Vznešený text
Pokud chcete flexibilní, výkonný a rozšiřitelný programovací textový editor, který je bleskový a nevadí vám přepínání do jiných oken pro kontrolu, ladění a nasazení kódu, nehledejte nic jiného než Sublime Text.
Kromě rychlosti podporuje mnoho pozoruhodných silných stránek pokrytí Sublime Text více než 70 typů souborů, například JavaScript, HTML a CSS; téměř okamžitá navigace a okamžité přepínání projektů; více výběrů (provést celou řadu změn najednou), včetně výběrů sloupců (vyberte obdélníkovou oblast souboru); více oken (použijte všechny své monitory) a rozdělená okna (využijte výhod vaší obrazovky nemovitosti); kompletní přizpůsobení pomocí jednoduchých souborů JSON; rozhraní API založené na Pythonu; a jednotná prohledávatelná paleta příkazů.
Pro programátory pocházející z jiných editorů podporuje Sublime Text svazky TextMate (kromě příkazů) a emulaci Vi / Vim. Neoficiální dokumentace Sublime Text dělá pohrdavé (a nesprávné) poznámky o uživatelích Emacsu (moinapříklad), ale přehlédnu je. Proč vůbec existuje neoficiální dokumentace Sublime Text? Za prvé, oficiální dokumentace je méně než úplná - mnohem méně.
Když jsem dříve řekl „téměř okamžitá navigace“, myslel jsem to vážně. Například skočit z aktuálního umístění na obrazovce na definici getResponseHeader v ajax.js tedy mohu psát Command-P na Macu nebo Ctrl-P na PC aj otevřete přechodný pohled do ajax.js @grh a Enter otevřete kartu s getResponseHeader vybraný. Sublime Text je schopen držet krok s mým psaní. Cítí se stejně citlivý jako někteří z nejlepších starých editorů systému DOS, jako jsou Brief a Kedit.
Jakmile jsem si vybralgetResponseHeader, Mohu najít všechna použití funkce v kontextu zadáním Shift-Command-F na Macu nebo Shift-Ctrl-F na PC a poté Enter. Nová karta mi zobrazí výsledky hledání s vyhledávacím výrazem v každém pětičlenném úryvku. Poklepáním na text v rámečku se na nové kartě zobrazí celý kontext souboru.
Kliknutím na název souboru v levém postranním panelu Složky se zobrazí přechodná karta s obsahem souboru. Tuto kartu nahradí kliknutí na jiný soubor. I zde je Sublime Text schopen držet krok s mým psaní a klikáním. Podobně mi navigace se zmenšenou velikostí v pravém horním rohu stránky umožňuje pohybovat se v souboru téměř okamžitě, bez nutnosti rolování. Přál bych si, aby Microsoft Word byl stejně citlivý.
Vícenásobný výběr a výběr sloupců umožňuje rychlou práci s druhy otravných úprav, které dříve vyžadovaly regulární výrazy. Potřebujete proměnit seznam slov na strukturu JSON, kde je každé slovo obklopeno uvozovkami a každé citované slovo je odděleno od dalšího čárkou? Trvá asi osm stisknutí kláves Sublime Text, bez ohledu na to, kolik slov máte v seznamu.
Na svém vývojovém poli Windows používám dva široké monitory. Na svém MacBooku používám displej Retina plus displej Thunderbolt. Pokud nebudu upravovat na jednom displeji a ladit na druhém, obvykle chci vidět spoustu různých zdrojových souborů a různých pohledů do zdrojových souborů současně. Sublime Text podporuje více oken, rozdělená okna, více pracovních prostorů na projekt, více pohledů a více panelů obsahujících pohledy. Je docela jednoduché používat všechny své nemovitosti na obrazovce, když chci, a konsolidovat, když potřebuji uvolnit prostor pro ladění a testování.
Můžete přizpůsobit vše o Sublime Textu: barevné schéma, písmo textu, globální klávesové zkratky, zarážky tabulátoru, klíčové vazby a úryvky specifické pro soubor a dokonce i pravidla zvýraznění syntaxe. Předvolby jsou kódovány jako soubory JSON. Definice specifické pro jazyk jsou soubory předvoleb XML. Kolem Sublime Textu je aktivní komunita, která vytváří a udržuje balíčky a pluginy Sublime Textu. Mnoho funkcí, o kterých jsem si původně myslel, že jim Sublime Text chybí - včetně rozhraní JSLint a JSHint, podpory JsFormat, JsMinify, PrettyJSON a Git - se ukázalo být dostupné prostřednictvím komunity pomocí Instalačního balíčku.
Jedním z důvodů skvělého výkonu aplikace Sublime Text je, že je přísně kódován. Dalším důvodem je, že Sublime Text není IDE a nepotřebuje režii účetnictví IDE.
Z pohledu vývojáře jde o záludnou kompromis. Pokud jste v těsné testovací vývojové smyčce „červená, zelená, refaktor“, pak vám IDE, které je nastaveno na úpravy, testování, refaktorování a sledování kódu, nejvíce pomůže. Pokud naopak provádíte kontroly kódu nebo velké úpravy, budete chtít nejrychlejší a nejefektivnější editor, který najdete. Tím editorem by mohl být Sublime Text.
Cena: Neomezená bezplatná zkušební verze; 70 $ na uživatele za obchodní nebo osobní licenci. Platformy: Windows, MacOS a Linux.
Kód Visual Studio
Visual Studio Code je bezplatný odlehčený editor a IDE od společnosti Microsoft. Má komponenty sady Visual Studio ve směsi s otevřeným zdrojovým prostředím Atom Electron a poskytuje vynikající podporu pro vývoj ASP.Net Core s C # a pro vývoj Node.js s TypeScript a JavaScript. V rozporu s historickým vzorem společnosti Microsoft, který podporuje pouze Visual Studio ve Windows, Visual Studio Code běží také na MacOS a Linux. Snímek obrazovky níže byl pořízen v systému MacOS.
Visual Studio Code má neuvěřitelně dobré dokončení kódu JavaScript, a to díky zahrnutí kompilátoru TypeScript a motoru Salsa. Kód Visual Studio odešle váš kód JavaScript do kompilátoru TypeScript na pozadí, aby odvodil typy a vytvořil tabulku symbolů. Výsledky můžete vidět v poli v dolní části obrazovky, které zobrazuje informace prohasOwnProperty metoda.
Stejná tabulka symbolů umožňuje IntelliSense, aby vám poskytla skvělé vyskakovací seznamy možností pro dokončení kódu během zadávání výrazu. Po zadání získáte automatické uzavření závorky, možnosti automatického doplňování slov, automatické seznamy metod .a automatické seznamy parametrů v rámci metody. IntelliSense můžete vylepšit přidáním odkazů na soubory d.ts zUrčitě zadáno, a Visual Studio Code vám to nabídne, když rozpozná běžné problémy, jako je použití__dirname, což je vestavěná proměnná Node.js.
Podpora Git je velmi dobrá a snadno se používá. Ladicí program Visual Studio Code poskytuje vynikající prostředí pro ladění pro vývoj Node.js (a vývoj ASP.Net). Visual Studio Code má velmi dobré nástroje pro HTML, CSS, Less, Sass a JSON, které jsou založeny na stejné technologii jako vývojové nástroje Internet Exploreru F12. Kromě toho má přizpůsobitelnou integraci s externími běžci úloh, jako jedoušek ajake.
Kód Visual Studio přilákal robustní ekosystém pluginů - například pro podporu Angular a React. Nyní doporučuji editor, když píšu tutoriály o vytváření aplikací pomocí frameworků a knihoven JavaScript a TypeScript.
Cena: Open source zdarma. Platforma: Windows, MacOS a Linux.
Závorky
Brackets je bezplatný editor otevřených zdrojů, původně od společnosti Adobe, vytvořený tak, aby poskytoval lepší nástroje pro JavaScript, HTML a CSS a související otevřené webové technologie. Samotné závorky jsou napsány v JavaScriptu, HTML a CSS a vývojáři používají závorky k sestavení závorek. Kromě vestavěných funkcí má Brackets správce rozšíření a rozšíření jsou k dispozici pro mnoho jazyků a nástrojů, které front-end vývojáři používají. Závorky nejsou tak rychlé jako Sublime Text nebo TextMate, ale stále jsou docela rychlé, s výjimkou pauz na načítání nebo aktualizaci obsahu programu z webu.
Brackets má dobrou podporu pro JavaScript, CSS, HTML a Node.js. Má také pěkné funkce, jako je například přímá editace CSS související s HTML ID (Quick Edit). V závorkách je navíc čisté uživatelské rozhraní a živý náhled na webové stránky, které upravujete. Je to velmi dobrá volba pro bezplatný editor kódu.
Automatické dokončování JavaScriptu v závorkách je velmi dobré, s automatickým zavíráním závorek, lomených závorek a hranatých závorek, stejně jako automatické rozbalovací nabídky klíčových slov, proměnných a metod, včetně metod jQuery po zadání $. Závorky mohou ovládat debugger Node.js a restartovat Node z položky nabídky. Je snadné přidat rozšíření pro další funkce, jako je podpora TypeScript a JSX, integrace Bower a integrace Git.
Funkce Rychlé úpravy, Rychlé dokumenty, Rychlé otevření a Živý náhled pomáhají zefektivnit úpravy webových aplikací a umožňují vám soustředit se na to, co kódujete nebo navrhujete. Nevýhodou je, že některá rozšíření v závorkách mohou být obtížně konfigurovatelná, ale ne tak složitá jako balíčky Emacs nebo pluginy Vim.
Cena: Open source zdarma. Platformy: Windows, MacOS, Linux.
Atom
Atom je bezplatný otevřený hackerský programovací editor od GitHub pro Windows, MacOS a Linux, který se integruje do aplikace GitHub a má k dispozici tisíce balíčků a témat. Vystačím si s několika komunitními balíčky, plus základní balíčky a témata.
Není divu, vzhledem k jeho původu je zdroj Atom hostován na GitHubu. Je napsán v jazyce CoffeeScript a integrován s Node.js. Atom je specializovaná varianta Chromia navržená tak, aby byla spíše textovým editorem než webovým prohlížečem; každé okno Atom je v podstatě lokálně vykreslená webová stránka. Tým Atom vyvíjí Atom v Atomu.
Výkon Atomu je docela dobrý, když se neaktualizuje sám. Je plně vybaven po vybalení z krabice, s fuzzy vyhledávačem, rychlým vyhledáváním a nahrazováním v rámci celého projektu, několika kurzory a výběry, několika podokny, úryvky, skládáním kódu a schopností importovat gramatiky a motivy TextMate. Atom může nainstalovat dva nástroje příkazového řádku: Atom pro spuštění editoru z prostředí a APM pro správu balíčků Atom v duchu NPM pro Node.js. Při procházení repozitářů, které jsem klonoval z GitHubu, hodně používám Atom, protože aplikace GitHub obsahuje položku kontextové nabídky.
Cena: bezplatný otevřený zdroj. Platformy: Windows, MacOS, Linux.
Komodo Upravit
Komodo Edit, bezplatná verze Komodo IDE se sníženou funkčností ActiveState, je docela dobrý vícejazyčný editor. Všechno, co jsem o editoru Komodo IDE řekl (viz „Recenze: 6 nejlepších IDE JavaScriptu“), platí pro Komodo Edit.
