Apžvalga: 10 geriausių „JavaScript“ redaktorių

„JavaScript“ programuotojai turi daug gerų įrankių, iš kurių galima rinktis - beveik per daug, kad galėtumėte juos stebėti. Šiame straipsnyje aptariu 10 teksto redaktorių, kurie gerai palaiko „JavaScript“, HTML5 ir CSS kūrimą ir dokumentavimą su „Markdown“. Kodėl „JavaScript“ programavimui naudoti redaktorių, o ne IDE? Žodžiu: greitis.

Esminis skirtumas tarp redaktorių ir IDE yra tas, kad IDE gali derinti ir kartais peržiūrėti jūsų kodą, o IDE palaiko programų gyvavimo ciklo valdymo (ALM) sistemas. Daugelis redaktorių, apie kuriuos mes čia diskutuojame, palaiko bent vieną versijų valdymo sistemą, dažnai „Git“, todėl šis kriterijus mažiau skiria IDE ir redaktorius nei anksčiau.

„Sublime Text“ ir „Visual Studio Code“ yra „JavaScript“ redaktorių viršūnės - „Sublime Text“ dėl savo greičio ir patogių redagavimo funkcijų bei „Visual Studio Code“ - dar geresnių funkcijų ir greičio, kuris yra beveik toks pat geras. Skliaustai užima trečią vietą. Nors „TextMate“ prieš kelerius metus užėmė aukštą vietą mano sąraše, jos galimybės tikrai neatitiko naujų pokyčių.

Labiausiai tikėtina, kad pasirinktą „JavaScript“ redaktorių rasite „Sublime Text“, „Visual Studio Code“ arba skliausteliuose. Tačiau keli kiti įrankiai - „Atom“, „BBEdit“, „Komodo Edit“, „Notepad ++“, „Emacs“ ir „Vim“ - turi ką jiems rekomenduoti. Priklausomai nuo atliekamos užduoties, bet kurį iš jų gali būti patogu turėti.

Susijęs vaizdo įrašas: kas yra „JavaScript“? Kūrėjas Brendanas Eichas paaiškina

Brendanas Eichas, „JavaScript“ programavimo kalbos kūrėjas, paaiškina, kaip ši kalba naudojama ir kodėl ji vis dar mėgstama tarp programuotojų dėl paprasto naudojimo.

Peržvelkime variantus ir palyginkime juos pabaigoje.

Dildus tekstas

Jei norite lanksčio, galingo, išplėstinio programavimo teksto redaktoriaus, kuris yra žaibiškas, ir neprieštaraujate pereiti prie kitų langų, kad galėtumėte patikrinti kodą, derinti ir diegti, tada nežiūrėkite toliau į „Sublime Text“.

Be greičio, daugybė dėmesio vertų „Sublime Text“ privalumų apima daugiau nei 70 failų tipų, įskaitant „JavaScript“, HTML ir CSS; beveik greita navigacija ir greitas projektų perjungimas; kelis pasirinkimus (atlikite daugybę pakeitimų vienu metu), įskaitant stulpelių pasirinkimą (pasirinkite failo stačiakampę sritį); keli langai (naudokite visus savo monitorius) ir padalyti langai (pasinaudokite savo ekrano nekilnojamojo turto pranašumais); užbaigti pritaikymą paprastais JSON failais; „Python“ pagrindu sukurta papildinio API; ir vieningą ieškomą komandų paletę.

Programuotojams, gaunamiems iš kitų redaktorių, „Sublime Text“ palaiko „TextMate“ paketus (išskyrus komandas) ir „Vi / Vim“ emuliaciją. Neoficialioje „Sublime Text“ dokumentacijoje pateikiamos paniekinančios (ir neteisingos) pastabos apie „Emacs“ vartotojus (moi, pavyzdžiui), bet aš jų nepaisysiu. Kodėl net egzistuoja neoficiali „Sublime Text“ dokumentacija? Na, vienas dalykas, oficialūs dokumentai yra mažiau nei išsamūs - daug mažiau.

