Brackets: un ottimo editor open source

BracketsAdobe non è certo uno di quei colossi del web storicamente rinomati per tecnologie open source, ma negli ultimi tempi qualcosa è cambiato. Oltre alla creazione di framework e librerie JavaScript aperte come PhoneGap e Snap.svg, dal marzo 2013 hanno avviato lo sviluppo di Brackets, un editor davvero molto interessate costruito “con il web per il web”. Cosa significa? Che per sviluppare il software sono state utilizzare solo tecnologie web, infatti è scritto proprio in HTML, CSS e JavaScript! Il software è disponibile per tutti i principali sistemi operativi (Linux, Windows, Mac OS) e, vista la sua filosofia open source, si tratta dell’unico software di casa Adobe disponibile anche per Linux. Lo puoi scaricare qui.

Dal marzo 2013 ad oggi il progetto è maturato molto, arrivando ormai alla versione 1.1, arricchendosi nel tempo di funzionalità ed estensioni che lo rendono un vero e proprio IDE snello e performante, pensato apposta per lo sviluppo web. Vediamo alcune delle sue caratteristiche principali:

Live preview
Brackets permette di creare e modificare pagine web lavorando con HTML, CSS e JavaScript, in maniera rapida e efficace. Ovviamente non è un editor WYSIWYG, ma al suo interno ha una caratteristica chiamata Live preview, che permette di aprire una finestra di Chrome dove vedere in diretta l’interfaccia della pagina web che si sta editando, senza dover aggiornare ogni volta la pagina. Funzionalità ideale per chi, ad esempio, utilizza un notebook collegato con un monitor esterno: nello schermo del notebook si può tranquillamente lavorare sul codice, verificando in diretta le modifiche sul display del monitor esterno.

Quick edit
La funzionalità che forse mi ha colpito di più al primo utilizzo di Brackets. Funziona così: stiamo lavorando su una pagina HTML, al cui interno sono inserite delle regole CSS nei tag. Ci viene in mente di cambiare una regola, per esempio, sul colore di un titolo h1. Niente di più semplice e veloce: Selezionando il tag h1 e digitando Ctrl+E (Cmd+E su Mac) apparirà il pannello Quick Edit per modificare la regola CSS, senza doverla ricercare nel file CSS. Qui si può editare la singola regola CSS e con un Ctrl+S salvare la modifica, il file CSS contenente la regola viene automaticamente salvato. Il quick edit funziona con tutti i tag, classi o ID all’interno di una pagina HTML.

Adobe Brackets

Il quick edit attivato su una pagina HTML

Interessante la funzionalità di Quick Edit anche all’interno di un file CSS: cliccando su un codice di un colore si visualizza un Color Picker, molto comodo per un edit veloce.

Completamento automatico
Di per sè nulla di nuovo, praticamente tutti gli editor ormai hanno la funzionalità di completamento automatico, quello di Brackets comunque si distingue per funzionare molto bene sia per l’HTML che per CSS e JavaScript (e sono disponibili estensioni dedicate al completamento automatico per jQuery e PHP).

brackets manager estensioni

Il Manager delle estensioni

Manager delle estensioni
Oltre alle ottime funzionalità native, Brackets si avvale di una community di developer e designer molto attiva che contribuisce alla crescita dell’editor con estensioni davvero utili: oltre al code hinting per jQuery troviamo quello per AngularJS, con l’estensione Emmet è possibile scrivere codice molto rapidamente, utilizzando stringhe abbreviate per ottenere sequenze di tag complesse (guarda la documentazione della sintassi di Emmet), mentre con Bootstrap Skeleton si ottiene in un click un progetto Bootstrap inziale pronto per l’uso. Sono solo alcuni esempi, le estensioni sono tantissime, il bello è che la varietà di queste estensioni permette ad ogni sviluppatore di personalizzarsi l’editor con le caratteristiche più adatte alle sue esigenze.

Abbiamo visto come Brackets sia un editor molto pratico, snello e versatile, attualmente è il mio editor preferito e lo consiglio a tutti coloro che vogliono provare uno strumento nuovo per sviluppare sul web, alternativo a Sublime Text, ricco di funzionalità, open source e creato con tecnologie familiari a tutti i web designer e web developer.

Hai domande/commenti? Fammi sapere la tua opinione su Brackets

Ti è piaciuto l'articolo? Condividilo sui social!
Email this to someoneShare on Google+Share on LinkedInShare on FacebookTweet about this on Twitter

3 thoughts on “Brackets: un ottimo editor open source”

  1. Francesco says:

    Salve!! Si può usare Brackets con WordPress? …e se sì, come utilizzarlo con WordPress? Grazie!!

    1. Stefano De Carlo says:

      Ciao Francesco,
      ovviamente si! Brackets ha diverse estensioni che possono facilitarti la vita, come ad esempio l’estensione “WordPress hint” che aggiunge l’autocompletamento per lo sviluppo di temi e plugin WordPress. A questo link puoi trovare una lista molto utile: https://webdevstudios.com/2016/07/26/brackets-for-wordpress-2016-edition/

      Un saluto

      1. Francesco says:

        Grazie Stefano,
        dò subito uno sguardo al link….
        Ciao!!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *