Pārskats: 10 labākie JavaScript redaktori

JavaScript programmētājiem ir daudz labu rīku, no kuriem izvēlēties - gandrīz pārāk daudz, lai tos varētu izsekot. Šajā rakstā es aplūkoju 10 teksta redaktorus ar labu atbalstu izstrādei ar JavaScript, HTML5 un CSS un dokumentēšanai ar Markdown. Kāpēc JavaScript programmēšanai IDE vietā izmantot redaktoru? Vārdu sakot: ātrums.

Būtiskā atšķirība starp redaktoriem un IDE ir tā, ka IDE var atkļūdot un dažreiz profilēt jūsu kodu, un IDE ir atbalsts lietojumprogrammu dzīves cikla pārvaldības (ALM) sistēmām. Daudzi redaktori, par kuriem mēs šeit runājam, atbalsta vismaz vienu versiju vadības sistēmu, bieži vien Git, tāpēc šis kritērijs ir mazāks atšķirība starp IDE un redaktoriem, nekā tas bija agrāk.

Sublime Text un Visual Studio Code ir topā starp JavaScript redaktoriem - Sublime Text tā ātruma ziņā, cik ērtas rediģēšanas funkcijas, un Visual Studio Code - vēl labākas funkcijas un gandrīz tikpat labs ātrums. Kronšteini ieņem trešo vietu. Lai gan pirms dažiem gadiem TextMate ierindojās manā sarakstā augstajā pozīcijā, tā iespējas īsti nav sekojušas jaunajiem notikumiem.

Visticamāk, izvēlēto JavaScript redaktoru atradīsit Sublime Text, Visual Studio Code vai iekavās. Bet vairākiem citiem rīkiem - Atom, BBEdit, Komodo Edit, Notepad ++, Emacs un Vim - visiem ir kaut kas, ko tos ieteikt. Atkarībā no veicamā uzdevuma kāds no viņiem var būt ērts, lai jums būtu apkārt.

Saistītais video: kas ir JavaScript? Radītājs Brendans Eihs paskaidro

Brendans Eihs, JavaScript programmēšanas valodas veidotājs, izskaidro, kā valoda tiek lietota un kāpēc tā joprojām ir iecienīta programmētāju vidū, ņemot vērā tās lietošanas ērtumu.

Izskatīsim iespējas un salīdzināsim tās beigās.

Cildens teksts

Ja vēlaties elastīgu, jaudīgu, paplašināmu programmēšanas teksta redaktoru, kas ir zibens ātrs, un jums nav iebildumu pārslēgties uz citiem logiem koda pārbaudei, atkļūdošanai un izvietošanai, tad nemeklējiet tālāk kā Sublime Text.

Papildus ātrumam Sublime Text daudzās ievērības cienīgās stiprās puses atbalsta vairāk nekā 70 failu tipus, tostarp JavaScript, HTML un CSS; gandrīz tūlītēja navigācija un tūlītēja projektu pārslēgšana; vairākas atlases (vienlaikus veiciet virkni izmaiņu), ieskaitot kolonnu atlasi (atlasiet faila taisnstūra laukumu); vairāki logi (izmantojiet visus savus monitorus) un sadalītie logi (izmantojiet sava ekrāna nekustamo īpašumu priekšrocības); pilnīga pielāgošana ar vienkāršiem JSON failiem; Python bāzes spraudņa API; un vienota, meklējama komandu palete.

Programmētājiem, kas nāk no citiem redaktoriem, Sublime Text atbalsta TextMate paketes (izņemot komandas) un Vi / Vim emulāciju. Neoficiāla Sublime Text dokumentācija izsaka nicinošas (un nepareizas) piezīmes par Emacs lietotājiem (moi, piemēram), bet es tos nepamanīšu. Kāpēc vispār pastāv neoficiāla Sublime Text dokumentācija? Pirmkārt, oficiālā dokumentācija ir mazāk nekā pilnīga - daudz mazāk.

