12 bedste online IDE- og kodeeditorer til at udvikle webapplikationer

Hvad er den næstbedste ting at kode? Kodeeditoren, selvfølgelig!

Kodeeditorer er den næstvigtigste årsag til programmør flammekrige (den første er kodeformatering).

For nogle er Vim den eneste fornuftige editor, der nogensinde er skabt, mens for andre er alt, hvad der ikke passer til den Inception-lignende spiral-hovedsnurrende verden af ​​Emacs kun egnet til latterliggørelse. Hvis du dårligt leder efter opmærksomhed, er alt hvad du skal gøre at gå til et programmeringsfællesskab og starte en tråd som “Hvorfor jeg synes, X (vælg en hvilken som helst populær kodeeditor) er den bedste”, snup en øl og slap af.

Argumenter, modargumenter og fornærmelser vil blive ved med at vælte ind og ud af diskussionen natten lang, og det vil tage mange måneder, før giften i tråden vil køle af.

Spørgsmålet er: hvorfor?

Selvfølgelig formår mennesker at gøre et stort nummer ud af alting, men jeg tror, ​​at kodeeditorer er særlige, når det kommer til programmører. En typisk programmør bruger næsten al deres tid (mere end 98%, hvis jeg skulle satse) på den valgte kodeeditor. De kender deres vej rundt i redaktøren – dens styrker, svagheder, grænser, særheder og skjulte perler.

Intet er mere frustrerende end at skulle kæmpe med editoren, når du skriver kode (tænk på, hvor irriterende det er, når du skal skyde en lang og presserende e-mail af på et nyt tastatur!). Kodeeditorer reducerer mental friktion og giver dig mulighed for at være mere produktiv, hvilket er grunden til, at de er så vigtige og får så meget opmærksomhed.

Så hvilken er den bedste kodeeditor?

Helt ærligt, jeg tør ikke engang gå der! 😀 😀

Men hvis du er til webudvikling, er der et alternativ, som jeg vil have dig til at tænke på – online kodeeditorer! Du kan også kalde dem skybaserede kodeeditorer.

Forveksle ikke kodeeditor med et integreret udviklingsmiljø (IDE). Begge er to forskellige ting, og som udvikler bør du være bekendt med disse flersprogede IDE.

I en nøddeskal er disse editorer, der udelukkende ligger på en fjernserver og er tilgængelige via browseren.

Det lyder mærkeligt, ikke?

Det havde jeg det også, da jeg stødte på dem for 3-4 år siden. Hvorfor i alverden skulle nogen have lyst til at overlade alt til en dum browser?

Kan det overhovedet konkurrere med en indbygget installeret kodeeditor?

Det viser sig, at i de fleste tilfælde, og især for webudvikling, er svaret ja. Nu, mens jeg ikke har omfavnet online redaktører som mit primære medie, finder jeg mig selv i at bruge dem mere og mere i specifikke scenarier.

Før vi dykker ned i, hvilke kodeeditorer der er derude for at blive brugt, lad os holde pause og tænke over, hvornår online kodeeditorer kan give mening.

Nul opsætning

Jeg ved ikke med dig, men det er ikke noget, jeg ser frem til at sætte min yndlingseditor op efter min smag på et nyt system. Plugins, temaer, skrifttyper, genveje, uddrag, indstillinger . . . Der er en endeløs liste over ting, der skal balanceres, før det hele bliver brugbart. Det er nemt at overse noget, for senere at blive irriteret, når dit arbejdsflow bliver afbrudt.

Derimod er der intet at gøre med en online editor, når den første opsætning er overstået. Officielle builds, opdateringer, natlige builds, understøttede platforme, systemarkitektur, FTP-synkronisering, CI/CD-pipelines – intet af det betyder noget, så længe du har en browser!

Samarbejde

Oftere end ikke, er du nødt til at samarbejde med andre udviklere, når du arbejder med problemer eller fejlfinder noget.

Den traditionelle kodeeditor er ikke bygget til dette – der er ikke mulighed for samtidig koderedigering, kommentering eller fremhævning, og det er udfordrende at tilføje støtte til det.

