Share
Quasi un anno fa, Jeffrey Way ha esaminato il progetto open source Brackets. Nel periodo trascorso da quella recensione, i Brackets sono arrivati abbastanza lontano, celebrando di recente la sua 33a edizione di Sprint. In questo articolo parlerò di molti degli aggiornamenti e dimostrerò perché Brackets è il mio editor preferito.
L'obiettivo principale dei brackets è lo sviluppo web.
Nel caso non lo sapessi, Brackets è un editor di codice open source incentrato sullo sviluppo web e costruito con standard web. Sì, un editor costruito con HTML, JavaScript e CSS. È stato originariamente rilasciato nel luglio 2012 su GitHub (http://github.com/adobe/brackets). Mentre sono stati lanciati da Adobe, gli autori delle parentesi includono persone provenienti da numerose fonti. (Per inciso, il team di Brackets si concentra su una priorità non-Richieste di richiamo di Adobe.)
L'obiettivo principale dei brackets è lo sviluppo web. Ovviamente si ottiene la modifica prevista e il suggerimento sul codice per HTML, CSS e JavaScript, ma in più si ottengono anche alcune potenti funzionalità. La funzione "Anteprima dal vivo" collega l'editor di Brackets al tuo browser. Mentre modifichi CSS, gli aggiornamenti si verificano in tempo reale fornendo un feedback immediato. La semplice selezione di elementi CSS fornirà punti salienti all'interno del browser in modo da sapere esattamente con cosa stai lavorando. Un'altra funzione, la modifica rapida, consente di selezionare un tag HTML e di accedere immediatamente al codice CSS che si applica a quella parte del DOM. Ciò che non è direttamente supportato in Bracketing può essere ottenuto tramite una ricca API di estensione (sempre utilizzando gli standard Web) per consentire agli sviluppatori di aggiungere qualsiasi funzionalità desiderino. Sono state create estensioni per il linting CSS, la convalida HTML, l'integrazione con GitHub e altro ancora. (Sto scrivendo questo articolo in Markdown all'interno del mio editor di Brackets usando un'estensione Markdown che mi dà un aggiornamento dal vivo del display.)
È qui che sono iniziati i brackets. Ora parliamo di dove è arrivato e cosa possiamo aspettarci in futuro.
Sono stati apportati miglioramenti in tutti gli aspetti (HTML, CSS e JavaScript).
Quando i Bracket sono stati lanciati per la prima volta, si è trattato di un esperimento. Potresti usare gli standard web per costruire un editor per gli sviluppatori web? Ancora più importante, potresti costruire qualcosa che potrebbe funzionare? Poiché si trattava di un esperimento e c'erano molti problemi architettonici di basso livello, alcune cose che ci si aspetterebbe da un qualsiasi editor decente, come ad esempio la ridenominazione dei file, non sono state inviate per molto tempo. Lo staff era non commercializzato pronto per la prima serata. Invece, l'idea era di provare qualcosa di nuovo e vedere cosa funzionava.
Ora è giusto dire che i brackets hanno tutte le nozioni di base. Cose come la creazione di nuovi file, l'eliminazione, l'apertura dal file system, ecc. Sono ora integrate. Anche se non necessariamente qualcosa di cui lamentarsi, se la mancanza di queste funzionalità di base fosse l'unica cosa che ti impedisce di usare le parentesi, ora è sicuramente il tempo di controllarlo (E per quelli di voi che aspettano una versione Linux - uno è pronto per voi!)
Insieme alle operazioni di base sui file, il suggerimento sul codice è stato notevolmente migliorato nel tempo. Sono stati apportati miglioramenti in tutti gli aspetti (HTML, CSS e JavaScript). Di recente, le parentesi hanno aggiunto il supporto per l'analisi e l'indicazione delle proprie funzioni. Immagina di aver scritto due funzioni JavaScript. Durante la digitazione delle chiamate a queste funzioni, i brackets cercano di comprendere sia gli argomenti che i tipi di argomenti richiesti e forniscono supporto per il codice durante la digitazione. Qui c'è un semplice esempio:
/ * * @param numero x Primo numero * @param numero y Secondo numero * / anello funzioneTheBell (x, y) 'use strict'; var totale = x + y; restituire totale; function sayHello (name) 'use strict'; ritorna "Ciao", + nome;
Il mio codice ha due funzioni, una chiamata suona la campana e uno chiamato di Ciao. Ho fornito alcuni metadati aggiuntivi per suona la campana, ma non è richiesto. Fornire comunque renderà il suggerimento del codice un po 'più bello. Ora sto per digitare una chiamata a suona la campana:
Si noti come ha rilevato gli argomenti e e scrivi Se inserisco un valore per il primo argomento, nota come il suggerimento del codice grassetta il secondo argomento:
Anche nei casi in cui Bracket non è in grado di determinare il tipo di argomento utilizzato in una funzione, continuerà comunque a fornire il nome dell'argomento che può essere utile:
Aggiunte parentesi di recente vero supporto per la connessione live HTML.
Live Connect è probabilmente uno degli aspetti più interessanti di Brackets. Come ho detto sopra, ti consente di modificare i CSS e vedere gli aggiornamenti in tempo reale. Hai bisogno di modificare padding o margini? Puoi usare il tuo editor e vedere immediatamente l'impatto. I browser in genere consentono questo (Chrome Dev Tools), ma in genere non forniscono un modo semplice per riportare tali modifiche alla fonte. Chrome ha fatto passi da gigante in quest'area recentemente, ma per quanto ami Chrome, preferirei scrivere il mio codice in un editor.
Sebbene funzionasse alla grande per i CSS, non supportava l'HTML. I brackets ricaricheranno automaticamente il browser al salvataggio di un file HTML, ma se si desidera visualizzare in anteprima le modifiche senza un salvataggio, sei stato sfortunato. Aggiunte parentesi di recente vero supporto per la connessione live HTML. Man mano che modifichi il tuo codice HTML, il browser si aggiornerà in tempo reale. Vedrai anche i punti salienti nel DOM per l'area che stai modificando. Questo in realtà non si traduce bene negli screenshot, ma immagina il seguente HTML.
Test Questo è un test
fooioikkkllklkkopkk
Se clicco nel h2 sopra, Chrome renderà un punto culminante di quell'elemento:
Se modifico il testo all'interno di h2, Chrome rifletterà immediatamente tali modifiche.
Un altro aggiornamento importante per le parentesi riguarda il supporto delle estensioni. Dietro le quinte, quali estensioni possono fare e come possono farlo sono migliorate progressivamente con ogni sprint. Sebbene non sia necessariamente così importante per un utente finale, per le persone che scrivono estensioni i miglioramenti hanno reso molto più semplice l'aggiunta di nuove funzionalità ai Bracket. Se è possibile dedicare meno tempo al codice boilerplate e più tempo alle funzionalità, questa è una vittoria a tutto tondo per l'estensione delle parentesi. Le parentesi inoltre espone la possibilità di utilizzare Node.js stesso per le estensioni. Questa funzione offre alle tue estensioni la possibilità di utilizzare qualsiasi cosa che Node può fare - che di per sé praticamente ti apre il mondo intero. Questo è un argomento piuttosto complesso, ma se vuoi saperne di più, leggi questa guida: Processo del nodo Brackets.
Questo è dietro le quinte, ma per l'utente finale, Brackets ha fatto molta strada nel rendere più semplice l'utilizzo effettivo delle estensioni. Le parentesi ora vengono fornite con un Extension Manager completo. Disponibile tramite File menu o un'icona nel margine destro, facendo clic su di esso verrà avviato il gestore:
Si noti che per ogni estensione installata, è possibile visualizzare i dettagli sulla versione, i collegamenti per ulteriori informazioni e, ancora meglio, un modo rapido per rimuovere l'estensione in caso di problemi. In fondo a questo gestore è presente un pulsante che consente di installare estensioni da un URL. È utile se tu conoscere quale estensione vuoi (così come l'URL GitHub), ma cosa succede se non lo fai? Basta fare clic sul A disposizione tab:
Ora puoi navigare (e persino filtrare) attraverso a lungo elenco delle estensioni disponibili. Ancora meglio, l'installazione è semplice come fare clic su un pulsante. Nota che Extension Manager di Bracket è abbastanza intelligente da riconoscere quando un'estensione potrebbe non essere compatibile con la tua versione di Bracket:
Probabilmente l'aggiornamento più entusiasmante di Brackets (almeno per me) è l'integrazione di Theseus. Theseus è un progetto open source creato da gente di Adobe e del MIT. È incentrato sulla fornitura del supporto per il debug per entrambi i Chrome e Applicazioni Node.js. Immagina di poter eseguire il debug di un'applicazione Node.js composta da JavaScript lato server e codice lato client. Theseus fornisce proprio questo. Mentre è ancora in fase di sviluppo, Theseus è ora integrato in Brackets e può essere utilizzato all'interno dell'editor stesso.
Theseus offre attualmente tre funzionalità principali:
Diamo un'occhiata ad alcuni esempi di questi. Il supporto della copertura del codice di Theseus mostrerà quanto spesso viene chiamata una funzione. Sembra semplice, ma può essere potente. Recentemente ho provato Theseus su una semplice demo che utilizzava AJAX per chiamare un programma sul lato server. Ho notato che la mia demo non funzionava e l'integrazione di Theseus in Brackets lo ha confermato. Si noti il rapporto "0 chiamate" dal mio callback:
Risulta che il mio codice lato server non è stato impostato correttamente e Non ho scritto il mio codice JavaScript per supportare un callback di errore per la chiamata AJAX. Questa è stata letteralmente la prima volta che ho giocato con Theseus e ha immediatamente aiutato a segnalare un problema nel mio codice. Dopo aver modificato il mio codice di front-end, ho subito notato la differenza:
Per essere chiari, questo è tutto fatto in tempo reale. Con le parentesi aperte e Chrome aperte, posso fare clic nella mia applicazione e vedere gli aggiornamenti nelle parentesi sincronizzati con le mie azioni nel browser.
Oltre a vedere solo il conteggio delle chiamate, posso anche fare clic su un elemento e vedere cosa gli è stato passato. Questa è la funzione di ispezione retroattiva che ho menzionato sopra. Si noti che è possibile fare clic su proprietà complesse e scavare davvero nei dati.
Infine, per le chiamate asincrone che si verificano in un momento indefinito dopo la loro chiamata iniziale, Theseus non ha problemi di gestione e organizzazione corretta di queste chiamate sotto il loro iniziatore.
Una delle prime caratteristiche di Brackets era la modifica in linea per gli elementi CSS. Puoi mettere il cursore su qualsiasi elemento HTML, colpito CMD / CTRL + E, e le parentesi scansionerebbero il tuo progetto per trovare i file CSS rilevanti e la regola di corrispondenza appropriata. Ciò ha reso incredibilmente facile aggiornare rapidamente i fogli di stile applicabili al tuo contenuto.
Questo ha funzionato bene, a condizione che il contenuto sia effettivamente disponibile aveva una regola CSS corrispondente. Nell'ultimo aggiornamento di Brackets, l'editor ora riconoscerà quando un elemento non ha una regola CSS corrispondente.
Ora puoi aggiungere direttamente una nuova regola CSS direttamente dall'editor in linea.
Infine, un nuovo look "shell" viene aggiunto alle parentesi. Attualmente disponibile solo per Windows (ma sarà presto disponibile nella build di OSX), l'aspetto "Dark" è il futuro del look and feel dei Brackets.
Il tuo editor principale è a molto decisione personale per uno sviluppatore.
Il tuo editor principale è a molto decisione personale per uno sviluppatore. Mi sono ritrovato a usare Sublime Text alcuni mesi fa e ho notato che qualcosa non funzionava correttamente. Risulta, stavo cercando di utilizzare una funzione di parentesi. Quel giorno sono passato da Sublime come il mio editore principale di Brackets. Uso ancora Sublime (e per essere chiari, è un editor dannatamente fantastico!) Ma ora il mio lavoro quotidiano è svolto quasi interamente in Brackets.
Ovviamente mi piacerebbe che tu andassi - proprio ora - e scarica Brackets. Ma se vuoi scavare un po 'di più prima di impegnarti (ehi, capisco, costruire una relazione con un editore è un'impresa seria), dai un'occhiata a queste risorse:
Accentsconagua