Kad iepriekš teicu “gandrīz tūlītēja navigācija”, es to domāju. Piemēram, lai pārietu no pašreizējās vietas ekrānā uz definīciju getResponseHeader tad ajax.js es varu ierakstīt Command-P Mac datorā vai Ctrl-P personālajā datorā aj lai atvērtu pārejošu skatu ajax.js, tad @grh un Enter, lai atvērtu cilni ar getResponseHeader atlasīts. Sublime Text spēj sekot līdzi manai rakstīšanai. Tas jūtas tikpat atsaucīgs kā daži no labākajiem vecajiem DOS redaktoriem, piemēram, Brief un Kedit.

Kad esmu atlasījisgetResponseHeader, Es varu atrast visus funkcijas lietojumus kontekstā, ierakstot Shift-Command-F Mac datorā vai Shift-Ctrl-F datorā un pēc tam Enter. Jauna cilne man parādīs meklēšanas rezultātus ar meklēšanas vienumu katrā piecrindu fragmentā. Veicot dubultklikšķi uz lodziņā ievietota teksta, jaunā cilnē tiek parādīts pilns faila konteksts.

Noklikšķinot uz faila nosaukuma kreisās puses mapju sānjoslā, tiek parādīta pārejoša cilne, kurā redzams faila saturs. Noklikšķinot uz cita faila, šī cilne tiek aizstāta. Šeit atkal Sublime Text spēj sekot manai rakstīšanai un noklikšķināšanai. Līdzīgi samazināta izmēra navigācija lapas augšējā labajā stūrī ļauj man gandrīz uzreiz pārvietoties failā bez ritināšanas papildu izdevumiem. Es vēlos, lai Microsoft Word būtu tikpat atsaucīgs.

Vairākas izvēles un kolonnu atlases ļauj ātri veikt dažāda veida kaitinošos labojumus, kuriem iepriekš bija nepieciešamas regulāras izteiksmes. Vai jums ir jāpārvērš vārdu saraksts JSON struktūrā, kur katru vārdu ieskauj divkāršās pēdiņas un katru citēto vārdu no nākamā atdala komats? Nepieciešams apmēram astoņi taustiņsitieni Sublime Text, neatkarīgi no tā, cik vārdu jums ir sarakstā.

Savā Windows izstrādes lodziņā es izmantoju divus plašus monitorus. Savā MacBook es izmantoju Retina displeju un Thunderbolt displeju. Ja vien es nerediģēju vienā displejā un atkļūdoju uz otru, es parasti vēlos vienlaikus redzēt daudz dažādu avota failu un dažādus skatus avota failos. Sublime Text atbalsta vairākus logus, sadalītus logus, vairākas darbvietas vienam projektam, vairākus skatus un vairākas rūti, kas satur skatus. Ir diezgan vienkārši izmantot visu savu ekrāna nekustamo īpašumu, kad es to vēlos, un konsolidēt, kad man ir jāizveido vieta atkļūdošanai un testēšanai.

Jūs varat pielāgot visu, kas attiecas uz Sublime Text: krāsu shēmu, teksta fontu, globālo atslēgu sasaisti, cilnes apstāšanos, failam raksturīgo atslēgu sasaistes un fragmentus un pat sintakses izcelšanas kārtulas. Preferences tiek kodētas kā JSON faili. Valodas specifiskās definīcijas ir XML preferenču faili. Ap Sublime Text ir aktīva kopiena, kas izveido un uztur Sublime Text paketes un spraudņus. Daudzas funkcijas, kas, manuprāt, sākotnēji šķita, ka trūkst Sublime Text, tostarp JSLint un JSHint saskarnes, JsFormat, JsMinify, PrettyJSON un Git atbalsts, izrādās, ir pieejamas caur kopienu, izmantojot pakešu instalēšanas programmu.