Datasikkerhed

Nu er det givet, at intet projekt i dag er uden versionskontrol, hvilket betyder, at der til enhver tid findes en kopi af koden på depotet. Når det er sagt, er der tidspunkter, hvor versionskontrol ikke er nok:

  • Du glemmer at skubbe nyoprettede commits, og din bærbare computer brænder.
  • Du har andre vigtige filer og datadumps, som din kode interagerer med, selvom disse ikke er en del af live-applikationen. Hvad sker der med dem, hvis din bærbare computer brænder?

(Okay, det ser ud til, at jeg er besat af, at notesbøger brænder, men du forstår pointen, ikke?!)

Håndhævelse af disciplin

Dette kan lige så godt argumenteres imod i domstolen for udviklerrettigheder (hvis sådan noget eksisterer), men sandheden i sagen er, at udviklere sjældent ofrer deres luner for almenvellet.

For eksempel vil en hardcore Sublime Text-entusiast nogensinde fuldt ud omfavne enhver af JetBrains’ fremragende redaktører og vil finde enhver mulighed for at pege på dens hukommelseshungrende natur og langsommere ydeevne.

Det samme gælder for tabulatorer vs. mellemrum (eller endda to-mellemrumstabulatorer vs. fire-mellemrumstabler) — du er naiv, hvis du tror, ​​at programmørerne på dit hold ikke vil låse hornene.

I sådanne tilfælde er en online editor en velsignelse – du bestemmer indstillingerne for projekter (selv hvordan koden skal formateres), og den vil simpelthen nægte at acceptere arbejde, indtil den overholder alle standarderne. Måske hårdt for den enkelte, men fantastisk til projektet!

  Tiny Deduplicator søger efter duplikerede filer baseret på hashværdi

Efterhånden er jeg ved at løbe tør for use cases, så lad os skynde os til, hvilken mulighed vi har, når det kommer til online kodeeditorer, især til webudvikling.

JSFiddle

Mens JSFiddle kan ikke erstatte en fuldgyldig teksteditor, den gør et pokkers godt stykke arbejde med at håndtere enkeltstående frontend-scripts.

Det er så populært, at Q&A-websteder som StackOverflow allerede understøtter indlejring af JSFiddle-links direkte i deres platform.

