Share
Aproape un an în urmă, Jeffrey Way a revizuit proiectul Open Source Brackets. În momentul în care revizuirea Brackets a ajuns destul de departe, recent sărbătorind a 33-a ediție Sprint. În acest articol voi vorbi despre multe dintre actualizări, precum și pentru a demonstra de ce Brackets este editorul meu preferat.
Parchetele se concentrează în primul rând pe dezvoltarea web.
Doar în cazul în care nu știți, Brackets este un editor de cod open source axat pe dezvoltarea web-ului și construit cu standarde web. Da - un editor construit cu HTML, JavaScript și CSS. A fost lansat inițial în iulie 2012 pe GitHub (http://github.com/adobe/brackets). În timp ce au fost lansate de Adobe, comiterele din spatele Bracket-urilor includ oameni din numeroase surse. (Ca o parte, echipa Brackets face o prioritate să se concentreze asupra non-Adobe trage cererile.)
Parchetele se concentrează în primul rând pe dezvoltarea web. Obțineți, desigur, editarea așteptată și sugerarea codului HTML, CSS și JavaScript, dar, de asemenea, obțineți câteva caracteristici puternice. Funcția "Previzualizare live" conectează editorul Brackets la browserul dvs. Pe măsură ce editați CSS, actualizările se întâmplă în timp real, oferind feedback instantaneu. Doar selectarea elementelor CSS va oferi detalii în browser pentru a ști exact cu ce lucrați. O altă caracteristică, editare rapidă, permiteți selectarea unei etichete HTML și obțineți instantaneu codul CSS care se aplică acelei părți din DOM. Ceea ce nu este suportat direct în Brackets poate fi obținut printr-un API extensibil extensibil (din nou, folosind standardele web) pentru a permite dezvoltatorilor să adauge orice funcție pe care o doresc. Extensiile au fost create pentru lustruirea CSS, validarea HTML, integrarea GitHub și multe altele. (Scriu acest articol în Markdown în editorul Brackets folosind o extensie Markdown care îmi oferă o actualizare live a afișajului.)
De acolo au început brațele. Acum hai să vorbim despre locul în care a venit și ce ne putem aștepta în viitor.
Au fost făcute îmbunătățiri în toate aspectele (HTML, CSS și JavaScript).
Când Bracket-urile au fost lansate pentru prima dată, a fost un experiment. Puteți utiliza standardele web pentru a construi un editor pentru dezvoltatorii web? Chiar mai important, ați putea construi ceva care să funcționeze? Deoarece a fost ceva de genul experimentului și au existat multe preocupări arhitecturale la un nivel scăzut, unele lucruri pe care le-ați aștepta în orice editor decent, cum ar fi redenumirea fișierelor, de exemplu, nu au fost expediate mult timp. Au fost perechi nu comercializate ca fiind gata pentru prima dată. În schimb, ideea a fost să încercați ceva nou și să vedeți ce a funcționat.
Acum este corect să spunem că parantezele au toate elementele de bază acoperite. Lucrurile cum ar fi crearea de fișiere noi, ștergerea, deschiderea din sistemul de fișiere etc. sunt în prezent copiate. Deși nu este neapărat ceva de cioară, dacă lipsa acestor trăsături de bază era singurul lucru care te împiedica să folosești Brackets, acum este cu siguranta timp pentru a verifica. (Și pentru cei dintre voi care așteaptă o versiune Linux - una este gata pentru tine!)
Împreună cu operațiile de bază ale fișierelor, sugerarea codului a fost îmbunătățită dramatic în timp. Au fost făcute îmbunătățiri în toate aspectele (HTML, CSS și JavaScript). Recent, Bracket-urile au adăugat suport pentru parsarea și sugerarea propriilor funcții. Imaginați-vă că ați scris două funcții JavaScript. Pe măsură ce tastați apelurile la aceste funcții, consolele încearcă să înțeleagă atât argumentele, cât și tipurile de argumente necesare și oferă suportul de cod pe măsură ce tastați. Iată un exemplu simplu:
/ * * @param număr x Primul număr * @param număr y Numărul secundar * / funcția ringTheBell (x, y) 'utilizarea strictă'; var total = x + y; totalul returnat; function sayHello (nume) 'foloseste strict'; retur "Bună ziua", + nume;
Codul meu are două funcții, unul numit suna clopotelul și unul a sunat spune buna. Am furnizat câteva metadate suplimentare pentru suna clopotelul, dar acest lucru nu este necesar. Furnizarea lui, deși va face codul de hinting un pic mai frumos. Acum o să trimit un apel suna clopotelul:
Observați cum a detectat argumentele și și tip. Dacă introduc o valoare pentru primul argument, observați cum codul indică bolds al doilea argument:
Chiar și în cazurile în care Bracket's nu poate determina tipul de argument folosit într-o funcție, acesta vă va furniza în continuare Nume al argumentului care poate fi util:
Au fost adăugate recent suporturi real suport pentru conectarea live în format HTML.
Live Connect este probabil unul dintre aspectele mai clare ale parantezelor. După cum am menționat mai sus, vă permite să editați CSS și să vedeți actualizări în timp real. Necesitatea de a regla umplutura sau margini? Puteți utiliza editorul dvs. și puteți vedea impactul imediat. În mod normal, browserele permit acest lucru (Chrome Dev Tools), dar nu oferă în mod normal o modalitate ușoară de a obține aceste modificări înapoi în sursă. Chrome a făcut progrese în acest domeniu recent, dar la fel de mult cât îmi place Chrome, aș prefera să scriu codul meu într-un editor.
În timp ce acest lucru a funcționat excelent pentru CSS, nu a acceptat codul HTML. Parantezele ar reîncărca automat browser-ul dvs. la salvarea unui fișier HTML, dar dacă doriți să previzualizați modificările fără o salvare, ai avut noroc. Au fost adăugate recent suporturi real suport pentru conectarea live în format HTML. Pe măsură ce modificați codul HTML, browserul se va actualiza în timp real. Veți vedea, de asemenea, evidențieri în DOM pentru zona pe care o modificați. Acest lucru nu se traduce foarte bine în capturile de ecran, dar imaginați-vă următorul cod HTML.
Test Acesta este un test
fooioikkkllklkkopkk
Dacă dau clic pe h2 deasupra, Chrome va face un punct culminant al acelui element:
Dacă modific text în interiorul h2, Chrome va reflecta imediat aceste modificări.
O altă actualizare importantă pentru brackets implică suport pentru extensie. În spatele scenei, ce extensii pot face și cum pot face acest lucru s-au îmbunătățit progresiv cu fiecare sprint. Deși nu este neapărat important pentru un utilizator final, pentru persoanele care scriu extensii, îmbunătățirile făcuseră mult mai ușor adăugarea de noi funcții în paranteze. Dacă puteți petrece mai puțin timp pe codul boilerplate și mai mult timp pe caracteristici, aceasta este o victorie în jurul pentru extinderea Bracket. Parantezele expun, de asemenea, capacitatea de a utiliza Node.js în sine pentru extensii. Această caracteristică oferă extensiilor dvs. capacitatea de a utiliza orice Nod poate - care, prin el însuși, deschide destul de mult întreaga lume pentru tine. Acesta este un subiect destul de complex, dar dacă doriți să aflați mai multe, citiți acest ghid: Procesul nodurilor paranteză.
Asta e în spatele scenei, dar pentru utilizatorul final, Brackets a parcurs un drum lung, făcând mai ușor folosirea de extensii. Consolele se livrează acum cu un manager de extensii cu drepturi depline. Disponibil prin Fişier meniu sau o pictogramă în jgheabul drept, făcând clic pe acesta va lansa managerul:
Observați că pentru fiecare extensie au fost instalate, puteți vedea detalii despre versiune, link-uri pentru informații suplimentare și, chiar mai bine, o modalitate rapidă de a elimina extensia dacă cauzează probleme. În partea de jos a acestui manager este un buton care vă permite să instalați extensii dintr-o adresă URL. Asta e util dacă ești ști ce extensie doriți (precum și adresa URL GitHub), dar dacă nu faceți asta? Pur și simplu faceți clic pe Disponibil fila:
Puteți căuta acum (și chiar filtra) printr-o lung lista extensiilor disponibile. Chiar mai bine, instalarea este la fel de simplă ca și un clic pe un buton. Rețineți că Managerul de Extensii a Bracket-ului este chiar suficient de inteligent pentru a recunoaște când o extensie poate să nu fie compatibilă cu versiunea dvs. de Console:
Probabil cea mai interesantă actualizare a Brackets (cel puțin pentru mine) este integrarea lui Theseus. Theseus este un proiect open source creat de oameni de la Adobe și MIT. Acesta este axat pe furnizarea de suport pentru depanare pentru ambele Chrome și Aplicații Node.js. Imaginați-vă posibilitatea de a depana o aplicație Node.js formată din JavaScript de pe partea de server, precum și din codul de client. Theus oferă exact asta. Inca inca de la inceputul dezvoltarii, Theseus este acum integrat in paranteze si poate fi folosit in cadrul editorului propriu-zis.
Theseus oferă în prezent trei caracteristici principale:
Să ne uităm la câteva exemple din acestea. Suportul pentru acoperirea codului Thisus va arăta cât de des se numește o funcție. Suna simplu, dar poate fi puternic. L-am incercat recent pe Theus pe un demo simplu care a folosit AJAX pentru a apela un program de server-side. Am observat că demo-ul meu nu funcționa, iar integrarea lui Theus în brackets a confirmat acest lucru. Observați raportul "0 apeluri" prin apelul meu de apel:
Se pare că codul de pe server nu a fost configurat corect și Nu am scris codul meu JavaScript care să accepte apelul de eroare pentru apelul AJAX. Aceasta a fost literalmente prima dată când am jucat cu Theus și a ajutat imediat să subliniez o problemă în codul meu. După ce am modificat codul din front-end, am putut vedea diferența imediat:
Pentru a fi clar, toate acestea se fac în timp real. Cu brațele deschise și deschiderea Chrome, pot să fac clic pe aplicația mea și să văd sincronizarea actualizărilor din paranteze cu acțiunile mele din browser.
În afară de a vedea numărul convorbirilor, pot să dau clic pe un articol și să văd ce a fost transmis acestuia. Aceasta este caracteristica de inspecție retroactivă pe care am menționat-o mai sus. Rețineți că puteți să faceți clic pe proprietăți complexe și să explorați cu adevărat datele.
În cele din urmă, pentru apelurile asincrone care apar la un timp nedefinit după apelul inițial, Theseus nu are nici o problemă de manipulare și organizare corectă a acestor apeluri sub inițiatorul lor.
Una dintre cele mai vechi caracteristici din Brackets a fost editarea inline pentru elementele CSS. Ai putea pune cursorul în orice element HTML, lovit CMD / CTRL + E, și Brackets ar scana proiectul dvs. pentru a găsi fișierele CSS relevante, precum și regula corespunzătoare de potrivire. Acest lucru a făcut incredibil de ușor să actualizați rapid foile de stil aplicabile pentru conținutul dvs..
Acest lucru a funcționat bine - atâta timp cât conținutul dvs. de fapt a avut o regulă CSS potrivită. În cea mai recentă actualizare a Brackets, editorul va recunoaște acum când un element nu are o regulă CSS potrivită.
Acum puteți adăuga direct o nouă regulă CSS direct de la editorul inline.
În cele din urmă, un nou aspect "coajă" este adăugat la brackets. Disponibil în prezent numai pentru Windows (dar va fi în construcție OSX în curând), aspectul "Dark" este viitorul aspectului și aspectului Brackets.
Editorul principal este a foarte decizie personala pentru un dezvoltator.
Editorul principal este a foarte decizie personala pentru un dezvoltator. M-am trezit folosind Sublime Text acum câteva luni și am observat că ceva nu funcționa corect. Se pare că am încercat să folosesc o caracteristică pentru paranteze. În acea zi am trecut de la Sublime ca editor principal la Brackets. Încă mai folosesc Sublime (și pentru a fi clar, este un editor destul de drăguț!), Dar acum munca mea de zi cu zi se face aproape în întregime în Brackets.
Evident, mi-ar plăcea să mergi - chiar acum - și să descarcăm Console. Dar dacă doriți să săturați mai mult înainte de a vă angaja (hei, înțeleg, construirea unei relații cu un editor este o întreprindere serioasă), verificați aceste resurse:
Accentsconagua