Kai anksčiau pasakiau „beveik greita navigacija“, turėjau omenyje tai. Pavyzdžiui, norėdami pereiti iš dabartinės vietos ekrane į apibrėžimą „getResponseHeader“ tada ajax.js galiu įvesti „Command-P“ „Mac“ arba „Ctrl-P“ kompiuteryje aj tada atidarykite laikiną vaizdą į ajax.js @grh ir Enter, kad atidarytumėte skirtuką su „getResponseHeader“ pasirinktas. „Sublime Text“ sugeba neatsilikti nuo mano spausdinimo. Tai jaučiasi taip pat jautriai kaip kai kurie iš geriausių senų DOS redaktorių, tokių kaip „Brief“ ir „Kedit“.

Kai jau išsirinkau„getResponseHeader“, Aš galiu rasti visas funkcijos funkcijas kontekste, įvesdamas „Shift-Command-F“ „Mac“ arba „Shift-Ctrl-F“ kompiuteryje, tada „Enter“. Naujame skirtuke bus rodomi paieškos rezultatai su paieškos terminu, pažymėtu kiekviename penkių eilučių fragmente. Dukart spustelėjus tekstą dėžutėje, naujame skirtuke atsidaro visas failo kontekstas.

Kairiojoje aplankų šoninėje juostoje spustelėjus failo pavadinimą, atidaromas laikinas skirtukas, kuriame rodomas failo turinys. Spustelėjus kitą failą, tas skirtukas pakeičiamas. Vėlgi, „Sublime Text“ sugeba neatsilikti nuo mano spausdinimo ir spustelėjimo. Panašiai, viršutiniame dešiniajame puslapio kampe esanti sumažinto dydžio navigacija leidžia beveik akimirksniu judėti faile be slinkimo. Norėčiau, kad „Microsoft Word“ būtų tokia pat reaguojanti.

Keli pasirinkimai ir stulpelių pasirinkimai leidžia greitai atlikti erzinančius pakeitimus, kuriems anksčiau reikėdavo reguliarių išraiškų. Ar jums reikia paversti žodžių sąrašą į JSON struktūrą, kur kiekvieną žodį supa dvigubos kabutės, o kiekvieną cituojamą žodį nuo kito skiria kablelis? „Sublime“ tekste reikia maždaug aštuonių klavišų paspaudimų, nesvarbu, kiek žodžių turite sąraše.

„Windows“ kūrimo laukelyje naudoju du plačius monitorius. „MacBook“ naudoju „Retina“ ekraną ir „Thunderbolt“ ekraną. Išskyrus atvejus, kai redaguoju viename ekrane, o kitame derinu, paprastai noriu vienu metu pamatyti daug skirtingų šaltinių failų ir skirtingų rodinių į šaltinio failus. „Sublime Text“ palaiko kelis langus, padalintus langus, kelias darbo sritis vienam projektui, kelis rodinius ir kelis langus, kuriuose yra peržiūros. Gana paprasta naudoti visą ekrano nekilnojamąjį turtą, kai to noriu, ir konsoliduoti, kai man reikia vietos derinimui ir testavimui.

Galite pritaikyti viską apie „Sublime Text“: spalvų schemą, teksto šriftą, visuotinį raktų susiejimą, skirtuko sustojimą, failo raktų susiejimą ir fragmentus ir net sintaksės paryškinimo taisykles. Nuostatos užkoduotos kaip JSON failai. Konkrečios kalbos apibrėžimai yra XML nuostatų failai. Aplink „Sublime Text“ yra aktyvi bendruomenė, kuri kuria ir prižiūri „Sublime Text“ paketus ir papildinius. Daugelis funkcijų, kurių, maniau, iš pradžių maniau, kad „Sublime Text“ trūksta, įskaitant „JSLint“ ir „JSHint“ sąsajas, „JsFormat“, „JsMinify“, „PrettyJSON“ ir „Git“ palaikymą, pasirodo esančios pasiekiamos per bendruomenę, naudojant „Package Installer“.

