Sådan vælges den bedste JavaScript-editor til webudvikling

Der er en række muligheder for udviklere, der leder efter en god JavaScript-editor, der giver et mere effektivt og behageligt arbejdsmiljø.

Førende JavaScript-kodeditorer deler mange af de samme store vigtige funktioner, som du kunne forvente, herunder autofuldførelse (kodefærdiggørelse), git-integration og pluginsupport. Men det er de små ting, der kan gøre en editor bedre end en anden for en given udvikler.

Når du først er fortrolig med en kodeeditor og er fortrolig med den arbejdsgang, der gør dig mere effektiv, kan det være svært at skifte redaktør, da du bliver nødt til at genlære genveje for at optimere dine udviklingsprocesser.

Selvom du bliver mere effektiv på lang sigt, er der stadig en stor adgangsbarriere, når du skifter, så det er umagen værd at investere lidt tid foran for at vælge den bedste editor til dine behov.

Lad os gennemgå nogle af de mest populære editormuligheder nu.

Visual Studio-kode

VSCode fra Microsoft er gratis, open source og ret let ved installation. Dette er de facto-editoren for begyndere JavaScript-udviklere, dels fordi den er forudindlæst med et godt sæt funktioner, der ikke kræver yderligere plugins. VSCode er også populær og kan være ideel til mere avancerede brugere, der har brug for at komme i gang hurtigt.

Et unikt træk ved VSCode er, at det kan bruges gennem browseren. Så det nøjagtige samme miljø, som du får på skrivebordet, er muligt på farten ved hjælp af din tablet. En kodeserver skal være konfigureret på et netværk, som du kan få adgang til, for at denne funktion kan fungere, men det er meget praktisk, når den er konfigureret.

Tip : Når jeg arbejder på et stort projekt i en anden IDE, hvor byggeprocessen kan tage noget tid, åbner jeg ofte den enorme JS-outputfil i VSCode og finjusterer den for øjeblikkeligt at teste en ændring i browseren, før jeg anvender den. VSCode håndterer disse store filer svømmende.

Git er indbygget i IDE, men integrationen er ikke så robust som nogle andre redaktører. For eksempel foretrækker brugere af WebStorm push / flette-oplevelsen frem for VSCode.

Du kan installere mange ekstra funktioner, du muligvis har brug for som udvidelser, hvoraf der er tusindvis. Men ikke alle er egentlige funktioner. Kodestykker blandes sammen med funktionerne og tilføjelsesprogrammerne, hvilket kan tage tid at gennemgå og finde de bedste muligheder for at tilføje. Hvis du nogensinde støder på et problem, har VSCode et stort brugerfællesskab; nogen har sandsynligvis haft det samme problem og har løst det.

Hvis du ikke er klar til en fuld betalt IDE med alle klokker og fløjter og ikke er fortrolig med alle de plugins og funktioner, du muligvis har brug for, er dette det logiske udgangspunkt.

Atom

Den gratis Atom-editor blev udviklet af GitHub. Det er faktisk en specialversion af chromium-browseren konverteret til en tekst- og kildekodeditor. Internt bruger den Node.js til pluginsupport.

En overflod af plugins er tilgængelige for alle funktioner, du måtte ønske, men det er ikke så stærkt ud af kassen. Du skal samle et antal plugins for at opbygge dev-miljøet, hvor du kan være så effektiv som muligt. Hvis du arbejder med JavaScript, er der nogle vigtige Atom-plugins for at komme i gang:

  • atom-typeskrift
  • filikoner - for at farve og tildele ikoner til forskellige filtyper
  • atom-forskønne
  • linter

Tip : Aktiver autosave-pakken, som gemmer redigeringer, når fokus går tabt. Det er som standard deaktiveret.

Flere brugere kan arbejde på den samme fil på samme tid, hver med flere markører på skærmen, via teletype-pluginet. Du kan bruge dette til mentoring, parkodning eller samarbejde. Denne funktion adskiller Atom fra andre redaktører.

Git-integrationen er godt implementeret, som du ville forvente af GitHub-softwaren. Også nyttigt er et git-plus-plugin, der lader dig køre git-kommandoer gennem tastaturgenveje uden at bruge git-terminalen.

Atom kan tilpasses til det punkt, hvor du kan redigere en. Mindre fil for at justere IDE-farverne, hvilket er rart, hvis du kan lide at finjustere alle detaljer i dit miljø. Du kan køre et .coffe-script ved opstart, der kan bruges til hurtigt at ændre redaktørens adfærd.

Du kan skrive plugins i JavaScript mod en veldokumenteret editor API. Muligheden for at oprette din egen funktionalitet og adfærd er god at have, hvis behovet skulle opstå.

