JavaScript-ohjelmoijilla on monia hyviä työkaluja, joista valita - melkein liian monta seurata. Tässä artikkelissa käsittelen 10 tekstieditoria, joilla on hyvä tuki JavaScriptin, HTML5: n ja CSS: n kehittämiseen ja dokumentointiin Markdownilla. Miksi käyttää editoria JavaScript-ohjelmointiin IDE: n sijaan? Sanalla sanoen: nopeus.
Olennainen ero muokkaajien ja IDE: iden välillä on, että IDE: t voivat virheenkorjata ja joskus profiloida koodisi, ja IDE: t tukevat sovellusten elinkaaren hallintajärjestelmiä (ALM). Monet tässä käsittelemämme toimittajat tukevat ainakin yhtä versionhallintajärjestelmää, usein Gitiä, joten kriteeri on vähemmän erilainen IDE: n ja toimittajien välillä kuin ennen.
Sublime Text ja Visual Studio Code ovat huippuluokan JavaScript-editorien joukossa - Sublime Text nopeuden ja kätevien muokkausominaisuuksien suhteen sekä Visual Studio Code vielä parempien ominaisuuksien ja melkein yhtä hyvän nopeuden saavuttamiseksi. Suluissa on kolmas sija. Vaikka TextMate sijoittui listallani muutama vuosi sitten korkealle, sen ominaisuudet eivät ole pysyneet mukana uudessa kehityksessä.
Todennäköisesti löydät valitsemasi JavaScript-editorin Sublime Text-, Visual Studio Code- tai Suluissa. Mutta useilla muilla työkaluilla - Atom, BBEdit, Komodo Edit, Notepad ++, Emacs ja Vim - kaikilla on jotain suositeltavaa heille. Käsiteltävästä tehtävästä riippuen joku niistä saattaa olla kätevä.
Liittyvä video: Mikä on JavaScript? Luoja Brendan Eich selittää
Brendan Eich, JavaScript-ohjelmointikielen luoja, kertoo kuinka kieltä käytetään ja miksi se on edelleen suosikki ohjelmoijien keskuudessa sen helppokäyttöisyyden vuoksi.
Käydään läpi vaihtoehdot ja verrataan niitä lopussa.
Sublime teksti
Jos haluat joustavan, tehokkaan ja laajennettavan salamannopean ohjelmointitekstieditorin, etkä halua vaihtaa muihin ikkunoihin koodin tarkistusta, virheenkorjausta ja käyttöönottoa varten, älä etsi enää kuin Sublime Text.
Nopeuden lisäksi Sublime Text -sovelluksen monet huomionarvoiset vahvuudet kattavat yli 70 tiedostotyyppiä, mukaan lukien JavaScript, HTML ja CSS; melkein välitön navigointi ja projektien välitön vaihto; useita valintoja (tee joukko muutoksia kerralla), mukaan lukien sarakevalinnat (valitse tiedoston suorakulmainen alue); useita ikkunoita (käytä kaikkia näyttöjäsi) ja jaettuja ikkunoita (hyödynnä näytön kiinteistöäsi); täydellinen muokkaus yksinkertaisilla JSON-tiedostoilla; Python-pohjainen laajennussovellusliittymä; ja yhtenäinen, haettava komentopaletti.
Muilta toimittajilta tuleville ohjelmoijille Sublime Text tukee TextMate-nippuja (komennot pois lukien) ja Vi / Vim-emulointia. Epävirallinen Sublime Text -dokumentaatio tekee halveksivia (ja virheellisiä) huomautuksia Emacs-käyttäjistä (moi, esimerkiksi), mutta unohdan ne. Miksi epävirallinen Sublime Text -dokumentaatio on edes olemassa? Ensinnäkin, virallinen dokumentaatio on vähemmän kuin täydellinen - paljon vähemmän.
Kun sanoin aiemmin "melkein välitön navigointi", tarkoitin sitä. Esimerkiksi, jos haluat siirtyä nykyisestä sijainnista näytöllä määritelmään getResponseHeader Ajax.js: ssä voin sitten kirjoittaa Command-P Macissa tai Ctrl-P tietokoneessa aj avaa sitten ohimenevä näkymä ajax.js: iin @grh ja Enter avataksesi välilehden getResponseHeader valittu. Sublime Text pystyy pysymään mukana kirjoittamisessa. Se tuntuu yhtä reagoivalta kuin jotkut parhaista vanhoista DOS-toimittajista, kuten Brief ja Kedit.
Kun olen valinnutgetResponseHeader, Löydän kaikki toiminnon käyttötavat kontekstista kirjoittamalla Shift-Command-F Macissa tai Shift-Ctrl-F PC: ssä ja sitten Enter. Uusi välilehti näyttää minulle hakutulokset, joissa hakutermi on ruudullinen jokaisessa viiden rivin pätkässä. Kaksoisnapsauttamalla ruudussa olevaa tekstiä, koko tiedostokonteksti tulee näkyviin uuteen välilehteen.
Kun napsautat tiedostonimeä vasemmanpuoleisessa Kansiot-sivupalkissa, näkyviin tulee ohimenevä välilehti, joka näyttää tiedoston sisällön. Eri tiedoston napsauttaminen korvaa välilehden. Tässäkin tapauksessa Sublime Text pystyy pysymään mukana kirjoittamisessa ja napsauttamisessa. Vastaavasti pienennetyn koon navigointi sivun oikeassa yläkulmassa antaa minun liikkua tiedostossa melkein välittömästi, ilman vierityksen yläpuolta. Toivon, että Microsoft Word olisi yhtä herkkä.
Useat valinnat ja sarakevalinnat tekevät nopean työn sellaisista ärsyttävistä muokkauksista, jotka aiemmin vaativat säännöllisiä lausekkeita. Täytyykö sinun muuttaa sanaluettelo JSON-rakenteeksi, jossa jokaista sanaa ympäröivät kaksoislainausmerkit ja jokainen lainattu sana erotetaan seuraavasta pilkulla? Sublime-tekstissä kestää noin kahdeksan näppäimen painallusta riippumatta siitä, kuinka monta sanaa sinulla on luettelossa.
Windowsin kehityskotelossa käytän kahta leveää näyttöä. MacBookissani käytän Retina-näyttöä ja Thunderbolt-näyttöä. Ellei muokkaan yhdellä näytöllä ja virheenkorjausta toisella, haluan yleensä nähdä paljon erilaisia lähdetiedostoja ja erilaisia näkymiä lähdetiedostoiksi samanaikaisesti. Sublime Text tukee useita ikkunoita, jaettuja ikkunoita, useita työtiloja projektia kohden, useita näkymiä ja useita näkymiä sisältäviä ruuduja. On melko helppoa käyttää kaikkia näytön kiinteistöjäni haluttaessa ja yhdistää, kun minun on tehtävä tilaa virheenkorjaukseen ja testaukseen.
Voit mukauttaa kaiken Sublime-tekstistä: värimallin, tekstifontin, yleiset avainsidokset, sarkainnäppäimet, tiedostokohtaiset avainsidokset ja katkelmat sekä jopa syntaksin korostussäännöt. Asetukset koodataan JSON-tiedostoina. Kielikohtaiset määritelmät ovat XML-asetustiedostoja. Sublime Text -ympäristön ympärillä on aktiivinen yhteisö, joka luo ja ylläpitää Sublime Text -paketteja ja laajennuksia. Monet ominaisuudet, joista alun perin ajattelin, että Sublime Text puuttui - mukaan lukien JSLint- ja JSHint-käyttöliittymät, JsFormat, JsMinify, PrettyJSON ja Git -tuki - osoittautuvat olevan saatavilla yhteisön kautta Package Installer -ohjelman avulla.
Yksi syy Sublime Textin loistavaan suorituskykyyn on, että se on tiukasti koodattu. Toinen syy on, että Sublime Text ei ole IDE, eikä se tarvitse IDE: n kirjanpitokustannuksia.
Kehittäjän näkökulmasta tämä on hankala kompromissi. Jos olet tiukassa testivetoisessa kehityksessä "punainen, vihreä, refrakter", IDE, joka on määritetty muokkaamaan, testaamaan, refaktorimaan ja jälkikoodin kattavuuteen, auttaa sinua eniten. Toisaalta, jos teet koodikatselmuksia tai suuria muokkauksia, tarvitset nopeimman ja tehokkaimman editorin, jonka löydät. Tuo toimittaja saattaa hyvinkin olla Sublime Text.
Kustannukset: Rajoittamaton ilmainen kokeilu; 70 dollaria käyttäjää kohden yritys- tai henkilökohtaiseen lisenssiin. Alustat: Windows, MacOS ja Linux.
Visual Studio -koodi
Visual Studio Code on ilmainen, kevyt editori ja IDE Microsoftilta. Siinä on Visual Studion komponentteja sekoitettuna avoimen lähdekoodin Atom Electron -kuoren kanssa, mikä tarjoaa erinomaisen tuen ASP.Net Core -kehitykselle C #: lla ja Node.js -kehitykselle TypeScriptillä ja JavaScriptillä. Katkaisemalla Microsoftin historiallisen mallin, joka tukee vain Visual Studiota Windowsissa, Visual Studio Code toimii myös MacOS: lla ja Linuxilla. Alla oleva kuvakaappaus otettiin MacOS: lla.
Visual Studio -koodilla on hämmästyttävän hyvä JavaScript-koodin valmistuminen TypeScript-kääntäjän ja Salsa-moottorin ansiosta. Visual Studio Code lähettää JavaScript-koodisi taustalla olevalle TypeScript-kääntäjälle päättelemään tyyppejä ja rakentamaan symbolitaulukon. Tulokset näkyvät ruudussa lähellä ruudun alaosaa, joka näyttäähasOwnProperty menetelmä.
Saman symbolitaulukon avulla IntelliSense antaa sinulle upeita ponnahdusikkunaluetteloita koodin täydentämiseksi lausekkeen koko kirjoituksen ajan. Saat automaattisen sulkeiden sulkemisen, automaattiset sanan täydennysvaihtoehdot, automaattiset metodiluettelot kirjoittamisen jälkeen .ja automaattiset parametriluettelot menetelmän sisällä. Voit parantaa IntelliSenseä lisäämällä viitteitä d.ts-tiedostoihinDefinitelyTyped, ja Visual Studio Code tarjoaa sen sinulle, kun se tunnistaa yleiset ongelmat, kuten__hakemistonimi, joka on sisäänrakennettu Node.js-muuttuja.
Git-tuki on erittäin hyvä ja melko helppo käyttää. Visual Studio Code -vianetsintälaite tarjoaa erinomaisen virheenkorjauskokemuksen Node.js-kehitykseen (ja ASP.Net-kehitykseen). Visual Studio -koodilla on erittäin hyvät työkalut HTML-, CSS-, Less-, Sass- ja JSON-työkaluille, jotka perustuvat samaan tekniikkaan, joka käyttää Internet Explorer F12 -kehittäjätyökaluja. Lisäksi sillä on mukautettava integraatio ulkoisten tehtävien juoksijoiden, kutenkulaus jajake.
Visual Studio Code on houkutellut vankan laajennusten ekosysteemin - esimerkiksi tukemaan Angularia ja Reactia. Se on nyt editori, jota suosittelen kirjoittaessani opetusohjelmia sovellusten rakentamisesta JavaScript- ja TypeScript-kehyksillä ja kirjastoilla.
Kustannukset: ilmainen avoimen lähdekoodin. Alusta: Windows, MacOS ja Linux.
Suluissa
Brackets on ilmainen avoimen lähdekoodin editori, joka on alun perin Adobelta ja joka on rakennettu tarjoamaan parempia työkaluja JavaScriptille, HTML: lle ja CSS: lle sekä niihin liittyville avoimille verkkotekniikoille. Itse suluissa on kirjoitettu JavaScriptiä, HTML: ää ja CSS: ää, ja kehittäjät käyttävät suluita suluiden rakentamiseen. Sisäisten ominaisuuksien lisäksi Bracketsissa on laajennusten hallinta, ja laajennuksia on saatavana monille käyttöliittymän kehittäjien käyttämille kielille ja työkaluille. Sulkeet eivät ole yhtä nopeita kuin Sublime Text tai TextMate, mutta ne ovat silti melko nopeita lukuun ottamatta taukoja ohjelman sisällön lataamiseksi tai päivittämiseksi verkosta.
Suluissa on hyvä tuki JavaScriptille, CSS: lle, HTML: lle ja Node.js: lle. Siinä on myös hienoja ominaisuuksia, kuten HTML-tunnukseen liittyvä CSS: n in-line-muokkaus (Quick Edit). Lisäksi suluissa on puhdas käyttöliittymä ja reaaliaikainen esikatselu muokkaamillesi verkkosivuille. Se on erittäin hyvä valinta ilmaiselle koodieditorille.
JavaScriptien automaattinen täydennysulku sulkeissa on erittäin hyvä, sulkeet, kulmasulkeet ja hakasulkeet sulkeutuvat automaattisesti, samoin kuin avainsanojen, muuttujien ja menetelmien, mukaan lukien jQuery-menetelmät, automaattiset avattavat valikot kirjoittamisen jälkeen $. Suluissa voidaan hallita Node.js-virheenkorjainta ja käynnistää solmu uudelleen valikkokohdasta. Laajennusten lisääminen lisätoimintoihin, kuten TypeScript- ja JSX-tuki, Bower-integraatio ja Git-integraatio, on helppoa.
Pika-muokkaus, Pika-asiakirjat, Pika-avaus ja Suora esikatselu auttavat virtaviivaistamaan verkkosovellusten muokkausta ja antamaan sinun keskittyä koodaamallesi tai suunnittelemallesi sisältöön. Huonona puolena on, että jotkut Brackets-laajennukset voivat olla hankalia määrittää, mutta eivät niin hankalia kuin Emacs-paketit tai Vim-laajennukset.
Kustannukset: ilmainen avoimen lähdekoodin. Alustat: Windows, MacOS, Linux.
Atomi
Atom on ilmainen, avoimen lähdekoodin hakkeroitu ohjelmointieditori GitHubilta Windowsille, MacOS: lle ja Linuxille, joka integroituu GitHub-sovellukseen ja jolla on tuhansia paketteja ja teemoja. Tulen toimeen muutamalla yhteisöpaketilla sekä ydinpaketeilla ja teemoilla.
Ei ole yllättävää, koska Atom-lähde on alkuperänsä vuoksi isännöity GitHubissa. Se on kirjoitettu CoffeeScriptissä ja integroitu Node.js: n kanssa. Atom on erikoistunut muunnos Chromiumista, joka on suunniteltu pikemminkin tekstieditoriksi kuin verkkoselaimeksi; jokainen Atom-ikkuna on olennaisesti paikallisesti hahmoteltu verkkosivu. Atom-tiimi kehittää Atomia Atomissa.
Atomin suorituskyky on melko hyvä, kun se ei päivitä itseään. Se on täysin mukana laatikosta, sillä siinä on sumea etsin, nopea projektinlaajuinen haku ja korvaus, useita kohdistimia ja valintoja, useita ruutuja, katkelmia, koodin taitto ja kyky tuoda TextMate-kielioppeja ja teemoja. Atom voi asentaa kaksi komentorivin apuohjelmaa: Atom käynnistää editorin kuoresta ja APM hallitsemaan Atomin paketteja Node.js: n NPM: n hengessä. Käytän Atomia paljon selatessani GitHubista kloonattuja arkistoja, koska GitHub-sovellus sisältää asiayhteysvalikkokohdan.
Kustannukset: Ilmainen avoimen lähdekoodin. Alustat: Windows, MacOS, Linux.
Komodo Muokkaa
Komodo Edit, ActiveStaten ilmainen Komodo IDE: n rajoitetun toiminnallisuuden versio, on melko hyvä monikielinen editori. Kaikki, mitä minun oli sanottava Komodo IDE: stä editorina (katso ”Review: The 6 best JavaScript IDEs”), koskee Komodo Editia.