Viena iš puikių „Sublime Text“ pasirodymų priežasčių yra ta, kad ji yra griežtai užkoduota. Kita priežastis yra ta, kad „Sublime Text“ nėra IDE ir jai nereikia IDE buhalterinės apskaitos.

Kūrėjo požiūriu, tai yra keblus kompromisas. Jei esate glaudžiai bandymų valdomas „raudonos, žalios, refaktoriaus“ kūrimo ciklas, tada jums labiausiai padės IDE, sukurtas redaguoti, testuoti, refaktorius ir kelio kodo aprėptį. Kita vertus, jei atliksite kodų peržiūras ar svarbius redagavimus, norėsite rasti greičiausią ir efektyviausią redaktorių. Šis redaktorius gali būti „Sublime Text“.

Kaina: Neribota nemokama bandomoji versija; Verslo ar asmeninei licencijai 70 USD vienam vartotojui. Platformos: „Windows“, „MacOS“ ir „Linux“.

„Visual Studio“ kodas

„Visual Studio Code“ yra nemokamas lengvas „Microsoft“ redaktorius ir IDE. Jame yra „Visual Studio“ komponentai, sumaišyti su atvirojo kodo „Atom Electron“ apvalkalu, todėl puikiai palaiko ASP.Net Core kūrimą su C # ir Node.js kūrimą su TypeScript ir JavaScript. Pertraukiant „Microsoft“ istorinį modelį, kuriame palaikoma tik „Visual Studio“ sistemoje „Windows“, „Visual Studio Code“ taip pat veikia „MacOS“ ir „Linux“. Žemiau esanti ekrano kopija buvo padaryta „MacOS“.

„Visual Studio Code“ turi nepaprastai gerą „JavaScript“ kodo užbaigimą, nes jame yra „TypeScript“ kompiliatorius ir „Salsa“ variklis. „Visual Studio Code“ nusiųs jūsų „JavaScript“ kodą į „TypeScript“ kompiliatorių fone, kad padarytų išvadą apie tipus ir sudarytų simbolių lentelę. Rezultatus galite pamatyti laukelyje, esančiame netoli ekrano vaizdo apačios, kurioje rodomahasOwnProperty metodas.

Ta pati simbolių lentelė suteikia galimybę „IntelliSense“ pateikti puikius iššokančiųjų parinkčių sąrašus, kad galėtumėte užpildyti kodą per išraišką. Įvedę tekstą gausite automatinį skliaustų uždarymą, automatines žodžių pildymo parinktis, automatinių metodų sąrašus .ir metodo parametrų sąrašai. Galite patobulinti „IntelliSense“, pridėdami nuorodas į d.ts failus iš„NoteTyped“ir „Visual Studio Code“ pasiūlys tai padaryti už jus, kai atpažins dažniausiai pasitaikančias problemas, tokias kaip__dirname, kuris yra „Node.js“ įmontuotas kintamasis.

„Git“ palaikymas yra labai geras ir gana paprastas naudoti. „Visual Studio Code“ derintuvas suteikia puikią „Node.js“ (ir „ASP.Net“ kūrimo) derinimo patirtį. „Visual Studio Code“ turi labai gerus įrankius HTML, CSS, Less, Sass ir JSON, kurie yra pagrįsti ta pačia technologija, kuria valdomi „Internet Explorer F12“ kūrėjo įrankiai. Be to, jis turi pritaikomą integraciją su išoriniais užduočių bėgikais, tokiais kaipgurkšnoti irjake.

„Visual Studio Code“ pritraukė tvirtą papildinių ekosistemą, pavyzdžiui, kad palaikytų „Angular“ ir „React“. Dabar tai yra redaktorius, kurį rekomenduoju rašyti pamokas apie programų kūrimą su „JavaScript“ ir „TypeScript“ sistemomis bei bibliotekomis.

Kaina: nemokamas atvirasis šaltinis. Platforma: „Windows“, „MacOS“ ir „Linux“.

Skliausteliuose