Redigeringsoplevelsen er jævn, og du kan forbedre den med andre plugins som minimap, men der kræves en vis initial investering for at konfigurere den med alle de funktioner, du ønsker. Fordelen er, at funktioner, du ikke har brug for, ikke tager tid at indlæse, hvilket bremser oplevelsen. Du kan dog opleve en kortvarig træghed, når du indlæser store filer eller skifter faner.

Jeg kunne oprindeligt lide tanken om at redigere CSS-stilarter for at tilpasse IDE-miljøet eller i det mindste have muligheden, hvis jeg nogensinde ville komme med mine egne temaer. Det lyder sjovt, men i praksis er det ikke trivielle projekter at komme med temaer, der indeholder mange variabler. Heldigvis er der mange polerede tema-plugins tilgængelige til download.

Atom er en solid editor, og det passer perfekt til mange udviklere.

Sublim tekst

Sublime Text er en betalt editor, men en gratis prøveversion er tilgængelig. Det er ikke forudindlæst med mange plug-ins til start, men de er selvfølgelig tilgængelige for at imødekomme ethvert behov, du måtte have. Nogle pakker som SideBarEnhancements til omdøbning, flytning, kopiering og indsætning skal sandsynligvis være indbygget i kernepakken, men du kan downloade dem for at aktivere denne funktionalitet.

I lighed med Atom kan det tage lidt tid at få alt klar. Men når den først er i gang, er oplevelsen meget glat. Gem på mistet fokus er også tilgængelig.

Sublim tekst er pæn, fordi den er let, hvilket gør det meget hurtigt at indlæse og arbejde med store projekter eller filer. Implementeringen af ​​"goto anything" -funktionen skiller sig ud, da den kan bruges med filnavne, symboler og linjenumre. De fleste IDE'er har lignende funktioner i en eller anden form, men det er ret rart at kunne kombinere dem og søge med forespørgsler som "fileName @ functionName".

Når du vælger en variabel, vælges alle forekomster af den variabel, og omdøbning af den omdøber alle forekomster automatisk, så denne fælles opgave bliver en meget strømlinet oplevelse.

På mange måder ligner Sublime Text meget Atom. Men Sublime Text har kanten med bedre generel ydeevne og lydhørhed, hvilket er fremragende.

VIM

Vim er også en fri teksteditor og meget konfigurerbar. Oprindeligt navngivet vi og den første teksteditor udviklet til Unix, blev den senere udvidet til en mere funktionsrig editor ved navn Vim. Den er tilgængelig på de fleste Linux-distributioner.

Vim har robuste søge- og syntaksfremhævningsfunktioner, og det er super let, så det kan fungere godt med selv meget store filer. Men det kræver noget arbejde for at få den opsat og klar til brug.

En GUI er tilgængelig, men det er ikke standardgrænsefladen til Vim. Selv aktivering af musesupport kræver en vis handling for at få det til at fungere. Standard er en tastaturtilstand, som nogle måske foretrækker at få adgang til enhver kontrol og funktion gennem genveje.

Når det er sagt, kan Vim være din perfekte IDE, hvis du bruger lidt tid på at lære soft-ins og outs og opsætte al den adfærd og funktioner, du ønsker i den. Hvis du er knust i tide og ikke kan foretage den oprindelige investering for at få ringet til ting, er Vim muligvis ikke det bedste valg for dig.

WebStorm

WebStorm blev udviklet af JetBrains og skiller sig ud fra resten som en ægte JavaScript IDE, da den har alle funktioner integreret lige uden for kassen. Udviklingsmiljøet for forskellige platforme som React, Angular, Vue.js osv. Er problemfrit. Du kan debugge node-scripts og køre tests på en indbygget server. Du kan også udføre og fejle npm-scripts gennem en trævisningsgrænseflade. Og det kræver ikke nogen plugins for at gøre dette.

Imidlertid er plugins tilgængelige for nogle sjældne funktioner, der ikke er indbygget i softwaren direkte. Et plugin, der ikke var inkluderet som standard, var et redigerings- / preview-vindue til markdown split. Men for det meste er alt hvad du måske har brug for der allerede. Det pæne ved dette er, at du vil opdage funktioner, som du ikke vidste eksisterede, og hvor dejligt det er at have dem.

Filer gemmes automatisk, når du arbejder på dem som standard. Når du bruger en anden app, der ikke gør dette, føles manuel gemning meget primitiv i sammenligning. Selvom det ikke er unikt for WebStorm, er implementeringen lidt pænere.

Nogle mennesker stoler måske ikke altid på integriteten af ​​ctrl-z fortrydelsesstakken, men i WebStorm er der indbygget VSC-system, der grundlæggende foretager en forpligtelse hver gang en fil gemmes. Dette er internt og er adskilt fra din git-forpligtelse. Filer gemmes mindst hver gang filindholdsvinduet mister fokus. Så hvis du går et stykke tid uden at forpligte dig til git og er nødt til at gå tilbage eller se en tidligere tilstand efter din sidste forpligtelse, er det ikke noget problem.