Viens no Sublime Text lieliskās veiktspējas iemesliem ir tas, ka tas ir cieši kodēts. Vēl viens iemesls ir tas, ka Sublime Text nav IDE, un tam nav vajadzīga IDE grāmatvedība.

No izstrādātāja viedokļa tas ir grūts kompromiss. Ja atrodaties saspringtā testa vadītajā “sarkanā, zaļā, refaktora” izstrādes ciklā, jums visvairāk palīdzēs IDE, kas ir iestatīts rediģēšanai, testēšanai, refaktoram un izsekošanas koda pārklājumam. No otras puses, ja veicat kodu pārskatīšanu vai lielākus labojumus, vēlaties atrast ātrāko un efektīvāko redaktoru, kuru varat atrast. Iespējams, ka redaktors ir Sublime Text.

Izmaksas: Neierobežots bezmaksas izmēģinājums; Uzņēmējdarbības vai personīgai licencei 70 USD vienam lietotājam. Platformas: Windows, MacOS un Linux.

Visual Studio kods

Visual Studio Code ir bezmaksas viegls redaktors un IDE no Microsoft. Tajā ir Visual Studio komponenti, sajaukti ar atvērtā koda Atom Electron apvalku, nodrošinot lielisku atbalstu ASP.Net Core izstrādei ar C # un Node.js izstrādei ar TypeScript un JavaScript. Atkāpjoties no Microsoft vēsturiskā modeļa, kas atbalsta tikai Visual Studio operētājsistēmā Windows, Visual Studio kods darbojas arī MacOS un Linux. Tālāk redzamais ekrānuzņēmums tika uzņemts MacOS.

Visual Studio Code ir pārsteidzoši labs JavaScript koda pabeigums, pateicoties TypeScript kompilatora un Salsa motora iekļaušanai. Visual Studio Code nosūta jūsu JavaScript kodu fonā esošajam TypeScript kompilatoram, lai secinātu par tipiem un izveidotu simbolu tabulu. Rezultātus varat redzēt lodziņā ekrāna attēla apakšdaļā, kurā parādīta informācija parhasOwnProperty metodi.

Viena un tā pati simbolu tabula ļauj IntelliSense sniegt jums lieliskus uznirstošo opciju sarakstus koda pabeigšanai visā izteiksmes rakstīšanas laikā. Pēc rakstīšanas jūs saņemat automātisku iekavu aizvēršanu, automātiskas vārdu aizpildīšanas opcijas, automātisko metožu sarakstus .un automātiskie parametru saraksti metodē. Jūs varat uzlabot IntelliSense, pievienojot atsauces uz d.ts failiem noNoteikti tipizēts, un Visual Studio kods piedāvās to darīt jūsu vietā, kad tiks atpazītas kopīgas problēmas, piemēram,__dirname, kas ir Node.js iebūvētais mainīgais.

Git atbalsts ir ļoti labs un diezgan vienkārši lietojams. Visual Studio Code atkļūdotājs nodrošina lielisku atkļūdošanas pieredzi Node.js izstrādei (un ASP.Net izstrādei). Visual Studio Code ir ļoti labs rīks HTML, CSS, Less, Sass un JSON, kuru pamatā ir tā pati tehnoloģija, kas nodrošina Internet Explorer F12 izstrādātāju rīkus. Turklāt tam ir pielāgojama integrācija ar ārējo uzdevumu skrējējiem, piemēram,norīt unžakete.

Visual Studio Code ir piesaistījis spēcīgu spraudņu ekosistēmu, piemēram, lai atbalstītu Angular un React. Tagad tas ir redaktors, kuru es iesaku rakstīt apmācības par lietotņu veidošanu ar JavaScript un TypeScript ietvariem un bibliotēkām.

Izmaksas: bezmaksas atvērtā koda. Platforma: Windows, MacOS un Linux.

Kronšteini

