Care este cel mai bun lucru după codificare? Editorul de cod, desigur!
Editorii de cod sunt al doilea cel mai important motiv pentru războaiele programatorilor (primul fiind formatarea codului).
Pentru unii, Vim este singurul editor sensibil creat vreodată, în timp ce pentru alții tot ceea ce nu se potrivește cu lumea Emacs, care învârte capul în spirală, asemănătoare Inception, este potrivit doar pentru ridicol. Dacă sunteți în căutarea prost pentru atenție, tot ce trebuie să faceți este să mergeți la o comunitate de programare și să începeți un subiect precum „De ce cred că X (alegeți orice editor de cod popular) sucks/es cel mai bun”, luați niște bere și relaxați-vă.
Argumentele, contraargumentele și insultele vor continua să intre și să iasă din discuție toată noaptea și vor dura multe luni până când veninul din fir se va răci.
Întrebarea este: de ce?
Sigur, ființele umane reușesc să facă mare lucru din toate, dar cred că editorii de cod sunt deosebiti atunci când vine vorba de programatori. Un programator tipic își petrece aproape tot timpul (mai mult de 98%, dacă ar fi să pariez) pe editorul de cod ales. Ei își cunosc modul în care se află editorul – punctele sale forte, punctele slabe, limitele, ciudateniile și pietrele ascunse.
Nimic nu este mai frustrant decât a trebui să te lupți cu editorul atunci când scrii cod (gândește-te la cât de enervant este atunci când trebuie să trimiți un e-mail lung și urgent pe o tastatură nouă!). Editorii de coduri reduc frecarea mentală și vă permit să fiți mai productiv, motiv pentru care sunt atât de importanți și atrag atât de multă atenție.
Deci, care este cel mai bun editor de cod?
Sincer, nici nu voi îndrăzni să merg acolo! 😀 😀
Cu toate acestea, dacă vă interesează dezvoltarea web, există o alternativă la care vreau să vă gândiți – editorii de cod online! De asemenea, le puteți numi editori de cod bazați pe cloud.
Nu confunda editorul de cod cu un mediu de dezvoltare integrat (IDE). Ambele sunt două lucruri diferite și, în calitate de dezvoltator, ar trebui să fiți familiarizați cu aceste IDE în mai multe limbi.
Pe scurt, aceștia sunt editori care se află în întregime pe un server la distanță și sunt accesibile prin browser.
Sună ciudat, nu?
Așa m-am simțit și eu când am dat peste ele acum 3-4 ani. De ce naiba ar vrea cineva să predea totul unui browser prost?
Poate chiar să concureze cu un editor de cod instalat nativ?
Se pare că, în majoritatea cazurilor, și mai ales pentru dezvoltarea web, răspunsul este da. Acum, deși nu am acceptat editorii online ca mediu principal, mă trezesc că le folosesc din ce în ce mai mult în scenarii specifice.
Înainte de a ne aprofunda în ce editori de cod sunt folosiți, să ne oprim și să ne gândim când pot avea sens editorii de cod online.
Cuprins
Configurare zero
Nu știu despre tine, dar configurarea editorului meu preferat după bunul meu plac pe un sistem nou nu este ceva ce aștept cu nerăbdare. Pluginuri, teme, fonturi, comenzi rapide, fragmente, setări . . . Există o listă nesfârșită de lucruri care trebuie echilibrate înainte ca întregul lucru să devină utilizabil. Este ușor să treci cu vederea ceva, doar pentru a te enerva mai târziu când fluxul tău de lucru este întrerupt.
În schimb, nu mai are nimic de-a face cu un editor online odată ce prima configurare s-a încheiat. Build-uri oficiale, actualizări, build-uri de noapte, platforme acceptate, arhitectură de sistem, sincronizare FTP, conducte CI/CD – nimic din toate acestea contează atâta timp cât aveți un browser!
Colaborare
De cele mai multe ori, trebuie să colaborați cu alți dezvoltatori atunci când rezolvați probleme sau depanați ceva.
Editorul de cod tradițional nu este creat pentru acest lucru – nu există niciun spațiu pentru editarea, comentarea sau evidențierea simultană a codului și este dificil să adăugați suport pentru acesta.
Siguranța datelor
Acum, este un dat că niciun proiect de astăzi nu este fără control al versiunii, ceea ce înseamnă că o copie a codului există în depozit în orice moment. Acestea fiind spuse, există momente în care controlul versiunilor nu este suficient:
- Uitați să împingeți comenzile nou create, iar laptopul dvs. ia foc.
- Aveți alte fișiere importante și depozite de date cu care interacționează codul, deși acestea nu fac parte din aplicația live. Ce se întâmplă cu ei dacă laptopul tău ia foc?
(Bine, se pare că sunt obsedat de caietele care iau foc, dar înțelegi ideea, nu?!)
Implementarea disciplinei
Acest lucru ar putea la fel de bine să fie contestat în instanța drepturilor dezvoltatorului (dacă așa ceva există), dar adevărul este că dezvoltatorii își sacrifică rareori capriciile pentru binele comun.
De exemplu, un pasionat de Sublime Text va îmbrățișa pe deplin oricare dintre editorii excelenți ai JetBrains și va găsi orice oportunitate să-și atragă atenția asupra naturii sale de memorie și a performanței mai lente.
Același lucru este valabil și pentru file vs. spații (sau chiar file cu două spații vs. file cu patru spații) – ești naiv dacă crezi că programatorii din echipa ta nu vor bloca claxonele.
În astfel de cazuri, un editor online este un avantaj – tu decizi setările pentru proiecte (chiar și modul în care ar trebui să fie formatat codul) și pur și simplu va refuza să accepte munca până când aderă la toate standardele. Aspru cu individul, poate, dar grozav pentru proiect!
Până acum, am rămas fără cazuri de utilizare, așa că haideți să mergem la ce opțiune avem când vine vorba de editorii de cod online, în special pentru dezvoltarea web.
JSFiddle
In timp ce JSFiddle nu poate înlocui un editor de text cu drepturi depline, face o treabă al naibii de bună în gestionarea scripturilor frontend unice.
Este atât de popular încât site-urile de întrebări și răspunsuri precum StackOverflow acceptă deja încorporarea link-urilor JSFiddle direct în platforma lor.
Pentru a începe rapid lucrurile, JSFiddle oferă câteva boilerplate la început; ceea ce înseamnă că dacă doriți să obțineți o demonstrație, de exemplu, React, a început, tot ce trebuie să faceți este să faceți clic pe butonul relevant și să începeți să scrieți codul. Odată ce apăsați pe Salvare, „lăutărul” este salvat, veți primi o adresă URL permanentă (Uită-te la această lăutărească prostească pe care am creat-o: https://jsfiddle.net/tuqd76c4/ și reține că poți face modificările și apăsați pe Salvare pentru a crea un nou versiunea acestei adrese URL).
Iată ce face JSFiddle o platformă viabilă pentru dezvoltarea web front-end:
- Utilizare gratuită (fără taxe ascunse sau caracteristici freemium). JSFiddle se susține prin reclame (cel puțin la momentul scrierii) și puteți vedea un anunț Adobe în stânga jos a capturii de ecran de mai sus.
- Funcții de colaborare cu coduri — ideale pentru construirea de concepte împreună, interviuri etc.
- Aspecte multiple, dimensiuni de font, teme deschise/întunecate etc.
- Formatarea codului (curățarea), viitorul suport pentru linters (CSS și JS) și multe altele.
Și acum, suspine, suspine, pentru lucrurile rele:
- JSFiddle este un editor pur front-end. Nu există nicio modalitate de a codifica și de a rula limbajul dvs. de backend preferat.
- Nu există niciun concept de fișiere și foldere aici (sau încărcări, de altfel). Tot ce ai este un singur spațiu pentru cod, indiferent cât de mult este.
- JSFiddle nu poate fi folosit pentru a găzdui codul pe serverul dvs. Codul trebuie să fie pe JSFiddle și să fie public tot timpul.
- Nu există nicio modalitate de a construi o conductă CI/CD, de a folosi Git etc.
Acestea fiind spuse, JSFiddle are punctul său favorabil și strălucește atunci când trebuie să oferi dovezi de concept și să colaborezi cu viteza luminii. Este și va rămâne o identitate majoră în rândul editorilor online.
CodeSandbox
CodeSandbox poate fi considerată o interpretare mult mai puternică și completă a JSFiddle. Fidel numelui său, CodeSandbox oferă o experiență completă de editor de cod și un mediu sandbox pentru dezvoltarea front-end.
CodeSandbox este o adevărată putere și un produs dulce și dulce. Aș rămâne fără hârtie dacă aș încerca să enumerez toate avantajele acesteia, dar iată câteva caracteristici ucigașe:
- Suport Npm: Da, puteți adăuga aproape orice pachet disponibil pe npm.
- Fișiere, foldere, module: vă puteți împărți codul în mai multe fișiere, puteți adăuga/elimina imagini din folderul public și puteți construi/import module după cum credeți de cuviință. Fluxul de lucru oglindește pe cel al unui bundler de module modern, astfel încât nu trebuie să configurați (aproape) nimic.
- Suport pentru TypeScript, reîncărcare la cald, export GitHub, găzduire de fișiere statice etc.
- Este construit pe editorul Monaco, aceeași fiară care îl alimentează pe favorit VSCode editor. Acest lucru aduce la îndemână funcții puternice precum „Go To”, „Find References” și refactorizarea necesară!
- Suport pentru fragmente Emmet
- Instrumente DevTools integrate, listing, suprapuneri de erori, cadre de testare (Jest), legături de taste și multe altele.
- CLI puternic pentru a importa direct proiecte locale în CodeSandbox.
Deși versiunea gratuită a CodeSandbox nu acceptă codul privat, puteți obține această funcție (și crește limitele de dimensiune în general) ajutându-i să Patreon pentru doar 5 USD pe lună (plătiți ceea ce doriți, până la 50 USD pe lună).
CodeAnywhere
O problemă cu majoritatea editorilor de cod din această listă (cel puțin până acum) este că se așteaptă să păstrați codul pe serverele lor în orice moment sau să vă solicite să sincronizați codul prin linia de comandă în mod regulat.
Nu așa cu CodeAnywhere.
Cel mai puternic, CodeAnywhere are două caracteristici care ies în evidență pentru mine:
- Imagini container preconstruite pentru peste 72 de limbaje și cadre de programare. Aceasta înseamnă că puteți furniza un nou mediu de dezvoltare chiar din editor! Desigur, codul este găzduit automat pe containerul nou creat, iar fișierele sunt difuzate direct de acolo.
- Conectați-vă la orice. Da, literalmente orice. Nu sunteți obligat să vă stocați codul pe serverele CodeAnywhere. Indiferent dacă codul dvs. se află pe FTP, pe platforme de partajare a fișierelor precum Dropbox, Amazon S3 sau pe platforme sofisticate de control al versiunilor precum GitHub, puteți configura cu ușurință CodeAnywhere pentru a citi și a scrie în acea sursă, folosind editorul de cod doar pentru . . . Ei bine, editarea codului. 😛
Încă un lucru pe care vreau să-l subliniez: dacă nu vă simțiți confortabil cu Git când vine vorba de vizualizarea istoriei și a diferențelor, CodeAnywhere s-ar putea simți ca un oftat de ușurare. Editorul folosește sistemul său de diferențe pentru a compara fișiere, care vă permite să comparați două fișiere în oricare două versiuni (o revizuire este creată de fiecare dată când salvați un fișier).
Există totuși o ușoară problemă cu revizuirile – versiunea gratuită vă permite să mențineți o singură revizuire, în timp ce cel mai mic plan plătit permite cel mult 20 de revizuiri. În general, nu este o problemă, deoarece rar doriți să priviți dincolo de ultima a 20-a revizuire, dar, deoarece majoritatea programatorilor au obiceiul de a apăsa pe Salvare de câteva ori pe minut, poate deveni dureros.
Toate spuse și gata, CodeAnywhere este o ofertă solidă, plăcută pentru cei care doresc să treacă în cloud și să rămână acolo. 🙂 Deoarece puterile sale depășesc codul front-end, în opinia mea, este foarte recomandat!
StackBlitz
Dacă vă interesează cel mai mult front-end și nu vă puteți îndepărta de interfața VSCode, StackBlitz a fost creat doar pentru tine.
Nu vezi nimic special?
N-am făcut-o nici până când am derulat puțin în jos și am dat clic pe butonul Angular. Bum!
Ghici ce, nu a fost creat în mod deliberat pentru a arăta ca VSCode – este construit pe editorul VSCode! Atât de mult încât puteți instala extensii, puteți căuta prin foldere și puteți organiza fișiere așa cum v-ați aștepta de la o instanță obișnuită VSCode.
Dar, stai, mai sunt!
S-ar putea să fi observat sau nu că:
- Toate aplicațiile create pe StackBlitz sunt, de asemenea, implementate automat pe serverele lor! Deci, această aplicație de jucărie Angular pe care tocmai am creat-o este găzduită automat pe https://angular-yvyi2j.stackblitz.io/. Cel mai probabil, adresa URL încă funcționează (se va încărca lent, totuși, așa cum v-ați aștepta când este găzduită gratuit)!
- Puteți bifurca și partaja proiectul. În timp ce distribuiți, aveți un control mai fin asupra a ceea ce pot face alții.
- Vă puteți conecta la un depozit GitHub și, de asemenea, lăsați codul să fie extras/împins direct de acolo. Sau puteți descărca pur și simplu proiectul ca fișier zip în mod vechi.
Dar, stai, mai sunt!
Serios! 😀
Iată lista caracteristicilor oficiale oferite de StackBlitz:
- Suport nativ pentru Firebase (care este ceva pe care nu îl folosesc personal, dar hei, este un avantaj pentru cei care nu doresc să se scufunde în adâncurile tulburi ale backend-ului)
- Intellisense, Căutare Proiect
- Reîncărcare la cald pe măsură ce tastați
- Importați pachete npm
- Editați offline când nu sunteți conectat!
StackBlitz este plin de surprize (frumoase) atunci când vine vorba de eliminarea obstacolelor din dezvoltarea și implementarea Web. Încorporarea VSCode în site-ul dvs. nu mai este ceva de vis!
AWS Cloud9
nor9 a fost, fără îndoială, primul IDE bazat pe browser care a oferit funcții serioase și a preluat ideea de browser-ca-un-editor mainstream. Nu e de mirare că Amazon l-a achiziționat ulterior, iar astăzi, Cloud9 face parte din ofertele AWS.
Dacă sunteți chiar atașat de la distanță (sau interesat de) platforma AWS, Cloud9 este locul unde se încheie căutarea unui editor perfect (bine, aproape perfect).
Să vedem de ce:
- Nu există taxe suplimentare pentru utilizarea Cloud9. Puteți conecta Cloud9 la o instanță de calcul AWS existentă/nouă și plătiți numai pentru acea instanță. De asemenea, este posibil să vă conectați la un server terță parte prin SSH – fără nicio taxă! 🙂
- Suport de primă clasă pentru aplicațiile AWS Serverless (depanare etc.)
- Acces direct terminal la AWS din cadrul editorului (sincer, un editor decent, terminalul cu file este ceea ce încă îmi lipsește în VSCode)
- Peste 40 de limbaje de programare acceptate (Go, C++, Ruby, Node, Python, PHP, Java . . alegeți-vă)
Caracteristicile de colaborare din Cloud9 sunt, de asemenea, de dorit, permițând ca recenziile/interviurile să fie efectuate fără probleme.
O altă caracteristică ucigașă este redarea în stil video a modificărilor aduse unui fișier, făcând procesul de revizuire o bucurie:
Sfatul meu?
Dacă sunteți în AWS, atunci nu așteptați și luați Cloud9 chiar acum. Și dacă nu sunteți încă în cloud, dar v-ați gândit să faceți o mișcare, îmbrățișați AWS și integrați Cloud9 în fluxul dvs. de lucru. Nu poți lua o decizie mai bună în nici un caz!
Gitpod
Gitpod este o interpretare revigorantă a editorilor de cod cloud (sau IDE-uri, dacă doriți) care își propune să vă mențină codul mereu testat și actualizat. Cu alte cuvinte, este profund integrat cu GitHub și, de fiecare dată când adăugați cod, rulează conductele dvs. de testare și CI/CD pentru a vă asigura că codul este întotdeauna 100% sănătos.
Merită verificat dacă îți place experiența VSCode și vrei ceva care să accepte toate limbile și cadrele back-end/front-end majore (Django, Rails, Revel, cum vrei).
Theia
Dacă sunteți un fan ferm din SOLID și un arhitect de software care așteaptă probleme, atunci Theia IDE vă va gâdila osul de separare a preocupărilor. Este un cod IDE codificat cu TypeScript (cinci puncte pentru stil imediat!) care are un front-end și un backend perfect separate. Front-end-ul rulează într-un browser, în timp ce backend-ul poate fi oriunde – mașină locală sau cloud!
Dar asta nu este tot – front-end-ul poate fi rulat ca o aplicație Electron cu un mediu de browser complet funcțional, izolat, oferindu-vă aspectul unei aplicații desktop native dacă doriți.
Spații de cod GitHub
Spații de cod GitHub oferă mașini virtuale de înaltă performanță pentru a rula coduri pentru a dezvolta aplicații web. Folosind Codul Visual Studio, care include un editor și un ecosistem complet, veți găsi mai ușor să lucrați în browser.
Încercați cel mai recent mediu de dezvoltare pentru proiecte, împreună cu imagini pre-construite. Veți experimenta o latență scăzută în diferite regiuni prin scalarea mașinilor dvs. virtuale la 64 GB de RAM și 32 de nuclee. Începeți să codificați cu mediile standardizate, specificațiile hardware, setările editorului, extensiile și cerințele de rulare.
Puteți izola dependențele dintre proiectele cu docker-compose și containere. În plus, previzualizați cu ușurință modificările pe care le-ați făcut în browser și partajați porturi publice și private cu colegii de echipă. De asemenea, puteți edita sau adăuga chiar și detalii tocilar, cum ar fi spații, file, lumină, întuneric, înfrumusețare, mai frumoasă, solarizată, Monokai și multe altele.
Începătorii care doresc să-și încerce norocul pot folosi GitHub Codespaces gratuit cu beneficii limitate, dar veți avea suficiente funcții pentru a continua. Dacă sunteți o echipă sau o întreprindere, puteți începe să utilizați GitHub Codespaces la 40 USD/utilizator/an.
JetBrains
Obțineți medii de dezvoltare cloud proaspete, reproductibile, gata de utilizat și automatizate în câteva secunde și începeți să codificați cu JetBrains IDE – Space. Este singura soluție pentru proiecte software și echipe, asumând responsabilitatea pentru ciclul de viață complet al dezvoltării, începând de la conductele CI/CD și găzduirea depozitelor Git până la pachetele de publicare.
Space este mașina virtuală dedicată cu containerul Docker. Puteți instala toate bibliotecile și instrumentele esențiale de care aveți nevoie în proiect. Eficientizați și accelerați experiența de integrare prin partajarea și reproducerea spațiilor de lucru de codare oricând doriți.
Permiteți noilor veniți să înceapă să dezvolte un cod instantaneu, fără a pierde timpul în dezvoltarea unei mașini locale. Veți obține un IDE complet gata de utilizare ori de câte ori trebuie să începeți să scrieți codul, să depanați și să îl rulați în câteva secunde pentru a testa rezultatul. JetBrains oferă o platformă centralizată pentru gestionarea mediilor de dezvoltare.
Tot ceea ce faci și fiecare resursă pe care o folosești este urmărită într-un singur loc. De asemenea, puteți integra destul de ușor resursele în conducta de dezvoltare. În funcție de proiectul dvs., puteți alege tipul preferat de mașină virtuală pentru a se potrivi dimensiunii proiectului. Spațiul vă va economisi resursele prin hibernarea spațiului de lucru de codare, astfel încât să puteți începe să lucrați la același lucru după pauză.
Începeți călătoria astăzi și experimentați gratuit frumusețea acestei fiare.
CodeTasty
CodeTasty este un IDE cloud extensibil, inteligent și modern, cu multe caracteristici suplimentare pe care le veți iubi. Vă ajută să scrieți cod curat și lizibil mai inteligent, în timp real, în limba preferată.
Obțineți editorul de cod pentru a avea o experiență fără probleme cu compilarea încorporată, completarea codului, instrumentele de detectare a erorilor și multe altele. Nu vă faceți griji cu privire la configurare; ridică-te și începe să lucrezi la proiectele din fața ta.
Veți avea același sentiment ca și când lucrați cu desktopul atunci când vă editați codurile în cloud, în timp ce vă bucurați de aceeași performanță și viteză. CodeTasty înțelege nevoile fiecărui dezvoltator; și, prin urmare, vă permite să instalați câte extensii doriți pentru a vă crește productivitatea. În plus, acceptă peste 40 de limbi și sute de linii de cod într-un singur fișier.
Încercați CodeTasty gratuit pentru a obține un spațiu de lucru sandbox, 2 spații de lucru FTP/SSH, colaborare, opțiune de terminal și 2 colaboratori. De asemenea, puteți începe cu un plan plătit de 4 USD/lună și aveți șansa de a vă revizui codurile înainte de a rula.
Replică
Învață, scrie și creează cod cu ReplicăIDE-ul gratuit, în browser și colaborativ, care acceptă peste 50 de limbi fără a petrece mult timp în setări. Puteți începe să codați în limba dvs. pe orice dispozitiv, sistem de operare și platformă.
Invitați-vă colegii de echipă, colegii sau prietenii să editeze codul în Google Docs. Puteți importa codul în GitHub pentru a rula și a colabora cu depozitele GitHub fără setări. Indiferent dacă vă simțiți confortabil cu C++, Python, CSS sau HTML, puteți scrie codul și îl puteți edita pe o singură platformă.
Mai mult decât atât, în momentul în care ești gata cu codul, acesta intră instantaneu live în lume. Dacă doriți să aflați și despre cod, Replit are peste trei milioane de tehnologi, creatori, programatori pasionați și multe altele. Cu colaborarea în timp real cu echipele dvs., echipa dvs. va fi mai productivă. În plus, puteți crea aplicații, boți etc., cu ajutorul pluginurilor în timpul codificării. Instrumentul vă ajută, de asemenea, să vă dezvoltați proiectele direct din browser.
Înscrieți-vă pentru un cont și începeți acum să codați.
PaizaCloud
Creați aplicații web în browserul dvs. cu PaizaCloud IDE. Este un mediu de dezvoltare web pentru Node.Js, MySQL, Django, Java, PHP, Jupyter Notebook, Laravel, WordPress și multe altele.
PaizaCloud vă permite să vă scrieți codurile fără probleme fără a vă deranja să configurați mediul. Doar deschideți browserul și mediul dvs. va fi gata în trei secunde. Indiferent dacă utilizați versiunea Mac, iPad, OS sau Windows, puteți opera același mediu în fiecare browser.
În plus, puteți utiliza shell-uri Linux pentru a configura medii de dezvoltare bazate pe web mai ușor și mai flexibil. De asemenea, puteți publica serviciile ideale pentru portofoliul dvs., cum ar fi serviciile de găzduire, prin trecerea la planul de bază.
Rulați comenzi, gestionați fișiere, editați coduri și multe altele în browserul propriu-zis. PaizaCloud elimină necesitatea de a adăuga comenzi precum vim, ssh etc., pentru editarea fișierelor sau autentificare. În schimb, puteți opera cu ușurință și eficient serverele la fel cum rulați un desktop.
Faceți un test drive cu planul gratuit cu 2 nuclee și 2 GB memorie. Sau, profitați de o durată de viață nelimitată a serverului cu 9,80 USD/lună și obțineți un spațiu suplimentar de 1 GB pe disc.
Concluzie
Acest lucru acoperă mai mult sau mai puțin toate IDE-urile și editorii de cod din momentul scrierii. Am omis două tipuri de oferte în această listă: cele care sunt concentrate exclusiv pe interviuri și nu au medii cu drepturi depline (cu excepția iubitului nostru clasic JSFiddle, desigur) și cele care nu păreau să ofere ceva substanțial și avea puțin mai mult decât o pagină de pornire elegantă.
Dacă aveți nevoie de ceva ușor pentru dezvoltarea web, puteți explora acești editori de cod.