„Brackets“ yra nemokamas „Adobe“ sukurtas atvirojo kodo redaktorius, sukurtas siekiant suteikti geresnių įrankių „JavaScript“, HTML ir CSS, taip pat susijusioms atvirojo interneto technologijoms. Pats skliausteliuose parašyta „JavaScript“, HTML ir CSS, o kūrėjai naudoja skliaustelius skliausteliams kurti. Be integruotų galimybių, „Brackets“ turi plėtinių tvarkytuvę, o plėtinius galima naudoti daugeliu kalbų ir įrankių, kuriuos naudoja „front-end“ kūrėjai. Skliausteliuose nėra taip greitai, kaip „Sublime Text“ ar „TextMate“, tačiau jie vis tiek yra gana greiti, išskyrus pauzes norint įkelti ar atnaujinti programos turinį iš interneto.

Skliausteliuose palaikoma „JavaScript“, CSS, HTML ir „Node.js“. Jis taip pat turi puikių funkcijų, tokių kaip tiesioginis CSS redagavimas, susijęs su HTML ID (greitas redagavimas). Be to, skliausteliuose yra švari vartotojo sąsaja ir tiesioginė jūsų redaguojamų tinklalapių peržiūra. Tai labai geras pasirinkimas nemokamam kodo redaktoriui.

„JavaScript“ automatinis užbaigimas skliaustuose yra labai geras, automatiškai uždarant skliaustus, kampinius skliaustus ir laužtinius skliaustus, taip pat automatinius išskleidžiamuosius raktinių žodžių, kintamųjų ir metodų meniu, įskaitant „jQuery“ metodus, kai įvedate tekstą $. Skliausteliuose galima valdyti Node.js derintuvą ir paleisti mazgą iš meniu elemento. Lengva pridėti plėtinių papildomoms funkcijoms, tokioms kaip „TypeScript“ ir „JSX“ palaikymas, „Bower“ integravimas ir „Git“ integravimas.

„Greitas redagavimas“, „Greiti dokumentai“, „Greitas atidarymas“ ir „Tiesioginė peržiūra“ padeda supaprastinti žiniatinklio programų redagavimą ir leidžia sutelkti dėmesį į tai, ką koduojate ar kuriate. Neigiama yra tai, kad kai kuriuos „Brackets“ plėtinius gali būti sudėtinga konfigūruoti, bet ne taip keblu, kaip „Emacs“ paketus ar „Vim“ papildinius.

Kaina: nemokamas atvirasis šaltinis. Platformos: „Windows“, „MacOS“, „Linux“.

Atomas

„Atom“ yra nemokamas, atviro kodo, įsilaužėlių programavimo redaktorius iš „GitHub“, skirtas „Windows“, „MacOS“ ir „Linux“, kuris integruojamas su „GitHub“ programa ir turi tūkstančius paketų ir temų. Apsieinu turėdamas kelis bendruomenės paketus, taip pat pagrindinius paketus ir temas.

Nenuostabu, kad atsižvelgiant į jo kilmę, „Atom“ šaltinis yra „GitHub“. Jis parašytas „CoffeeScript“ ir integruotas su „Node.js“. „Atom“ yra specializuotas „Chromium“ variantas, sukurtas kaip teksto redaktorius, o ne žiniatinklio naršyklė; kiekvienas „Atom“ langas iš esmės yra vietoje pateiktas tinklalapis. „Atom“ komanda kuria „Atom“.

„Atom“ našumas yra gana geras, kai jis pats neatnaujinamas. Jis yra visiškai pristatomas iš dėžutės, su neaiškiu ieškikliu, greita paieška ir pakeitimais visame projekte, keliais žymekliais ir pasirinkimais, keliais langais, fragmentais, kodo sulankstymu ir galimybe importuoti „TextMate“ gramatikas ir temas. „Atom“ gali įdiegti du komandinės eilutės įrankius: „Atom“, kad paleistų redaktorių iš apvalkalo, ir APM, kad valdytų „Atom“ paketus, pagal „NPM“, skirtą „Node.js“. Naršydama saugyklas, kurias klonavau iš „GitHub“, aš daug naudoju „Atom“, nes „GitHub“ programoje yra kontekstinio meniu punktas.