Kronšteini ir bezmaksas atvērtā pirmkoda redaktors, kas sākotnēji ir izstrādāts no Adobe un ir izveidots, lai nodrošinātu labākus JavaScript, HTML un CSS rīkus, kā arī saistītās atvērtās tīmekļa tehnoloģijas. Iekavas pati ir rakstīta JavaScript, HTML un CSS, un izstrādātāji izmanto iekavas, lai izveidotu iekavas. Papildus iebūvētajām iespējām iekavās ir paplašinājumu pārvaldnieks, un paplašinājumi ir pieejami daudzām valodām un rīkiem, kurus izmanto front-end izstrādātāji. Kronšteini nav tik ātri kā Sublime Text vai TextMate, taču tie joprojām ir diezgan ātri, izņemot pauzes, lai ielādētu vai atjauninātu programmas saturu no tīmekļa.

Iekavās ir labs JavaScript, CSS, HTML un Node.js atbalsts. Tam ir arī jaukas funkcijas, piemēram, CSS rediģēšana tiešsaistē, kas saistīta ar HTML ID (ātra rediģēšana). Turklāt iekavās ir tīrs lietotāja interfeiss un rediģējamo vietņu tiešraides priekšskatījums. Tā ir ļoti laba izvēle bezmaksas kodu redaktoram.

JavaScript automātiskā aizpildīšana iekavās ir ļoti laba, automātiski iekavās, leņķa iekavās un kvadrātiekavās aizverot, kā arī pēc nolaižot atslēgvārdus, mainīgos un metodes, tostarp jQuery metodes, automātiski nolaižamās izvēlnes. $. Kronšteini var kontrolēt atkļūdotāju Node.js un restartēt mezglu no izvēlnes vienuma. Paplašinājumus ir viegli pievienot tādām papildu funkcionalitātēm kā TypeScript un JSX atbalsts, Bower integrācija un Git integrācija.

Ātrā rediģēšana, Ātrie dokumenti, Ātra atvēršana un Tiešraides priekšskatījums palīdz vienkāršot tīmekļa lietojumprogrammu rediģēšanu un ļauj koncentrēties uz to, ko kodējat vai izstrādājat. Negatīvie ir tas, ka dažus Brackets paplašinājumus var būt sarežģīti konfigurēt, bet ne tik sarežģīti kā Emacs paketes vai Vim spraudņi.

Izmaksas: bezmaksas atvērtā koda. Platformas: Windows, MacOS, Linux.

Atom

Atom ir bezmaksas, atvērtā koda, uzlauzams programmēšanas redaktors no GitHub operētājsistēmai Windows, MacOS un Linux, kas integrējas ar GitHub lietotni un kurā ir pieejami tūkstošiem paku un motīvu. Es iztiku ar dažām kopienas pakotnēm, kā arī galvenajām paketēm un tēmām.

Nav pārsteidzoši, ka, ņemot vērā tā izcelsmi, Atom avots tiek mitināts vietnē GitHub. Tas ir rakstīts CoffeeScript un integrēts ar Node.js. Atom ir specializēts Chromium variants, kas paredzēts teksta redaktoram, nevis tīmekļa pārlūkam; katrs Atom logs būtībā ir lokāli atveidota vietne. Atom komanda izstrādā Atom Atom.

Atom veiktspēja ir diezgan laba, ja tā pati netiek atjaunināta. Tas ir pilnībā aprīkots ārpus kastes, ar neskaidru meklētāju, ātru meklēšanu un aizvietošanu visā projektā, vairākiem kursoriem un atlasēm, vairākām rūtīm, fragmentiem, koda locīšanu un iespēju importēt TextMate gramatikas un motīvus. Atom var instalēt divus komandrindas utilītus: Atom, lai palaistu redaktoru no čaulas, un APM, lai pārvaldītu Atom pakotnes, NPM garā Node.js. Pārlūkojot krātuves, kuras klonēju no GitHub, es daudz lietoju Atom, jo GitHub lietojumprogrammā ir iekļauts konteksta izvēlnes vienums.