JavaScript bruges til mange forskellige slags applikationer i dag. JavaScript fungerer ofte med HTML5 og CSS til at opbygge web-frontendere. Men JavaScript hjælper også med at opbygge mobilapplikationer, og det har fundet et vigtigt sted på bagsiden i form af Node.js-servere. Heldigvis stiger JavaScript-udviklingsværktøjer - både redaktører og IDE'er - for at imødekomme de nye udfordringer.
Hvorfor bruge en IDE i stedet for en editor? Hovedårsagen er, at en IDE kan debugge og undertiden profilere din kode. IDE'er har også understøttelse af ALM-systemer, der integreres med f.eks.Git, GitHub, Mercurial, Subversion og Perforce til versionskontrol. Men da flere redaktører tilføjer kroge til disse systemer, bliver ALM-understøttelse mindre af en differentierer.
Formørkelse 2018 med JavaScript-udviklingsværktøjer
Tilbage i de gamle dage, da Java Swing var nyt og spændende, nød jeg at bruge Eclipse til Java-udvikling, men gik snart videre til andre Java IDE'er. For fem-plus år siden, da jeg lavede en Android-udvikling med Eclipse, fandt jeg oplevelsen OK, men pokkerisk. Da jeg forsøgte at bruge Eclipse Luna med JSDT til JavaScript-udvikling i 2014, viste det konstant falske positive fejl for gyldig kode, der passerede JSHint.
Relateret video: Hvad er JavaScript? Skaber Brendan Eich forklarer
Brendan Eich, skaberen af JavaScript-programmeringssproget, forklarer, hvordan sproget bruges, og hvorfor det stadig er en favorit blandt programmører på grund af dets brugervenlighed.
Heldigvis har flere leverandører og open source-projekter trådt op på pladen siden da. Eclipse 2018 med JavaScript-udviklingsværktøjer har en anstændig JavaScript-editor og en Chrome-baseret debugger, men den ved ikke om TypeScript, som bruges af Angular, eller om ES6- og JSX-filer, der bruges af React.
Eclipse har altid haft en enorm markedsplads for plugins. For TypeScript skal du overveje det gratis TypeScript 1.0.0-plugin. For Angular, TypeScript og ES6 skal du overveje den kommercielle Angular IDE (af CodeMix, tidligere Webclipse), og for React-projekter med JSX-filer, prøv TypeScript IDE med open source. Hvis du tilføjer mere end en, skal du løse deres tvist om, hvilken der skal redigere TypeScript-filer, men det er ikke så meget.
CodeMix-værktøjer faktureres som tilføjelse af Visual Studio Code-smarts til Eclipse. I modsætning til de fleste Eclipse-plugins er Angular IDE fra CodeMix ikke gratis, men det har en 45-dages gratis prøveperiode. Da Visual Studio Code er gratis, vil jeg overveje det, før jeg betaler for Angular IDE.
Omkostninger: Gratis; Vinkel IDE af CodeMix, $ 29 (personlig) eller $ 48 (kommerciel) pr. År. Platform: Windows, MacOS og Linux.
ActiveState Komodo IDE
Jeg har været bruger og fan af Komodo IDE, siden den blev introduceret i 2001. Selvom nyere produkter som Visual Studio Code og WebStorm har overgået det på nogle områder, er det stadig en god editor og IDE.
Komodo IDE leverer avanceret JavaScript-redigering, syntaksfremhævning, navigation og fejlretning, men det inkluderer ikke JavaScript-kodekontrol. Til det kan du altid køre JSHint i en skal.
Komodo understøtter snesevis af programmerings- og markup-sprog. Med sin brede vifte af programmerings- og markup-sprogstøtte, inklusive refactoring, debugging og profilering, er Komodo IDE et meget godt valg til end-to-end-udvikling på open source-sprog.
Komodo har et koderefaktoriseringsmodul til alle de sprog, som det giver kodeintelligens for: PHP, Perl, Python, Ruby, Tcl, JavaScript og Node.js. Desværre begrænser den "mindst fællesnævner" karakter af denne tilgang kapaciteterne til at omdøbe variabler og klassemedlemmer og til at udtrække kode til en metode. Ikke desto mindre er dette nogle af de mest nyttige tilfælde.
Komodo IDE har både kolonnedigering og flere valg. Dette giver næsten paritet med Sublime Text og TextMate for så vidt angår masseredigeringer. Så længe vi foretager sammenligningen, er Komodo mere en IDE, mens Sublime Text er meget hurtigere. Og så længe vi diskuterer ydeevne, er Komodos hastighed forbedret mærkbart sammenlignet med ældre versioner inden for skærmtegning, søgning og syntakskontrol.
Komodo IDE har flere funktioner, som de fleste konkurrerende produkter mangler. Den ene er dens HTTP-inspektør, som er fremragende til debugging af Ajax-tilbagekald. En anden er dens Rx (regulære udtryk eller regex) værktøjssæt, som er en fantastisk måde at opbygge og teste regelmæssige udtryk til JavaScript, Perl, PHP, Python og Ruby.
Samarbejde er en anden Komodo IDE-differentierer - tænk på det som Google Docs til kode. Du kan oprette sessioner til grupper af filer, føje kontakter til sessioner som samarbejdspartnere og derefter arbejde sammen om de samme filer på samme tid med synkronisering næsten i realtid.
Samarbejde er ikke en erstatning for kildekodekontrol, men det er et nyttigt supplement. Komodo IDE integrerer kildekodekontrol ved hjælp af CVS, Subversion, Perforce, Git, Mercurial og Bazaar. Kun de grundlæggende versionskontrolhandlinger understøttes. Avancerede operationer, såsom forgrening, skal udføres ved hjælp af en separat kildekodekontrolklient.
Selvom Komodo ikke har sin egen JavaScript-dokumentformater, udnytter den den bedste gratis open source til dette formål. Uden for boksen er JS Beautifier standardformatering til JavaScript-filer, men yderligere ni muligheder er tilgængelige via en rullemenu.
Komodo IDE understøtter fejlfinding af JavaScript på klientsiden i Chrome, og det kan fejle Node.js både lokalt og eksternt. Det debugger også Perl, Python, PHP, Ruby, Tcl og XSLT.
Komodo IDE har en DOM-fremviser, der giver dig mulighed for at se XML- og HTML-dokumenter som sammenklappelige træer. Det giver dig også mulighed for at foretage XPath-søgninger for at filtrere træet.
Komodos kodeprofilering og modultestmoduler understøtter ikke JavaScript. JavaScript og Node.js understøttes dog begge af Komodos Code Intelligence-modul, der implementerer kodesurfing, autofuldførelse og opkaldstip.
Komodo IDE kan offentliggøre grupper af filer via FTP, SFTP, FTPS eller SCP. Komodo kan også synkronisere filer og opdage potentielle udgivelseskonflikter, der kan få dig til at overskrive andres ændringer.
Samlet set er Komodo en god, men ikke god JavaScript IDE, og en god, men ikke god JavaScript-editor. Det kan dog godt tjene dine behov, især hvis du også arbejder med Perl, Python, PHP, Ruby, Tcl eller XSLT.
Omkostninger: $ 295 plus $ 87 om året for opgraderinger og support. Platform: Windows (7 eller højere), MacOS (10.9 eller højere), Linux.
Apache NetBeans
NetBeans har meget god support til JavaScript, HTML5 og CSS3 i webprojekter, og det understøtter Cordova / PhoneGap-rammen til opbygning af JavaScript-baserede mobilapplikationer. NetBeans er ikke den hurtigste IDE på blokken, men det er en af de mere komplette. Og selvfølgelig er prisen rigtig: NetBeans er tilgængelig gratis under en open source-licens.
NetBeans JavaScript-editor giver syntaksfremhævning, autofuldførelse og kodefoldning, stort set som du forventer. JavaScript-redigeringsfunktionerne fungerer også for JavaScript-kode indlejret i PHP-, JSP- og HTML-filer. jQuery support er bagt i editoren. NetBeans 8.2 har ny eller forbedret support til Node.js og Express, Gulp, Grunt, AngularJS, Knockout.js, Jade, Mocha og Selen.
Kodeanalyse kører i baggrunden, mens du redigerer, og giver advarsler og tip. Fejlfinding fungerer i den integrerede WebKit-browser og i Chrome med NetBeans Connector installeret. Fejlfindingsprogrammet kan indstille DOM, linje, begivenhed og XMLHttpRequest breakpoints, og det viser variabler, ure og opkaldsstakken. Et integreret browserlogvindue viser browserundtagelser, fejl og advarsler.
NetBeans kan konfigurere og udføre enhedstest med JsTestDriver, en JAR-fil (Java-arkiv), du kan downloade gratis. Fejlfinding af enhedstest aktiveres automatisk, hvis du angiver Chrome med NetBeans Connector som en af JsTestDriver-browserne, når du konfigurerer JsTestDriver i vinduet Tjenester.
Når du fejler en webapplikation i Chrome med NetBeans Connector og redigerer CSS fra Chrome Developer Tools, bliver ændringerne fanget af NetBeans og gemt i CSS-filerne. Men hvis dine CSS-filer blev genereret fra mindre eller Sass-stilark, skal du opdatere kildearket manuelt, fordi CSS-filerne kun er kompileret output.
I den integrerede WebKit-browser og i Chrome med NetBeans Connector installeret kan du bruge NetBeans netværksmonitor til at se anmodningsoverskrifter, svar og opkaldsstakke til REST-kommunikation. For WebSocket-kommunikation vises både overskrifter og tekstrammer. Samlet set giver NetBeans en lidt bedre fejlretningsoplevelse med Chrome, end du får i Firefox med Firebug.
NetBeans integrerer kildekodekontrol med Git, Subversion, Mercurial og CVS. Git-understøttelsen forstærkes af en grafisk Diff-fremviser og af et reolsystem inden for IDE. NetBeans farvekoder Git-status for filer, giver dig mulighed for at se revisionshistorik for hver fil og viser dig revisions- og forfatteroplysninger for hver linje med versionskontrollerede filer. NetBeans har lignende integrationer med Subversion, Mercurial og CVS, men jeg testede kun Git.
NetBeans integrerer problemsporing med Jira og Bugzilla. I NetBeans-opgavevinduet kan du søge efter opgaver, gemme søgninger, opdatere opgaver og løse opgaver i dit registrerede opgavelager. NetBeans har også teamserverintegration til websteder, der bruger Kenai-infrastrukturen.
Så vidt jeg kan fastslå, mangler NetBeans enhver JavaScript-profilering, selvom det kan profilere Java-applikationer og EJB-moduler. Og mens NetBeans kan omlægge Java og PHP, kan det ikke omlægge JavaScript.
Alt i alt er NetBeans en anstændig konkurrent til udvikling af JavaScript, HTML5 og CSS3 på klientsiden, især hvis du også laver Java, PHP eller C ++ udvikling på serveren. Hvis du ikke har budgettet til WebStorm og ikke kan lide Microsoft, vil du opdage, at NetBeans gør jobbet, så længe du ikke har meget travlt.
Omkostninger: Gratis. Platform: Windows, Solaris, MacOS, Linux.
Microsoft Visual Studio 2017
I min fulde gennemgang af Visual Studio 2017 diskuterede jeg produktet som helhed med kun få henvisninger til JavaScript. Jeg vil vende vægten her.
Samlet set fungerer Visual Studio 2017 meget godt som JavaScript IDE, selvom det er en bedre. NET IDE, og det er ikke så godt som WebStorm til JavaScript. Mens det også fungerer meget godt som JavaScript-editor, er det en bedre C # -editor, og den er ikke så god eller så hurtig som Sublime Text til JavaScript.
Som du kan se på skærmbilledet nedenfor, udfører Visual Studio 2017 et godt stykke arbejde med JavaScript-syntaksfarvning og kodefoldning. Det gør også et godt stykke arbejde med JavaScript-kodenavigation: Højreklik på en funktion eller et medlemsnavn, og du kan nemt springe til definitionen eller finde alle referencer. Når du er færdig med at se på definitionen, kan du trykke på tilbage-pilen øverst i grænsefladen for at gå tilbage til det sted, hvor du var.
Du kan nemt indsætte uddrag og omslutte dit valg med passende kode, såsom HTML eller URL-kodning af strengvariabler. Udover JavaScript, HTML og CSS kan du redigere Markdown-filer og se den gengivne Markdown, og du kan arbejde med TypeScript.
Derudover kan du selvfølgelig kode på ethvert. Net-sprog, i C ++ og i Python. Og som det har været tilfældet med Visual Studio i lang tid, kan du arbejde med databaser direkte fra IDE. Visual Studio er især stærkt, når du arbejder med SQL Server-databaser. Du kan slippe af med at bruge Visual Studio i stedet for SQL Server Management Studio til de fleste databasefunktioner, du gerne vil gøre som udvikler.
Visual Studio 2017 understøtter fejlretning i stort set enhver browser, du holder af at kaste på den, inklusive browsere på mobile enheder og i emulatorer. Det har også to egne browsere: den almindelige interne webbrowser, som er (overraskelse!) En version af Internet Explorer og Sideinspektøren, der viser dig den gengivne side sammen med alle kilder og stilarter. Selvom sideinspektøren gør en masse potentielt tidskrævende, reverse engineering-ting for at indstille sig til en side, kan du, når du først er i den, blive der uden at skulle jonglere Visual Studio, browseren og browserens udviklerværktøjer .
Udførelsen af Visual Studio 2017 er normalt ret god, hvis du giver det nok hukommelse og CPU-strøm, men det har tendens til at kræve betydelige ressourcer. Visual Studio 2017 har fremragende ydeevnediagnostik til applikationer, men stort set er de ikke så nyttige til almindelig JavaScript-kode, som typisk kører dybt inde i en browser. Visual Studio har specifik JavaScript-funktionstiming, HTML UI-respons og JavaScript-hukommelsesværktøjer, men de gælder kun JavaScript-baserede Universal Windows Platform-projekter, ikke webprojekter, der tilfældigvis bruger JavaScript.
Visual Studio 2017 inkluderer fremragende Node.js-applikationsredigering, IntelliSense, profilering, NPM-integration, TypeScript-understøttelse, fejlfinding lokalt og eksternt (Windows, MacOS, Linux) og fejlretning på Azure Web Apps og Azure Cloud Services. Det understøtter også CSS, HTML, JavaScript, TypeScript, CoffeeScript og Less. Dette inkluderer at køre JSHint, mens du skriver, så du kan minimere JavaScript-filer fra en genvejsmenu og automatisk kompilere CoffeeScript-filer, når de er gemt og vise en side-om-side-forhåndsvisning af det genererede JavaScript.
