JavaScript brukes til mange forskjellige typer applikasjoner i dag. Ofte fungerer JavaScript med HTML5 og CSS for å bygge nettgrensesnitt. Men JavaScript hjelper også med å bygge mobilapplikasjoner, og det har funnet et viktig sted på baksiden i form av Node.js-servere. Heldigvis stiger JavaScript-utviklingsverktøy - både redaktører og IDEer - for å møte de nye utfordringene.
Hvorfor bruke en IDE i stedet for en redaktør? Hovedårsaken er at en IDE kan feilsøke og noen ganger profilere koden din. IDE har også støtte for ALM-systemer, og integreres med slike som Git, GitHub, Mercurial, Subversion og Perforce for versjonskontroll. Men ettersom flere redaktører legger til kroker til disse systemene, blir ALM-støtte mindre en differensierer.
Formørkelse 2018 med JavaScript-utviklingsverktøy
Tilbake i gamle dager da Java Swing var nytt og spennende, likte jeg å bruke Eclipse for Java-utvikling, men gikk snart over til andre Java IDEer. For fem-pluss år siden, da jeg gjorde noen Android-utvikling med Eclipse, fant jeg opplevelsen OK, men pussig. Da jeg prøvde å bruke Eclipse Luna med JSDT for JavaScript-utvikling i 2014, viste det stadig falske positive feil for gyldig kode som passerte JSHint.
Relatert video: Hva er JavaScript? Skaper Brendan Eich forklarer
Brendan Eich, skaper av JavaScript-programmeringsspråket, forklarer hvordan språket brukes, og hvorfor det fortsatt er en favoritt blant programmerere for brukervennligheten.
Heldigvis har flere leverandører og open source-prosjekter trappet opp på platen siden den gang. Eclipse 2018 med JavaScript-utviklingsverktøy har en anstendig JavaScript-editor og en Chrome-basert feilsøking, men den vet ikke om TypeScript, som brukes av Angular, eller om ES6- og JSX-filer, som brukes av React.
Eclipse har alltid hatt en enorm markedsplass for plugins. For TypeScript, vurder det gratis TypeScript 1.0.0-pluginet. For Angular, TypeScript og ES6, kan du vurdere den kommersielle Angular IDE (av CodeMix, tidligere Webclipse), og for React-prosjekter med JSX-filer, prøv TypeScript IDE med åpen kildekode. Hvis du legger til mer enn én, må du løse tvisten om hvilken som skal redigere TypeScript-filer, men det er ikke så farlig.
CodeMix-verktøy faktureres som å legge Visual Studio Code smarts til Eclipse. I motsetning til de fleste Eclipse-plugins er Angular IDE fra CodeMix ikke gratis, men det har en gratis prøveperiode på 45 dager. Gitt at Visual Studio Code er gratis, vil jeg vurdere det før jeg betaler for Angular IDE.
Kostnad: Gratis; Vinkel IDE av CodeMix, $ 29 (personlig) eller $ 48 (kommersiell) per år. Plattform: Windows, MacOS og Linux.
ActiveState Komodo IDE
Jeg har vært bruker og fan av Komodo IDE siden den ble introdusert i 2001. Selv om nyere produkter som Visual Studio Code og WebStorm har overgått det på noen områder, er det fortsatt en god redaktør og IDE.
Komodo IDE tilbyr avansert JavaScript-redigering, syntaksutheving, navigering og feilsøking, men den inkluderer ikke JavaScript-kodekontroll. For det kan du alltid kjøre JSHint i et skall.
Komodo støtter dusinvis av programmerings- og markup-språk. Med sitt brede utvalg av programmerings- og markup-språkstøtte, inkludert refactoring, feilsøking og profilering, er Komodo IDE et veldig godt valg for end-to-end-utvikling på språk med åpen kildekode.
Komodo har en kodereformeringsmodul for alle språkene som den gir kodeintelligens for: PHP, Perl, Python, Ruby, Tcl, JavaScript og Node.js. Dessverre begrenser den "minst fellesnevneren" til denne tilnærmingen evnene til å gi nytt navn til variabler og klassemedlemmer, og til å trekke ut kode til en metode. Dette er likevel noen av de mest nyttige tilfellene.
Komodo IDE har både kolonnedigering og flere valg. Dette gir nesten paritet med Sublime Text og TextMate når det gjelder masseendringer. Så lenge vi gjør sammenligningen, er Komodo mer en IDE, mens Sublime Text er mye raskere. Og så lenge vi diskuterer ytelse, har Komodos hastighet forbedret seg merkbart sammenlignet med eldre versjoner, når det gjelder skjermtegning, søk og syntakskontroll.
Komodo IDE har flere funksjoner som de fleste konkurrerende produkter mangler. Den ene er HTTP-inspektøren, som er utmerket for feilsøking av Ajax-tilbakeringinger. En annen er verktøysettet Rx (regulært uttrykk eller regex), som er en fin måte å bygge og teste vanlige uttrykk for JavaScript, Perl, PHP, Python og Ruby.
Samarbeid er en annen Komodo IDE-differensierer - tenk på det som Google Docs for kode. Du kan opprette økter for grupper av filer, legge til kontakter i økter som samarbeidspartnere, og deretter jobbe sammen om de samme filene samtidig, med nesten sanntids synkronisering.
Samarbeid er ikke en erstatning for kildekodekontroll, men det er et nyttig supplement. Komodo IDE integrerer kildekodekontroll ved hjelp av CVS, Subversion, Perforce, Git, Mercurial og Bazaar. Bare de grunnleggende versjonskontrolloperasjonene støttes. Avanserte operasjoner, for eksempel forgrening, må gjøres ved hjelp av en egen kildekodekontrollklient.
Selv om Komodo ikke har et eget JavaScript-dokumentformater, benytter den seg av den beste gratis open source for dette formålet. Ut av boksen er JS Beautifier som standardformatør for JavaScript-filer, men ytterligere ni alternativer er tilgjengelige via en rullegardinmeny.
Komodo IDE støtter feilsøking av JavaScript på klientsiden i Chrome, og den kan feilsøke Node.js både lokalt og eksternt. Det feilsøker også Perl, Python, PHP, Ruby, Tcl og XSLT.
Komodo IDE har en DOM-visning som lar deg se XML- og HTML-dokumenter som sammenleggbare trær. Det lar deg også gjøre XPath-søk for å filtrere treet.
Komodos kodeprofilering og enhetstestingsmoduler støtter ikke JavaScript. Imidlertid støttes JavaScript og Node.js av Komodos Code Intelligence-modul, som implementerer kodesurfing, autofullføring og ringetips.
Komodo IDE kan publisere grupper av filer via FTP, SFTP, FTPS eller SCP. Komodo kan også synkronisere filer og oppdage potensielle publiseringskonflikter som kan føre til at du overskriver andres endringer.
Samlet sett er Komodo en god, men ikke god JavaScript IDE, og en god, men ikke bra JavaScript-editor. Imidlertid kan det godt tjene dine behov, spesielt hvis du også jobber med Perl, Python, PHP, Ruby, Tcl eller XSLT.
Kostnad: $ 295, pluss $ 87 per år for oppgraderinger og support. Plattform: Windows (7 eller høyere), MacOS (10.9 eller høyere), Linux.
Apache NetBeans
NetBeans har veldig god støtte for JavaScript, HTML5 og CSS3 i webprosjekter, og den støtter Cordova / PhoneGap-rammeverket for å bygge JavaScript-baserte mobilapplikasjoner. NetBeans er ikke den raskeste IDE på blokken, men det er en av de mer komplette. Og selvfølgelig er prisen riktig: NetBeans er tilgjengelig gratis under en åpen kildekode-lisens.
NetBeans JavaScript-editor gir syntaksutheving, autofullføring og kodefelling, omtrent som du forventer. JavaScript-redigeringsfunksjonene fungerer også for JavaScript-kode innebygd i PHP-, JSP- og HTML-filer. jQuery-støtte er bakt i redaktøren. NetBeans 8.2 har ny eller forbedret støtte for Node.js og Express, Gulp, Grunt, AngularJS, Knockout.js, Jade, Mocha og Selenium.
Kodeanalyse kjører i bakgrunnen mens du redigerer, og gir advarsler og tips. Feilsøking fungerer i den innebygde WebKit-nettleseren og i Chrome med NetBeans Connector installert. Feilsøkingsprogrammet kan angi DOM-, linje-, hendelses- og XMLHttpRequest-brytpunkter, og det vil vise variabler, klokker og samtalestakken. Et integrert nettleserloggvindu viser unntak, feil og advarsler i nettleseren.
NetBeans kan konfigurere og utføre enhetstesting med JsTestDriver, en JAR-fil (Java-arkiv) du kan laste ned gratis. Feilsøking av enhetstester aktiveres automatisk hvis du angir Chrome med NetBeans Connector som en av JsTestDriver-nettleserne når du konfigurerer JsTestDriver i Tjenester-vinduet.
Når du feilsøker et webapplikasjon i Chrome med NetBeans Connector og redigerer CSS fra Chrome Developer Tools, blir endringene fanget opp av NetBeans og lagret i CSS-filene. Imidlertid, hvis CSS-filene dine ble generert fra stilarkene Less eller Sass, må du oppdatere kildearket manuelt fordi CSS-filene bare er kompilert utdata.
I den innebygde WebKit-nettleseren og i Chrome med NetBeans Connector installert, kan du bruke NetBeans nettverksmonitor til å vise forespørselsoverskrifter, svar og samtalestabler for REST-kommunikasjon. For WebSocket-kommunikasjon vises både overskrifter og tekstrammer. Totalt sett gir NetBeans en litt bedre feilsøkingsopplevelse med Chrome enn du får i Firefox med Firebug.
NetBeans integrerer kildekodekontroll med Git, Subversion, Mercurial og CVS. Git-støtten forsterkes av en grafisk Diff-visning og av et hyllesystem innenfor IDE. NetBeans fargekoder Git-statusen til filer, lar deg se revisjonslogg for hver fil og viser revisjons- og forfatterinformasjon for hver linje med versjonskontrollerte filer. NetBeans har lignende integrasjoner med Subversion, Mercurial og CVS, men jeg testet bare Git.
NetBeans integrerer problemsporing med Jira og Bugzilla. I oppgavevinduet NetBeans kan du søke etter oppgaver, lagre søk, oppdatere oppgaver og løse oppgaver i det registrerte oppgavelageret. NetBeans har også teamserverintegrasjon for nettsteder som bruker Kenai-infrastrukturen.
Så vidt jeg kan fastslå, mangler NetBeans JavaScript-profilering, selv om den kan profilere Java-applikasjoner og EJB-moduler. Og mens NetBeans kan omformulere Java og PHP, kan det ikke omformulere JavaScript.
Totalt sett er NetBeans en anstendig konkurrent for JavaScript, HTML5 og CSS3-utvikling på klientsiden, spesielt hvis du også gjør Java, PHP eller C ++ utvikling på serveren. Hvis du ikke har budsjettet for WebStorm og ikke liker Microsoft, vil du oppdage at NetBeans gjør jobben, så lenge du ikke har det veldig travelt.
Kostnad: Gratis. Plattform: Windows, Solaris, MacOS, Linux.
Microsoft Visual Studio 2017
I min fulle gjennomgang av Visual Studio 2017 diskuterte jeg produktet som en helhet, med bare noen få referanser til JavaScript. Jeg vil snu vektleggingen her.
Samlet sett fungerer Visual Studio 2017 veldig bra som JavaScript IDE, selv om det er en bedre. NET IDE, og det er ikke så bra som WebStorm for JavaScript. Selv om den også fungerer veldig bra som JavaScript-editor, er den en bedre C # -redaktør, og den er ikke like god eller så rask som Sublime Text for JavaScript.
Som du kan se på skjermbildet nedenfor, gjør Visual Studio 2017 en god jobb med JavaScript-syntaksfarging og kodefelling. Det gjør også en god jobb med JavaScript-kodenavigering: Høyreklikk på en funksjon eller medlemsnavn, og du kan enkelt hoppe til definisjonen eller finne alle referanser. Når du er ferdig med å se på definisjonen, kan du trykke på bakoverpilen øverst i grensesnittet for å gå tilbake til der du var.
Du kan enkelt sette inn utdrag og omgi valget ditt med riktig kode, for eksempel HTML eller URL-koding av strengvariabler. Foruten JavaScript, HTML og CSS, kan du redigere Markdown-filer og se den gjengitte Markdown, og du kan jobbe med TypeScript.
I tillegg kan du selvfølgelig kode på hvilket som helst .Net-språk, i C ++, og i Python. Og som det har vært tilfelle for Visual Studio i lang tid, kan du jobbe med databaser direkte fra IDE. Visual Studio er spesielt sterkt når du arbeider med SQL Server-databaser. Du kan komme unna med å bruke Visual Studio i stedet for SQL Server Management Studio for de fleste databaseaksjoner du vil gjøre som utvikler.
Visual Studio 2017 støtter feilsøking i stort sett alle nettlesere du bryr deg om, inkludert nettlesere på mobile enheter og i emulatorer. Den har også to egne nettlesere: den enkle interne nettleseren, som er (overraskelse!) En versjon av Internet Explorer, og Page Inspector, som viser deg den gjengitte siden sammen med alle kildene og stilene. Selv om Page Inspector gjør mange potensielt tidkrevende, reverse engineering-ting for å sette seg opp for en side, når du først er inne i den, kan du bli der uten å måtte sjonglere Visual Studio, nettleseren og nettleserens utviklerverktøy. .
Ytelsen til Visual Studio 2017 er vanligvis ganske bra hvis du gir det nok minne og CPU-kraft, men det har en tendens til å kreve betydelige ressurser. Visual Studio 2017 har god ytelsesdiagnostikk for applikasjoner, men stort sett er de ikke så nyttige for vanlig JavaScript-kode, som vanligvis kjører dypt inne i en nettleser. Visual Studio har spesifikk JavaScript-funksjonstiming, HTML UI-respons og JavaScript-minneverktøy, men de gjelder bare JavaScript-baserte Universal Windows Platform-prosjekter, ikke webprosjekter som tilfeldigvis bruker JavaScript.
Visual Studio 2017 inkluderer utmerket Node.js applikasjonsredigering, IntelliSense, profilering, NPM-integrering, TypeScript-støtte, feilsøking lokalt og eksternt (Windows, MacOS, Linux) og feilsøking på Azure Web Apps og Azure Cloud Services. Den har også støtte for CSS, HTML, JavaScript, TypeScript, CoffeeScript og Less. Dette inkluderer å kjøre JSHint mens du skriver, slik at du kan minifisere JavaScript-filer fra en kontekstmeny og automatisk kompilere CoffeeScript-filer på lagring, og vise en forhåndsvisning av det genererte JavaScript side om side.
