Co je další nejlepší věc na kódování? Editor kódu, samozřejmě!
Editory kódu jsou druhým nejvýznamnějším důvodem pro programátorské plamenné války (prvním je formátování kódu).
Pro některé je Vim jediným rozumným editorem, který byl kdy vytvořen, zatímco pro jiné je vše, co nezapadá do spirálovitě se točícího světa Emacsu Inception, jen k posměchu. Pokud špatně hledáte pozornost, vše, co musíte udělat, je zajít do programátorské komunity a založit vlákno jako „Proč si myslím, že X (vyberte si jakýkoli oblíbený editor kódu) je na hovno/je nejlepší“, dejte si pivo a relaxujte.
Hádky, protiargumenty a urážky se budou celou noc hrnout do a z diskuse a bude trvat mnoho měsíců, než jed ve vlákně vychladne.
Otázka zní: proč?
Jistě, lidské bytosti dokážou ze všeho udělat velkou věc, ale myslím, že editory kódu jsou zvláštní, pokud jde o programátory. Typický programátor tráví téměř všechen svůj čas (více než 98 %, pokud bych se měl vsadit) na zvoleném editoru kódu. Vědí, jak se v editoru orientovat – v jeho silných a slabých stránkách, limitech, zvláštnostech a skrytých drahokamech.
Není nic frustrujícího, než když se při psaní kódu musíte potýkat s editorem (přemýšlejte o tom, jak nepříjemné to je, když musíte na nové klávesnici střílet dlouhý a naléhavý e-mail!). Editory kódu snižují duševní tření a umožňují vám být produktivnější, proto jsou tak důležité a přitahují tolik pozornosti.
Jaký je tedy nejlepší editor kódu?
Upřímně, ani se tam neodvážím jít! 😀 😀
Pokud se však zabýváte vývojem webu, je tu alternativa, o které byste měli přemýšlet – online editory kódu! Můžete jim také říkat cloudové editory kódu.
Nepleťte si editor kódu s integrovaným vývojovým prostředím (IDE). Obojí jsou dvě různé věci a jako vývojář byste měli být obeznámeni s těmito vícejazyčnými IDE.
Stručně řečeno, jedná se o editory, které jsou umístěny výhradně na vzdáleném serveru a jsou přístupné prostřednictvím prohlížeče.
Zní to divně, že?
Taky jsem se cítil, když jsem na ně narazil před 3-4 lety. Proč by sakra měl někdo chtít všechno předat hloupému prohlížeči?
Může vůbec konkurovat nativně nainstalovanému editoru kódu?
Ukazuje se, že ve většině případů, a zejména pro vývoj webu, je odpověď ano. Nyní, i když jsem online editory nepřijal jako své primární médium, zjišťuji, že je stále více používám ve specifických scénářích.
Než se vrhneme na to, které editory kódu jsou k dispozici, zastavme se a zamysleme se nad tím, kdy mohou mít online editory kódu smysl.
Table of Contents
Nulové nastavení
Nevím jak vy, ale nastavení mého oblíbeného editoru podle mého gusta na novém systému není něco, na co se těším. Pluginy, motivy, fonty, zkratky, úryvky, nastavení. . . Existuje nekonečný seznam věcí, které musí být vyváženy, než se celá věc stane použitelnou. Je snadné něco přehlédnout, ale později vás to naštve, když je váš pracovní postup přerušen.
Naproti tomu s online editorem už po prvním nastavení není co dělat. Oficiální sestavení, aktualizace, noční sestavení, podporované platformy, architektura systému, synchronizace FTP, kanály CI/CD – na ničem z toho nezáleží, pokud máte prohlížeč!
Spolupráce
Častěji musíte při řešení problémů nebo ladění něčeho spolupracovat s ostatními vývojáři.
Tradiční editor kódu na to není stavěn – není zde žádný prostor pro současné úpravy kódu, komentování nebo zvýrazňování a je obtížné pro něj přidat podporu.
Bezpečnost dat
Nyní je samozřejmé, že žádný projekt dnes není bez kontroly verzí, což znamená, že kopie kódu existuje v úložišti neustále. To znamená, že jsou chvíle, kdy kontrola verzí nestačí:
- Zapomenete odeslat nově vytvořené commity a váš notebook začne hořet.
- Máte další důležité soubory a výpisy dat, se kterými váš kód komunikuje, i když tyto nejsou součástí živé aplikace. Co se s nimi stane, když váš notebook začne hořet?
(Dobře, vypadá to, že jsem posedlý hořícími notebooky, ale rozumíte tomu, ne?!)
Vynucování disciplíny
Proti tomu by se dalo polemizovat i u soudu vývojářských práv (pokud něco takového existuje), ale pravdou je, že vývojáři jen zřídka obětují své rozmary pro obecné blaho.
Například hardcore nadšenec Sublime Text někdy plně přijme kterýkoli z vynikajících editorů JetBrains a najde každou příležitost poukázat na jeho paměťově náročnou povahu a pomalejší výkon.
Totéž platí pro tabulátory vs. mezery (nebo dokonce tabulátory se dvěma mezerami vs. tabulátory se čtyřmi mezerami) — jste naivní, pokud si myslíte, že programátoři ve vašem týmu nebudou klábosit.
V takových případech je online editor přínosem — vy rozhodujete o nastavení projektů (dokonce i o tom, jak má být kód naformátován), a on prostě odmítne přijmout práci, dokud nebude splňovat všechny standardy. Možná drsné na jednotlivce, ale skvělé pro projekt!
Nyní mi docházejí případy použití, takže se pojďme vrhnout na to, jaké máme možnosti, pokud jde o online editory kódu, zejména pro vývoj webu.
JSFiddle
Zatímco JSFiddle nemůže nahradit plnohodnotný textový editor, zatraceně dobře si poradí s jednorázovými frontend skripty.
Je tak populární, že stránky pro otázky a odpovědi jako StackOverflow již podporují vkládání odkazů JSFiddle přímo do své platformy.
Aby se věci rychle rozjely, nabízí JSFiddle hned na začátku několik základních pravidel; což znamená, že pokud chcete získat ukázku, řekněme, React, začala, vše, co musíte udělat, je kliknout na příslušné tlačítko a začít psát kód. Jakmile stisknete tlačítko Uložit, „housle“ se uloží, získáte trvalou adresu URL (Podívejte se na tuto hloupou hru, kterou jsem vytvořil: https://jsfiddle.net/tuqd76c4/ a všimněte si, že můžete provést změny a stisknutím tlačítka Uložit vytvořte novou verze této adresy URL).
Zde je to, co dělá z JSFiddle životaschopnou platformu pro vývoj front-end webových aplikací:
- Zdarma k použití (žádný skrytý poplatek nebo funkce freemium). JSFiddle se podporuje prostřednictvím reklam (alespoň při psaní) a v levém dolním rohu výše uvedeného snímku obrazovky můžete vidět reklamu Adobe.
- Funkce spolupráce na kódu – ideální pro společné vytváření konceptů, rozhovory atd.
- Více rozvržení, velikosti písma, světlé/tmavé motivy atd.
- Formátování kódu (úklid), připravovaná podpora pro linters (CSS a JS) a další.
A teď, vzlykej, vzlykej, pro ty špatné věci:
- JSFiddle je čistě front-endový editor. Neexistuje způsob, jak kódovat a spouštět svůj oblíbený backendový jazyk.
- Neexistuje zde žádný koncept souborů a složek (nebo nahraných souborů). Jediné, co máte, je jediné místo pro kód, bez ohledu na to, kolik ho tam je.
- JSFiddle nelze použít k hostování kódu na vašem serveru. Kód musí být na JSFiddle a je neustále veřejný.
- Neexistuje způsob, jak vytvořit kanál CI/CD, použít Git atd.
To znamená, že JSFiddle má své sladké místo a zazáří, když potřebujete předložit důkazy o konceptu a spolupracovat rychlostí světla. Je a zůstane hlavní identitou mezi online editory.
CodeSandbox
CodeSandbox lze považovat za mnohem výkonnější a úplnější pohled na JSFiddle. V souladu se svým jménem poskytuje CodeSandbox kompletní prostředí editoru kódu a izolované prostředí pro vývoj front-endu.
CodeSandbox je skutečný výkonný a sladký, sladký produkt. Kdybych se pokusil vyjmenovat všechny jeho výhody, došel by mi papír, ale tady jsou některé vražedné vlastnosti:
- Podpora Npm: Ano, můžete přidat téměř jakýkoli balíček, který je k dispozici na npm.
- Soubory, složky, moduly: Kód můžete rozdělit do více souborů, přidávat/odebírat obrázky z veřejné složky a sestavovat/importovat moduly, jak uznáte za vhodné. Pracovní postup odpovídá modernímu balíku modulů, takže nemusíte (téměř) nic nastavovat.
- Podpora pro TypeScript, rychlé načítání, export GitHub, hostování statických souborů atd.
- Je postaven na editoru Monaco, stejné bestii, která pohání favorita VSCode editor. To přináší výkonné funkce, jako je „Přejít na“, „Najít reference“ a nezbytné refaktorování na dosah ruky!
- Podpora úryvků pro Mravenec
- Integrované nástroje DevTools, linting, chybové překryvy, testovací rámce (Jest), klávesové zkratky a další.
- Výkonné CLI pro přímý import místních projektů do CodeSandbox.
I když bezplatná verze CodeSandbox nepodporuje soukromý kód, můžete tuto funkci získat (a celkově zvýšit limity velikosti), když jim pomůžete Patreon za pouhých 5 USD měsíčně (plaťte si, co chcete, až 50 USD měsíčně).
CodeAnywhere
Jedním z problémů většiny editorů kódu na tomto seznamu (alespoň zatím) je to, že očekávají, že budete kód neustále uchovávat na jejich serverech, nebo vyžadují pravidelnou synchronizaci kódu přes příkazový řádek.
Ne tak s CodeAnywhere.
Ve své nejsilnější podobě má CodeAnywhere dvě funkce, které pro mě vynikají:
- Předpřipravené obrázky kontejnerů pro více než 72 programovacích jazyků a rámců. To znamená, že můžete vytvořit nové vývojové prostředí přímo z editoru! Kód je samozřejmě automaticky hostován v nově vytvořeném kontejneru a soubory jsou obsluhovány přímo odtud.
- Připojte se k čemukoli. Ano, doslova cokoliv. Nejste povinni ukládat svůj kód na servery CodeAnywhere. Ať už je váš kód umístěn na FTP, platformách pro sdílení souborů, jako je Dropbox, Amazon S3, nebo na sofistikovaných platformách pro správu verzí, jako je GitHub, můžete snadno nastavit CodeAnywhere pro čtení a zápis do tohoto zdroje pomocí editoru kódu čistě pro . . . No, úprava kódu. 😛
Ještě jednu věc bych chtěl poukázat na to: pokud vám Git nevyhovuje, pokud jde o prohlížení historie a rozdílů, CodeAnywhere by si mohl oddechnout. Editor používá pro porovnávání souborů svůj systém rozdílů, který vám umožňuje porovnávat dva soubory v libovolných dvou revizích (revize se vytvoří pokaždé, když soubor uložíte).
S revizemi je však malý háček — bezplatná verze vám umožňuje udržovat pouze jednu revizi, zatímco nejmenší placený plán umožňuje maximálně 20 revizí. Obecně řečeno, není to problém, protože jen zřídka se chcete podívat za poslední 20. revizi, ale protože většina programátorů má ve zvyku stisknout tlačítko Uložit několikrát za minutu, může to být bolestivé.
Vše řečeno a hotovo, CodeAnywhere je solidní a příjemná nabídka pro ty, kteří chtějí přejít do cloudu a zůstat tam. 🙂 Vzhledem k tomu, že jeho pravomoci přesahují front-endový kód, je podle mého názoru vysoce doporučeno!
StackBlitz
Pokud se věnujete převážně front-endu a nemůžete se vzdálit od rozhraní VSCode, StackBlitz byl vytvořen právě pro vás.
Nevidíte nic zvláštního?
Také jsem to neudělal, dokud jsem se trochu neposunul dolů a neklikl na tlačítko Angular. Výložník!
Hádejte co, to není záměrně vytvořeno, aby vypadalo jako VSCode – je to postaveno na editoru VSCode! Natolik, že můžete instalovat rozšíření, prohledávat složky a organizovat soubory přesně tak, jak byste očekávali od běžné instance VSCode.
Ale počkejte, je toho víc!
Možná jste si všimli, nebo ne, že:
- Všechny aplikace vytvořené na StackBlitz se také automaticky nasazují na jejich servery! Takže tato aplikace hraček Angular, kterou jsem právě vytvořil, je automaticky hostována na https://angular-yvyi2j.stackblitz.io/. S největší pravděpodobností adresa URL stále funguje (i když se bude načítat pomalu, jak byste očekávali, když je hostován zdarma)!
- Projekt můžete forkovat a sdílet. Při sdílení získáte lepší kontrolu nad tím, co mohou dělat ostatní.
- Můžete se připojit k úložišti GitHub a také nechat kód přímo vytahovat/posílat odtud. Nebo si můžete jednoduše stáhnout projekt jako soubor zip dobrým způsobem.
Ale počkejte, je toho víc!
Vážně! 😀
Zde je seznam oficiálních funkcí nabízených StackBlitz:
- Nativní podpora pro Firebase (což je něco, co osobně nepoužívám, ale hej, je to požehnání pro ty, kteří se nechtějí ponořit do temných hlubin backendu)
- Intellisense, vyhledávání projektů
- Hot reloading během psaní
- Importujte balíčky npm
- Upravujte offline, když nejste připojeni!
StackBlitz je plný (krásných) překvapení, pokud jde o odstranění překážek vývoje a nasazení webu. Vložení VSCode na vaše webové stránky již není věcí snů!
AWS Cloud9
Cloud9 bylo pravděpodobně první IDE založené na prohlížeči, které nabízelo seriózní funkce a převzalo myšlenku hlavního proudu prohlížeče jako editoru. Není divu, že jej později získal Amazon a dnes je Cloud9 součástí nabídky AWS.
Pokud jste byť jen vzdáleně připojeni k platformě AWS (nebo se o ni zajímáte), Cloud9 je místo, kde vaše hledání dokonalého (dobře, téměř dokonalého) editoru končí.
Podívejme se proč:
- Za používání Cloud9 se neúčtují žádné další poplatky. Cloud9 můžete připojit ke stávající/nové výpočetní instanci AWS a platíte pouze za tuto instanci. Je také možné připojit se k serveru třetí strany přes SSH – zcela bez poplatku! 🙂
- Prvotřídní podpora aplikací AWS Serverless (ladění atd.)
- Přímý terminálový přístup k AWS z editoru (upřímně řečeno, slušný editor, terminál s kartami je to, co mi ve VSCode stále chybí)
- Více než 40 podporovaných programovacích jazyků (Go, C++, Ruby, Node, Python, PHP, Java… vyberte si)
Žádoucí jsou také funkce spolupráce v Cloud9, které umožňují bezproblémové provádění recenzí/pohovorů.
Další zabijáckou funkcí je přehrávání změn provedených v souboru ve stylu videa, díky čemuž je proces kontroly radostí:
Moje rada?
Pokud máte rádi AWS, pak nečekejte a chyťte Cloud9 právě teď. A pokud ještě nejste v cloudu, ale přemýšleli jste o tom, že byste měli něco udělat, přijměte AWS a integrujte Cloud9 do svého pracovního postupu. V žádném případě nemůžete udělat lepší rozhodnutí!
Gitpod
Gitpod je osvěžující pohled na cloudové editory kódu (nebo IDE, chcete-li), jehož cílem je udržovat váš kód vždy testovaný a aktuální. Jinými slovy, je hluboce integrován s GitHub a pokaždé, když přidáte kód, spustí vaše testování a kanály CI/CD, aby se zajistilo, že kód je vždy 100% v pořádku.
Stojí za to vyzkoušet, pokud máte rádi VSCode a chcete něco, co podporuje všechny hlavní back-end/front-end jazyky a rámce (Django, Rails, Revel, co si jen vzpomenete).
Theia
Pokud jste zarytým fanouškem SOLID a softwarovým architektem hnidopišským, Theia IDE bude lechtat vaši kost odloučení. Je to kódované IDE kódované TypeScriptem (pět bodů pro styl rovnou!), které má dokonale oddělené front-end a backend. Front-end běží v prohlížeči, zatímco backend může být kdekoli – místní počítač nebo cloud!
Ale to není vše – front-end lze provozovat jako aplikaci Electron s plně funkčním izolovaným prostředím prohlížeče, které vám poskytne vzhled a dojem nativní desktopové aplikace, pokud po ní budete chtít.
Kódové prostory GitHub
Kódové prostory GitHub poskytuje vysoce výkonné virtuální stroje pro spouštění kódů za účelem vývoje webových aplikací. Pomocí kódu Visual Studio, který obsahuje editor a kompletní ekosystém, bude práce v prohlížeči jednodušší.
Vyzkoušejte nejnovější vývojářské prostředí pro projekty spolu s předem vytvořenými obrázky. Díky škálování vašich virtuálních počítačů až na 64 GB RAM a 32 jader zažijete v různých regionech nízkou latenci. Začněte kódovat se standardizovanými prostředími, hardwarovými specifikacemi, nastavením editoru, rozšířeními a požadavky na běh.
Závislosti mezi projekty můžete izolovat pomocí docker-compose a kontejnerů. Kromě toho si v prohlížeči snadno prohlédněte provedené změny a sdílejte veřejné i soukromé porty se spoluhráči. Můžete také upravit nebo přidat i hloupé detaily, jako jsou mezery, karty, světlé, tmavé, zkrášlovací, hezčí, solarizované, Monokai a mnoho dalších.
Začátečníci, kteří chtějí zkusit své štěstí, mohou používat kódovací prostory GitHub zdarma s omezenými výhodami, ale budete mít dostatek funkcí, abyste mohli pokračovat. Pokud jste tým nebo podnik, můžete začít používat kódové prostory GitHub za 40 $/uživatel/rok.
JetBrains
Získejte nová, reprodukovatelná, připravená k použití a automatizovaná vesmírná cloudová vývojová prostředí během několika sekund a začněte kódovat s JetBrains IDE – Space. Jedná se o jediné řešení pro softwarové projekty a týmy, které přebírá odpovědnost za celý životní cyklus vývoje počínaje CI/CD kanálem a hostováním úložišť Git až po publikační balíčky.
Space je vyhrazený virtuální stroj s kontejnerem Docker. Můžete nainstalovat všechny základní knihovny a nástroje, které v projektu potřebujete. Zjednodušte a urychlete integraci sdílením a reprodukováním pracovních prostorů kódování, kdykoli budete chtít.
Umožněte nováčkům začít okamžitě vyvíjet kód, aniž byste ztráceli čas vývojem místního počítače. Získáte kompletní IDE připravené k použití, kdykoli potřebujete začít psát kód, ladit a spouštět jej během několika sekund, abyste otestovali výstup. JetBrains nabízí centralizovanou platformu pro správu vývojových prostředí.
Vše, co děláte, a každý zdroj, který používáte, je sledován na jednom místě. Zdroje můžete také poměrně snadno integrovat do vývojového kanálu. Podle svého projektu si můžete vybrat preferovaný typ virtuálního počítače, aby odpovídal velikosti projektu. Prostor ušetří vaše prostředky tím, že kódovací pracovní prostor hibernace, takže na tom samém můžete začít pracovat po přestávce.
Začněte svou jízdu ještě dnes a vyzkoušejte krásu tohoto zvířete zdarma.
CodeTasty
CodeTasty je rozšiřitelné, chytré a moderní cloudové IDE s mnoha dalšími funkcemi, které si zamilujete. Pomáhá vám psát čistý a čitelný kód chytřeji v reálném čase ve vašem preferovaném jazyce.
Získejte editor kódu a získejte plynulé zkušenosti s vestavěnou kompilací, dokončováním kódu, nástroji pro detekci chyb a mnoha dalšími. Nedělejte si starosti s nastavením; vstaňte a začněte pracovat na projektech přímo před vámi.
Při úpravě kódů v cloudu získáte stejný pocit jako při práci se svým desktopem a zároveň si budete užívat stejný výkon a rychlost. CodeTasty rozumí potřebám každého vývojáře; a proto vám umožňuje nainstalovat tolik rozšíření, kolik chcete, abyste zvýšili svou produktivitu. Kromě toho podporuje více než 40 jazyků a sto řádků kódu v jednom souboru.
Vyzkoušejte CodeTasty zdarma a získejte jeden pracovní prostor sandbox, 2 pracovní prostory FTP/SSH, spolupráci, možnost terminálu a 2 spolupracovníky. Můžete také začít s placeným plánem 4 $ měsíčně a získat možnost revidovat své kódy před spuštěním.
Replikovat
Učte se, pište a vytvářejte kód pomocí Replikovat‚s bezplatné, v prohlížeči a pro spolupráci IDE, které podporuje více než 50 jazyků, aniž by trávilo mnoho času nastavováním. Můžete začít kódovat ve svém jazyce na jakémkoli zařízení, operačním systému a platformě.
Pozvěte své spoluhráče, kolegy nebo přátele, aby upravili kód v Dokumentech Google. Svůj kód můžete importovat do GitHubu a spouštět a spolupracovat s repozitáři GitHub s nulovým nastavením. Ať už vám vyhovuje C++, Python, CSS nebo HTML, můžete kód napsat a upravit na jediné platformě.
Navíc v okamžiku, kdy jste připraveni s kódem, okamžitě se spustí do světa. Pokud se také chcete dozvědět o kódu, Replit má více než tři miliony technologů, kreativců, zapálených programátorů a další. Díky spolupráci s vašimi týmy v reálném čase bude váš tým produktivnější. Kromě toho můžete během kódování vytvářet aplikace, roboty atd. pomocí pluginů. Tento nástroj vám také pomáhá vyvíjet vaše projekty přímo z vašeho prohlížeče.
Zaregistrujte si účet a začněte kódovat hned teď.
PaizaCloud
Vytvářejte webové aplikace ve svém prohlížeči pomocí PaizaCloud IDE. Jedná se o webové vývojové prostředí pro Node.Js, MySQL, Django, Java, PHP, Jupyter Notebook, Laravel, WordPress a další.
PaizaCloud vám umožňuje bezproblémově psát vaše kódy, aniž byste se museli obtěžovat nastavením prostředí. Stačí otevřít prohlížeč a vaše prostředí bude připraveno do tří sekund. Ať už používáte Mac, iPad, OS nebo verzi Windows, můžete pracovat se stejným prostředím v každém prohlížeči.
Kromě toho můžete použít prostředí Linux pro snadnější a flexibilnější nastavení webových vývojových prostředí. Upgradem na základní plán můžete také publikovat ideální služby pro své portfolio, jako jsou hostingové služby.
Spouštějte příkazy, spravujte soubory, upravujte kódy a další v samotném prohlížeči. PaizaCloud eliminuje potřebu přidávat příkazy jako vim, ssh atd. pro úpravu souborů nebo přihlášení. Místo toho můžete snadno a efektivně obsluhovat servery, jako byste provozovali desktop.
Vyzkoušejte si bezplatný tarif se 2 jádry a 2 GB paměti. Nebo využijte neomezenou životnost serveru za 9,80 $ měsíčně a získejte 1 GB místa na disku navíc.
Závěr
Toto víceméně pokrývá všechna IDE a editory kódu v době psaní. V tomto seznamu jsem vynechal dva typy nabídek: ty, které jsou zaměřeny čistě na rozhovory a nemají plnohodnotná prostředí (samozřejmě kromě našeho milovaného klasického JSFiddle), a ty, které jakoby něco nenabízely podstatné a mělo jen o něco více než elegantní domovskou stránku.
Pokud potřebujete něco lehkého pro vývoj webu, můžete prozkoumat tyto editory kódu.