Tip : Ctrl-skift op / ned-pil giver dig mulighed for at flytte linjer eller blokke af kode op eller ned, mens editoren automatisk håndterer kommaer / blok parenteser.

Når du arbejder på projekter, der har mange filer, kan rulning af filtræet på jagt efter en bestemt fil gøre dig langsommere. Men hvis et af disse emner allerede er åbent og i fokus, skal du klikke på målikonet rulle projekttræets visning til denne fil. Det er meget praktisk.

Et par ulemper er, at det ikke er gratis. Og til tider kan det være et hukommelsessvin med meget store projekter. Det er blevet bedre gennem årene, og filindholdet indekseres internt, så det er meget hurtigt at søge i store projekter. En nylig opdatering inkluderer også en betydelig forbedring i opstartshastighed.

Generelle redaktør Produktivitetstips

Genvejen til den dobbelte linje / markering (i WebStorm: ctrl-d, i Atom: ctrl-shift-d, men de kan alle gøre det) er en af ​​mine favoritter og kan spare meget tid i mange kodningsscenarier.

Dette vil komme op fra tid til anden, hvor du har en liste over emner og skal ændre det første (eller nogle) tegn på hver linje fra sige '.' til ', men find-erstat er ikke praktisk at bruge. WebStorm tillader alt-klik for at placere flere markører for at foretage de samme redigeringer flere steder. Alligevel finder jeg følgende tilgang hurtigere i nogle scenarier:

  • Placer markøren efter den første periode, og start ændringen manuelt.
  • Tryk på backspace, komma, pil ned. Har en finger på hver tast, og gentag presserne, der starter langsomt, så fremskynder det, mens du går. Når du har fået mønsteret ned, kan du fremskynde det, hvor du gennemgår en liste med 200 linjer på ingen tid.

Det er næsten som at spille en melodi på et klaver (så hurtigt som du kan). Du kan også gøre dette med nummereringslister. Skriv den første linje uden nummeret, duplikér linjen 9 gange, og udfør den samme proces, bortset fra at have en finger på et efterfølgende nummer hver gang. Start de næste 10 linjer med et '1' og udfør den samme proces ved at tilføje et ciffer efter hver '1'.

Hvis du googler “[editor name] cheatsheet”, kan du få en hurtig oversigt fra brugerne til vigtig konfiguration eller genveje til den editor, du prøver. Udskriv det og læs alle genveje for at blive opmærksom på nye funktioner og funktioner, som du ellers ikke bliver udsat for.

I betragtning af hvordan de fremhævede handlinger kan forbedre dine nuværende processer, vil det være gavnligt. Hvis du ser en der kan hjælpe, skal du sætte et mærke ved siden af ​​det, så det er let at huske det næste gang du er i situationen. Selvom du bruger det sjældent og hovedsageligt i begyndelsen, kan det at have en hurtig reference ved hånden mindske friktionen for at lære mere om din editor og spare tid på kontekstskift og søgning i fremtiden.

Jeg går så langt som at finde PDF-versionen, udskrive og laminere siden til fremtidig reference, men for nogle fungerer et bogmærke eller skærmbillede muligvis også.

Konklusion

Hvis du er en nybegynder, der håber at lære JavaScript og bruge et poleret udviklingsmiljø til at starte, er VSCode det oplagte valg, fordi det er let at bruge med mange indbyggede stærke funktioner.

For mere erfarne udviklere, der ved præcis, hvad de vil have, kan Sublime og Atom være at foretrække, da de giver dig fuldstændig kontrol over dit udviklingsmiljø. Du kan vælge mellem tusindvis af funktioner (pakker) til at installere og holde applikationens opstart og ressourceforbrug fri for ekstraudstyr, du ikke har brug for eller ønsker. At bruge lidt tid på hver hjælper dig med at træffe det rigtige valg.

For hard-core strømbrugere, der føler sig hjemme ved hjælp af tastaturet alene, der arbejder på projekter, kan du være mere effektiv med Vim end nogen anden editor. Hvis du sparer den tid, det tager for din hånd at flytte mellem tastaturet og musen, tilføjes det, men det tager noget tid at mestre denne proces!

Endelig, hvis du ikke har noget imod at opretholde et betalt abonnement og ikke er bekymret over hukommelsen eller CPU-begrænsningerne på din udviklingsmaskine, vil WebStorm få dig i gang hurtigt, uanset JavaScript-udviklingsplatforme, transpilere eller opbygningsprocesser, du arbejder med. Det giver et meget praktisk miljø at arbejde i.

Jeg bruger personligt WebStorm som min primære IDE, men bruger stadig regelmæssigt VSCode til at redigere individuelle eller meget store filer, når ydeevne er en prioritet.

Hvis du kunne lide denne artikel, skal du overveje at tjekke JSCharting, et JavaScript-kortbibliotek til udviklere. Du kan også se flere blogindlæg her.