For at komme hurtigt i gang tilbyder JSFiddle nogle kedelplader i starten; hvilket betyder, at hvis du ønsker at få en demo af f.eks. React, startet, skal du blot klikke på den relevante knap og begynde at skrive koden. Når du trykker på Gem, gemmes “violinen”, du får en permanent URL (tjek denne fjollede violin, jeg lavede: https://jsfiddle.net/tuqd76c4/ og bemærk, at du kan foretage dine ændringer og trykke på Gem for at oprette en ny version af denne URL).

Her er, hvad der gør JSFiddle til en levedygtig platform for front-end webudvikling:

  • Gratis at bruge (ingen skjult gebyr eller freemium-funktioner). JSFiddle understøtter sig selv gennem annoncer (i hvert fald i skrivende stund), og du kan se en Adobe-annonce nederst til venstre på skærmbilledet ovenfor.
  • Kodesamarbejdsfunktioner – ideel til at bygge koncepter sammen, interviews osv.
  • Flere layouts, skriftstørrelser, lyse/mørke temaer osv.
  • Kodeformatering (rydning), kommende understøttelse af linters (CSS og JS) og mere.

Og nu, hulk, hulk, for de dårlige ting:

  • JSFiddle er en ren front-end editor. Der er ingen måde at kode og køre dit foretrukne backend-sprog på.
  • Der er intet begreb om filer og mapper her (eller uploads, for den sags skyld). Alt du har er en enkelt plads til kode, uanset hvor meget der er af den.
  • JSFiddle kan ikke bruges til at hoste kode på din server. Koden skal være på JSFiddle og er offentlig hele tiden.
  • Der er ingen måde at bygge en CI/CD-pipeline på, bruge Git osv.

Når det er sagt, så har JSFiddle sit søde punkt og skinner, når du skal uddele proof-of-concept og samarbejde med lysets hastighed. Det er og bliver en stor identitet blandt online-redaktører.

KodeSandbox

KodeSandbox kan opfattes som en meget mere kraftfuld og komplet version af JSFiddle. Tro mod sit navn giver CodeSandbox en komplet koderedigeringsoplevelse og et sandkassemiljø til frontend-udvikling.

CodeSandbox er et rigtigt kraftcenter og sødt, sødt produkt. Jeg ville løbe tør for papir, hvis jeg forsøger at liste alle dets fordele ned, men her er nogle dræbende funktioner:

  • Npm support: Ja, du kan tilføje stort set enhver pakke, der er tilgængelig på npm.
  • Filer, mapper, moduler: Du kan opdele din kode i flere filer, tilføje/fjerne billeder fra den offentlige mappe og bygge/importere moduler, som det passer dig. Arbejdsgangen afspejler en moderne modulbundter, så du behøver ikke at sætte (næsten) noget op.
  • Understøttelse af TypeScript, hot reloading, GitHub-eksport, statisk filhosting osv.
  • Den er bygget på Monaco editor, det samme dyr, der driver favoritten VSCode redaktør. Dette bringer kraftfulde funktioner som “Gå til”, “Find referencer” og nødvendig refactoring lige ved hånden!
  • Uddrag støtte til Emmet
  • Integrerede DevTools, linting, fejloverlejringer, testrammer (Jest), tastebindinger og mere.
  • Kraftig CLI til direkte import af lokale projekter til CodeSandbox.

Selvom den gratis version af CodeSandbox ikke understøtter privat kode, kan du få denne funktion (og øge størrelsesgrænserne generelt) ved at hjælpe dem med Patreon for så lidt som $5 om måneden (betal hvad du vil, op til $50 om måneden).

CodeAnywhere

Et problem med de fleste af kodeeditorerne på denne liste (i hvert fald indtil videre) er, at de forventer, at du beholder koden på deres servere til enhver tid, eller kræver, at du synkroniserer kode via kommandolinjen regelmæssigt.

Ikke sådan med CodeAnywhere.

Når det er stærkest, har CodeAnywhere to funktioner, der skiller sig ud for mig:

  • Forudbyggede containerbilleder til 72+ programmeringssprog og rammer. Det betyder, at du kan klargøre et nyt udviklingsmiljø lige fra editoren! Selvfølgelig bliver koden automatisk hostet på den nyoprettede container, og filer bliver serveret direkte derfra.
  • Forbind til hvad som helst. Ja, bogstaveligt talt hvad som helst. Du er ikke forpligtet til at gemme din kode på CodeAnywheres servere. Uanset om din kode ligger på FTP, fildelingsplatforme som Dropbox, Amazon S3 eller på sofistikerede versionskontrolplatforme som GitHub, kan du nemt konfigurere CodeAnywhere til at læse fra og skrive til den kilde ved at bruge kodeeditoren udelukkende til . . . Nå, koderedigering. 😛

En ting mere, jeg har lyst til at påpege: Hvis du ikke er tryg ved Git, når det kommer til at se historie og forskelle, kan CodeAnywhere føles som et lettelsens suk. Editoren bruger sit diff-system til at sammenligne filer, som giver dig mulighed for at sammenligne to filer på tværs af to vilkårlige revisioner (en revision oprettes hver gang du gemmer en fil).

Der er dog en lille hake med revisioner – den gratis version giver dig mulighed for kun at opretholde én revision, mens den mindste betalte plan maksimalt tillader 20 revisioner. Generelt er det ikke et problem, da du sjældent ønsker at se ud over den sidste 20. revision, men da de fleste programmører har for vane at trykke på Gem et par gange i minuttet, kan det blive smertefuldt.

  Sådan sletter du fotoalbum på iPhone, iPad og Mac

Alt sagt og gjort, CodeAnywhere er et solidt, behageligt tilbud til dem, der ønsker at flytte til skyen og blive der. 🙂 Da dens kræfter rækker ud over front-end-kode, kan det efter min mening stærkt anbefales!

StackBlitz

Hvis du for det meste er til front-end og ikke kan bevæge dig væk fra VSCode-grænsefladen, StackBlitz blev skabt til dig.

Ser du ikke noget særligt?

Det gjorde jeg heller ikke, før jeg rullede lidt ned og klikkede på Angular-knappen. Bom!

Gæt hvad, det er ikke bevidst skabt til at ligne VSCode – det er bygget på VSCode-editoren! Så meget, at du kan installere udvidelser, søge gennem mapperne og organisere filer, præcis som du ville forvente af en almindelig VSCode-instans.

Men vent, der er mere!

Du har måske eller måske ikke bemærket, at:

  • Alle applikationer oprettet på StackBlitz bliver også implementeret automatisk på deres servere! Så denne Angular legetøjsapp, jeg lige har oprettet, hostes automatisk på https://angular-yvyi2j.stackblitz.io/. Mest sandsynligt virker URL’en stadig (vil dog indlæses langsomt, som du ville forvente, når den hostes gratis)!
  • Du kan dele projektet. Mens du deler, får du bedre kontrol over, hvad andre kan gøre.
  • Du kan oprette forbindelse til et GitHub-lager og også lade kode trækkes/skubbes direkte derfra. Eller du kan blot downloade projektet som en zip-fil på den gode måde.

Men vent, der er mere!

Helt seriøst! 😀

Her er listen over officielle funktioner, der tilbydes af StackBlitz:

  • Indbygget understøttelse af Firebase (hvilket er noget, jeg ikke personligt bruger, men hey, det er en velsignelse for dem, der ikke ønsker at dykke ned i de skumle dybder af backend)
  • Intellisense, projektsøgning
  • Varm genindlæsning, mens du skriver
  • Importer npm-pakker
  • Rediger offline, når der ikke er forbindelse!

StackBlitz er fuld af (smukke) overraskelser, når det kommer til at fjerne forhindringerne fra webudvikling og implementering. Indlejring af VSCode på din hjemmeside er ikke drømmens ting længere!

AWS Cloud9

Sky9 var uden tvivl den første browserbaserede IDE, der tilbød seriøse funktioner og tog ideen om browser-som-en-editor mainstream. Ikke underligt, at Amazon senere købte det, og i dag er Cloud9 en del af AWS-tilbuddene.

Hvis du endda er eksternt knyttet til (eller interesseret i) AWS-platformen, er Cloud9, hvor din søgen efter en perfekt (okay, næsten perfekt) editor slutter.

Lad os se hvorfor:

  • Der er ingen ekstra gebyrer for at bruge Cloud9. Du kan forbinde Cloud9 til en eksisterende/ny AWS-beregningsinstans, og du betaler kun for den instans. Det er også muligt at oprette forbindelse til en tredjepartsserver over SSH – helt uden gebyr! 🙂
  • Førsteklasses support til AWS-serverløse applikationer (fejlretning osv.)
  • Direkte terminaladgang til AWS inde fra editoren (helt ærligt, en anstændig in-editor, faneterminalen er, hvad jeg stadig savner i VSCode)
  • Over 40 programmeringssprog understøttet (Go, C++, Ruby, Node, Python, PHP, Java … vælg selv)

Samarbejdsfunktionerne i Cloud9 er også ønskværdige, hvilket gør det muligt at gennemføre anmeldelser/interviews problemfrit.

En anden dræberfunktion er en video-stil afspilning af ændringerne i en fil, hvilket gør processen med at gennemgå en fornøjelse:

Mit råd?

Hvis du er til AWS, så vent ikke og snup Cloud9 lige nu. Og hvis du ikke er i skyen endnu, men har tænkt på at tage et skridt, så omfavn AWS og integrer Cloud9 i din arbejdsgang. Du kan ikke træffe en bedre beslutning på nogen måde!

Gitpod

Gitpod er et forfriskende bud på cloud-kodeeditorer (eller IDE’er, om du vil), der har til formål at holde din kode altid testet og opdateret. Med andre ord er den dybt integreret med GitHub, og hver gang du tilføjer kode, kører den dine test- og CI/CD-pipelines for at sikre, at koden altid er 100 % sund.

Værd at tjekke ud, hvis du elsker VSCode-oplevelsen og vil have noget, der understøtter alle større back-end/front-end sprog og rammer (Django, Rails, Revel, you name it).

Theia

Hvis du er en ihærdig SOLID fan og en nit-plukker softwarearkitekt, Theia IDE vil kildre din adskillelse-af-bekymringsknogle. Det er en TypeScript-kodet (med det samme fem point for stil!) kode IDE, der har en perfekt adskilt front-end og backend. Frontenden kører i en browser, mens backend kan være hvor som helst – lokal maskine eller skyen!

Men det er ikke alt – front-end’en kan køres som en Electron-app med et fuldt funktionelt, isoleret browsermiljø, der giver dig udseendet og fornemmelsen af ​​en indbygget desktop-app, hvis du trænger til det.

GitHub-koderum

GitHub-koderum leverer højtydende virtuelle maskiner til at køre koder for at udvikle webapplikationer. Ved at bruge Visual Studio Code, der inkluderer en editor og et komplet økosystem, vil du finde det nemmere at arbejde i browseren.

Prøv det nyeste udviklermiljø til projekterne sammen med forudbyggede billeder. Du vil opleve lav latenstid på tværs af forskellige regioner ved at skalere dine VM’er op til 64 GB RAM og 32 kerner. Begynd at kode med de standardiserede miljøer, hardwarespecifikationer, editorindstillinger, udvidelser og runtime-krav.

Du kan isolere afhængighederne mellem projekterne med docker-compose og containere. Derudover kan du nemt forhåndsvise de ændringer, du har foretaget, i browseren og dele offentlige såvel som private porte med holdkammerater. Du kan også redigere eller tilføje endda nørdede detaljer som mellemrum, tabs, lys, mørk, forskønne, smukkere, solariseret, Monokai og mange flere.

  Sådan oprettes og opdateres en tabel med figurer i Microsoft Word

Begyndere, der ønsker at prøve lykken, kan bruge GitHub Codespaces gratis med begrænsede fordele, men du har nok funktioner til at fortsætte. Hvis du er et team eller en virksomhed, kan du begynde at bruge GitHub Codespaces til $40/bruger/år.

JetBrains

Få friske, reproducerbare, brugsklare og automatiserede space cloud-udviklermiljøer på få sekunder, og begynd at kode med JetBrains IDE – Space. Det er den eneste løsning til softwareprojekter og -teams ved at tage ansvar for den komplette udviklingslivscyklus fra CI/CD-pipelines og hosting af Git-lagre til udgivelsespakkerne.

Space er den dedikerede virtuelle maskine med Docker-beholderen. Du kan installere alle de væsentlige biblioteker og værktøjer, du har brug for i projektet. Strømlin og fremskynd onboarding-oplevelsen ved at dele og reproducere de kodende arbejdsområder, når du vil.

Tillad nytilkomne at begynde at udvikle en kode med det samme uden at spilde tid på at udvikle en lokal maskine. Du får en komplet IDE, der er klar til brug, hver gang du skal begynde at skrive koden, fejlfinde og køre den på få sekunder for at teste outputtet. JetBrains tilbyder en centraliseret platform til styring af udviklermiljøerne.

Alt, hvad du gør, og hver ressource, du bruger, spores på et enkelt sted. Du kan også ganske nemt integrere ressourcerne i udviklingspipelinen. I henhold til dit projekt kan du vælge den foretrukne type Virtual Machine, der passer til projektstørrelsen. Space vil spare dine ressourcer ved at sætte det kodende arbejdsområde i dvale, så du kan begynde at arbejde på det samme efter pausen.

Start din tur i dag og oplev skønheden ved dette udyr gratis.

CodeTasty

CodeTasty er en udvidelsesbar, smart og moderne cloud-IDE med mange ekstra funktioner, du vil elske. Det hjælper dig med at skrive ren og læsbar kode mere smart i realtid på dit foretrukne sprog.

Få kodeeditoren til at få en problemfri oplevelse med indbygget kompilering, kodefuldførelse, fejlfindingsværktøjer og meget mere. Du skal ikke bekymre dig om opsætningen; stå op og begynde at arbejde på projekterne lige foran dig.

Du vil få den samme følelse som at arbejde med dit skrivebord, når du redigerer dine koder i skyen, mens du nyder den samme ydeevne og hastighed. CodeTasty forstår hver enkelt udviklers behov; og giver dig derfor mulighed for at installere så mange udvidelser, som du vil, for at øge din produktivitet. Derudover understøtter den over 40 sprog og hundrede linjer kode i én fil.

Prøv CodeTasty gratis for at få et sandbox-arbejdsområde, 2 FTP/SSH-arbejdsområder, samarbejde, terminalmulighed og 2 samarbejdspartnere. Du kan også starte med en betalt plan på $4/måned og få chancen for at revidere dine koder, før du kører.

Gentag

Lær, skriv og opret kode med Gentag‘s gratis, in-browser og kollaborative IDE, der understøtter over 50 sprog uden at bruge meget tid på opsætninger. Du kan begynde at kode på dit sprog på enhver enhed, operativsystem og platform.

Inviter dine holdkammerater, kolleger eller venner til at redigere koden i Google docs. Du kan importere din kode til GitHub for at køre og samarbejde med GitHub-lagre med nul opsætninger. Uanset om du er fortrolig med C++, Python, CSS eller HTML, kan du skrive koden og redigere den på en enkelt platform.

Desuden, i det øjeblik du er klar med koden, går den øjeblikkeligt live til verden. Hvis du også vil lære om kode, har Replit mere end tre millioner teknologer, kreative, passionerede programmører og mere. Med realtidssamarbejde med dine teams bliver dit team mere produktivt. Derudover kan du oprette applikationer, bots osv. ved hjælp af plugins, mens du koder. Værktøjet hjælper dig også med at udvikle dine projekter direkte fra din browser.

Tilmeld dig en konto og begynd at kode nu.

PaizaCloud

Byg webapplikationer i din browser med PaizaCloud IDE. Det er et webudviklingsmiljø til Node.Js, MySQL, Django, Java, PHP, Jupyter Notebook, Laravel, WordPress og mere.

PaizaCloud giver dig mulighed for problemfrit at skrive dine koder uden at bekymre dig om at opsætte miljøet. Bare åbn browseren, og dit miljø vil være klar inden for tre sekunder. Uanset om du bruger Mac-, iPad-, OS- eller Windows-version, kan du betjene det samme miljø i alle browsere.

Desuden kan du bruge Linux-skaller til at opsætte webbaserede udviklingsmiljøer nemmere og mere fleksibelt. Du kan også udgive de ideelle tjenester til din portefølje, såsom hostingtjenester, ved at opgradere til den grundlæggende plan.

Kør kommandoer, administrer filer, rediger koder og mere i selve browseren. PaizaCloud eliminerer behovet for at tilføje kommandoer som vim, ssh osv., til at redigere filer eller logge på. I stedet kan du nemt og effektivt betjene serverne, ligesom du kører et skrivebord.

Tag en prøvetur med den gratis plan med 2 kerner og 2 GB hukommelse. Eller benyt dig af ubegrænset serverlevetid med $9,80/måned og få en ekstra 1 GB diskplads.

Konklusion

Dette dækker mere eller mindre alle IDE’er og kodeeditorer derude i skrivende stund. Jeg har udeladt to typer tilbud på denne liste: dem, der udelukkende er fokuseret på interviews og ikke har fuldgyldige miljøer (undtagen vores elskede klassiske JSFiddle, selvfølgelig), og dem, der ikke syntes at tilbyde noget betydelig og havde lidt mere end en slank hjemmeside.

Hvis du har brug for noget letvægts til webudviklingen, kan du udforske disse kodeeditorer.