Non dovrebbe essere ormai un segreto, noi di SkillsAndMore apprezziamo molto l’editor di codice Atom, tanto che abbiamo deciso di creare un corso dedicato! Però vogliamo far conoscere le potenzialità di questo strumento anche a coloro che hanno deciso di non seguire il corso.
Eecco perché in questo articolo troverai un’accurata selezione di package che renderanno più semplice e veloce il tuo lavoro.
Uno dei fattori che salta più all’occhio da parte di chi non ha mai utilizzato un editor come Atom è il suo estremo minimalismo.
Osservando l’editor non si vedono icone che aiutano ad aprire o salvare i nostri file, non si trovano comandi che permettono di allineare il testo selezionato e praticamente è assente qualsiasi altro riferimento grafico che ci introduca alle sue funzionalità. A prima vista sembra un editor fin troppo privo di opzioni, anche se chiunque abbia scelto di approfondirne la conoscenza avrà scoperto che qualsiasi operazione è soltanto a qualche lettera di distanza.
Parlo di lettere perché con Atom siamo invitati a usare molto la tastiera.
L’estremo minimalismo di cui ti ho parlato prima viene dimenticato non appena si scoprono tutte le scorciatoie da tastiera e la possibilità di lanciare comandi scrivendo semplicemente il loro nome all’interno del pannello con la fuzzy search. Ovvero la possibilità di trovare qualsiasi parola stiamo cercando digitanto semplicemente delle lettere che compongono il termine ricercato.

Se le cose a cui faccio riferimento ti confondono non posso fare a meno che invitarti a consultare il nostro corso, magari iniziando proprio dalle lezioni gratuite, perché in questo articolo non voglio soffermarmi sulle basi, ma piuttosto voglio mostrarti quanto sia semplice mettere il turbo a questo editor attraverso i suoi package.
Che cosa è un package?
Ti anticipo fin da ora che questo articolo sarà molto lungo, pensa che contiene 8.881 parole, e questo perché le informazioni che ti voglio passare sono veramente molte.
Se vuoi portartele con te non devi far altro che iscriverti alla nostra newsletter cliccando qua. Facendo così potrai scaricare la versione PDF di questo articolo e restare aggiornato con la pubblicazione dei prossimi direttamente nella tua casella di mail.
Comunque sia, come stavo dicendo il tempo ci è tiranno quindi anche se per leggere questo articolo è consigliata una conoscenza base di Atom, anche se ci sono alcuni aspetti sui quali non posso proprio sorvolare…
Dovrebbe essere chiaro a tutti che Atom è una applicazione desktop scritta interamente con codice HTML, CSS e JavaScript. Siamo tutti sulla stessa linea? Beh se devo essere onesto, in Atom si vede più codice CoffeeScript rispetto a JavaScript, ma si tratta solo di sottili differenze. Dato che tutto l’editor è realizzato con del codice web, quali saranno i linguaggi con i quali possiamo creare i package?
Se hai pensato gli stessi, hai centrato il bersagio. Un package non è altro che un insieme di file che contengono i precedenti linguaggi e che permettono ad Atom di eseguire funzionalità che prima non era in grado di svolgere. Praticamente come i plugin per WordPress.
Però se adesso è chiaro che cosa sia un package, diventa necessario capire come sia possibile installarli. Le possibilità che abbiamo di fronte a noi sono due:
- tramite l’uso del terminale
- con gli strumenti interni ad Atom
Voglio presentarti entrambe e poi sarai tu a scegliere quale per te risulta essere la migliore.
Installare Atom Package con il terminale
Iniziamo prima con le cose difficili perché al tempo stesso ci aiutano a capire meglio le cose, in fin dei conti al giorno d’oggi lo sviluppatore moderno si trova sempre più spesso a utilizzare il terminale perché ci consente di utilizzare degli strumenti che ci semplificano la vita sotto (praticamente) ogni aspetto.
Ci sono script che ci aiutano ad avviare un ambiente di sviluppo locale per qualsiasi cosa, che tu desideri sviluppare un plugin o un tema WordPress fino ad arrivare allo sviluppo di applicazioni ibride. In tutti questi esempi il terminale è un grande alleato.
Anche quando si desidera installare un package di Atom.
Prima di proseguire mi voglio assicurare di una cosa: hai installato Atom sul tuo sistema? Per quanto possa sembrare una domanda banale è essenziale per poter fare i primi esperimenti. Quindi apri il tuo terminale e scrivi atom
, se tutto funziona correttamente si aprirà la finestra di questo programma.
Bene a questo punto dobbiamo scoprire quale sia il comando che ci permetterà di installare nuovi package velocemente.
Il comando base per eseguire le nostre operazioni è apm
e puoi scoprire tutti i suoi comandi e configurazioni scrivendo apm help
. Hai provato a eseguire questa operazione?
Troppo presto?
Nessun problema, ecco qua sotto che cosa ti risponderà il comando apm help
:
$ apm help apm - Atom Package Manager powered by http://atom.io Usage: apm <command> where <command> is one of: clean, config, dedupe, deinstall, delete, dev, develop, disable, docs, enable, erase, featured, home, i, init, install, link, linked, links, list, ln, lns, login, ls, open, outdated, publish, rebuild, rebuild-module-cache, remove, rm, search, show, star, starred, stars, test, uninstall, unlink, unpublish, unstar, update, upgrade, view. Run `apm help <command>` to see the more details about a specific command. Options: --color Enable colored output [boolean] [default: true] -v, --version Print the apm version -h, --help Print this usage message Prefix an option with `no-` to set it to false such as --no-color to disable colored output.
Se è la prima volta che usi un comando da terminale probabilmente il suo output ti ha un po’ “spaventato” ma non c’è assolutamente bisogno. Praticamente grazie all’opzione help
viene descritto il modo di usare questo comando. Possiamo lanciare qualsiasi comando con apm <command>
e se per qualche motivo non ci ricordiamo che cosa fa uno specifico comando, possiamo scoprirlo scrivendo apm help <command>
e il gioco è fatto.
Esistono molti comandi interessanti, ma il nostro interesse si rivolge tutto nei confronti di apm install
che, appunto, è il comando che ci permetterà di installare nuovi package.
Per installare un package è utile conoscere il suo nome o (come diremmo all’interno di WordPress) il suo slug. Per questo motivo un comando come apm search
potrà esserti molto utile. Però ho voluto darti una mano inserendo all’interno di questo articolo sia il nome completo che lo slug di ogni package in modo da aiutarti il più possibile a velocizzare le varie operazioni.
Quindi, prima di concludere anticipo uno dei package che ho selezionato per questo articolo e voglio mostrarti come sia possibile installarlo. All’interno del terminale scriviamo apm install minimap
, questo è un package molto interessante che descriverò a breve, intanto vediamo che cosa ci risponde.
$ apm install minimap Installing minimap to /Users/abarghigiani/.atom/packages ✓ $
Lanciato il comando il terminale si prenderà qualche secondo per contattare i server di Atom.io e scaricare il package. Una volta completato questa operazione non verrà perso tempo e se tutto è filato liscio vedremo apparire di check.
Ecco fatto, adesso il pacchetto è installato e attivo nel tuo editor!
Installare Atom Package con GUI
Per quanto spoglio possa sembrare Atom, presenta molte opzioni raggiungibili con una breve ricerca (grazie alla fuzzy search presente nel pannello) o con una scorciatoia da tastiera.
Se vuoi approfondire le tue conoscenze su questo strumento puoi farlo grazie al nostro corso esclusivo che ti permetterà di conoscere tutti i segreti di questo potente editor di codice. Inizia dalle lezioni gratuite per scoprire la qualità dei contenuti presenti 😉
Installare un nuovo package è molto semplice anche utilizzando una GUI, tutto quello che devi fare è aprire la tavolozza dei comandi e cercare la voce Settings View: Install Packages and Themes. Come puoi vedere dal nome della pagina delle opzioni, all’interno di un’unica schermata puoi installare sia package che temi.

Dato che possiamo installare entrambi i tipi di componenti, per quanto intuitivo ho pensato che fosse utile farti notare come sia possibile cambiare tra i vari tipi di ricerche. Andando infatti ad agire sui pulsanti messi in evidenza ti sarà possibile modificare la ricerca che potrai fare grazie al campo messo a disposizione.
È anche possibile selezionare i pacchetti preferiti da parte della community scorrendo nella pagina di impostazioni, ma quello che mi interessa fare è mostrarti come sia semplice installare un package attraverso questa GUI.
La prima cosa che dobbiamo fare è cliccare sul campo di ricerca Search packages e iniziare a scrivere il nome del package (o della funzionalità) che stiamo cercando. Dato che abbiamo già installato minimap
con l’esempio precedente credo proprio che sia il caso ideale per andare a installare il secondo package che ti raccomando in questa imponente lista: goto-definition
.

Sicuramente la cosa che salta più agli occhi è quel bel pulsante blu che ci invita a installare il package, ma ci sono altre interessanti caratteristiche in questa schermata. Per prima cosa vorrei farti notare che, data la mole di package (al momento della stesura di questo articolo superiamo abbondantemente i 6000) è meglio scrivere direttamente lo slug per essere sicuri di trovare il package corretto.
Oltre a questo, da questa schermata possiamo scoprire quante persone lo hanno scaricato (grazie al numero in alto a destra) e, cosa ancor più utile, è la possibilità di avere un link che punta alla pagina di descrizione del package e scoprire nel dettaglio quali siano le funzionalità che potrai utilizzare una volta installato.
Adesso conosci entrambi i metodi che ti permettono di installare un package, personalmente devo dire che ho trovato l’installazione attraverso il terminale un po’ più veloce e soprattutto potrebbe essere molto comoda se dobbiamo installarne diversi, in qualsiasi terminale è molto semplice concatenare l’installazione di più pacchetti.
Ti confesso che io utilizzo questi due metodi indistintamente, dipende un po’ dal lavoro che sto svolgendo e gli strumenti che ho a disposizione e sono sicuro che anche tu farai lo stesso. Adesso è giunto il momento di rispondere alla domanda delle domande.
Quali sono i package che voglio consigliarti?
Eccoci nel vivo dell’articolo, quali sono i package che ti suggerisco di installare e perché li ho selezionati? Per rispondere immediatamente all’ultima domanda, ti sto consigliando questi package non tanto per dirti di installarli tutti, il mio consiglio è installare quelli che ti sono più comodi e per questo motivo ho suddiviso la selezione in sezioni, per renderti la lettura di questo elenco il più semplice possibile.
Se pensi che a questa selezione manchi qualche package che ritieni fondamentale nel tuo lavoro non fare il timido e suggeriscilo all’interno dei commenti! Questo articolo è stato creato per essere in costante aggiornamento e in grado di soddisfare le necessità dello sviluppatore moderno, per questo motivo il tuo contributo sarà fondamentale a renderlo ancora più completo e utile.
Detto questo, penso sia giunto il momento di presentarti le sezioni identificate e per facilitarti in questa lettura ho deciso anche di creare il seguente menu che ti permetterà di saltare da una parte all’altra dell’articolo senza troppo sforzo.
Adesso che il nostro menu secondario è stato presentato hai due possibilità: o continui la lettura dei vari package scorrendo la pagina o salti alla sezione desiderata cliccando direttamente sulla voce.
Buona lettura 😉
Misc
All’interno di questa prima categoria ho deciso di inserire tutti quei package per i quali non ho trovato una vera e propria destinazione ma che ritengo molto utili per il nostro lavoro quotidiano. Andiamo subito a scoprire i primi.
Minimap – minimap
Sicuramente questo è un pacchetto utilissimo per tutti coloro che apprezzano Sublime Text, infatti permette di avere una colonna che riassume il codice inserito all’interno del file e ne facilita la navigazione.
Come puoi vedere tu stesso, grazie a questo package diventa veramente semplice capire dove ci troviamo all’interno del file e anche la navigazione viene semplificata dato che potremo utilizzare la mappa per spostarci più velocemente all’interno delle righe di codice senza dover far andare in fiamme la rotellina del nostro mouse.
Oltre a questo, il package presenta molti plugin compatibili che aggiungono interessanti funzionalità.
Uno tra i miei preferiti è minimap-autohider
che permette di nascondere automaticamente la mappa man mano che scriviamo, oppure minimap-bookmarks
che invece ci permette di saltare velocemente nel codice su righe che abbiamo precedentemente evidenziato.
Insomma, se sei un tipo al quale piace il controllo, sono sicuro che troverai questo package molto utile.
Go to Definition – goto-definition
Altro utile package che funziona con molte sintassi e che ci permette di saltare velocemente alla definizione di una specifica funzione presente nel nostro codice.
La sua compatibilità con linguaggi come JavaScript, PHP, Ruby e molti altri linguaggi lo rende un package di sicura utilità e ci permette di lavorare molto più facilmente. Se hai paura che una tale funzionalità possa rallentare Atom non ti devi assolutamente preoccupare, recentemente è stata aggiunta la Performance Mode che promette di essere fino a 10 volte più veloce nel trovare le definizioni appropriate per il proprio codice.
Molto utile quando lavoriamo con framework o librerie che non conosciamo alla perfezione e abbiamo bisogno di trovare velocemente le funzioni che stiamo cercando.
Remote Edit – remote-edit
Questo package da una parte mi fa storgere il naso perché non sono un fan del cowboy coding, però devo ammettere che per veloci modifiche risulta uno strumento veramente utile che permette di lavorare direttamente dal nostro editor di codice.

Tutte le impostazioni sono semplici da raggiungere attraverso la tavolozza dei comandi e quella che vedi qua sopra è la schermata che ci permette di configurare una nuova connessione FTP che ci permetterà di connetterci direttamente al server contenente i file sui quali dobbiamo lavorare.
Fare piccole modifiche grazie a questo package è un gioco da ragazzi, in fin dei conti ci permette di evitare il classico processo che ci porta via molto tempo:
- aprire FileZilla (o altro programma FTP)
- connettersi al server remoto
- scaricare il file da modificare
- applicare le modifiche
- caricare nuovamente il file online
So che sono soltanto 5 passaggi, ma pensa a farlo decine di volte al giorno 😀
Questo aspetto ti dovrebbe anche far capire perché noi di SkillsAndMore consigliamo la creazione di un ambiente di sviluppo locale, ma non voglio approfondire questi argomenti. Continuiamo il nostro viaggio alla scoperta dei package Atom.
To do Show – todo-show
Sono sicuro che da bravo sviluppatore riempi il codice di commenti che ti aiutano a capire e ricordare le funzionalità implementate all’interno del tuo codice. Molto spesso però capita di non concludere tutte le operazioni che dobbiamo svolgere e per questo motivo capita di doversi lasciare dei TODO, dei piccoli commenti che ci ricordano cosa dobbiamo fare.
Generalmente i commenti sono sparsi all’interno del codice, ma grazie a questo package possiamo averli tutti raccolti in una comoda colonna in modo da ricordarci che cosa dobbiamo ancora fare e trovare velocemente il punto in cui iniziare a lavorare.
Project Manager – project-manager
Se siamo abituati a gestire diversi progetti all’interno dell’editor di codice, una cosa che IDE come NetBeans o PhpStorm sono in grado di fare nativamente, con Atom possiamo risolvere questo problema grazie a questo package.
Una volta installata l’estensione sarà possibile creare diversi progetti e gestirli direttamente da una comoda GUI. Se abbiamo bisogno di impostazioni aggiuntive o vogliamo organizzare il progetto che stiamo creando nel dettaglio non dobbiamo far altro che aprire il file project.cson
per modificare tutti gli aspetti che desideriamo.
Se non conosci l’estensione .cson
non devi assolutamente preoccuparti. Come dicevo a inizio articolo Atom è un’applicazione creata con tecnologie web e il CoffeeScript è uno di questi linguaggi, i file in questo formato sono molto simili a file JSON creati appositamente per questo linguaggio
Hihlight Selected – highlight-selected
Quante volte hai rischiato la cecità cercando una variabile o una funzione all’interno del codice?
Grazie a questo package quei tempi sono finiti! Una volta installato, tutto quello che dovrai fare è cliccare due volte sulla parola che ti interessa per evidenziare tutte le sue ripetizioni all’interno del file aperto.
Permette anche di modificare con del semplice CSS lo stile del testo messo in evidenza e grazie al plugin minimap-highlight-selected
possiamo vedere la stessa selezione all’interno della minimap rendendo ancora più facile scoprire velocemente la posizione dell’elemento cercato.
Color Picker – color-picker
Una cosa che ritengo molto importante quando lavoro con i CSS o con le variabili in Sass è riconoscere il colore che sto utilizzando. Voglio dire, un po’ come tutti anche io so che i valori esadecimali definiscono il colore in coppie alfanumeriche che identificano Red Blue e Green, ma per questo motivo dovrei sapere a che cosa corrisponde #4F22A5
???
Ecco quindi che un package come questo diventa incredibilmente utile! Non soltanto ci permette di conoscere e modificare il colore impostato in esadecimale, ma ci aiuta anche a trasformarlo in rgb
, hsl
e negli altri formati supportati dai CSS.
Pigments – pigments
Se non abbiamo problemi con la definizione di un colore, allora questo package ci sarà ancora più utile perché ci permette di conoscere qualsiasi colore impostato all’interno del progetto senza neanche dover utilizzare una scorciatoia da tastiera.
Per quanto possa sembrare semplice da utilizzare, in questo package sono presenti anche molti altre caratteristiche come la possibilità di avere la tavolozza dei colori utilizzati nel progetto, la ricerca specifica per i colori e molte altre cose interessanti.
Nell’immagine sopra viene mostrato il suo utilizzo con LESS.js, ma funziona senza alcun problema anche con Sass, Stylus e il classico CSS 😉
Beautify – atom-beautify
Scrivere codice nel modo corretto è veramente un dolore per noi sviluppatori. Talvolta capita anche al sottoscritto di fare copia/incolla di un ingegnoso blocco di codice trovato online, ma il problema è che le diverse impostazioni o sintassi finiscono sempre per rendere l’organizzazione del mio codice un vero disastro!
Forse questo è uno dei package più utilizzati e mantenuti all’interno di Atom, in fin dei conti permette di ordinare moltissimi linguaggi di programmazione e lascia a noi sviluppatori soltanto la preoccupazione di portare a termine il nostro lavoro.
Ti consiglio di dare un’occhiata alla sua pagina su Atom perché le configurazioni sono veramente molte e puoi scoprire come disattivarlo per linguaggi che non usi spesso. Questo ti aiuterà anche a rendere Atom ancora più veloce e reattivo.
Linter – linter
Se con il package precedente ci siamo preoccupati di gestire la struttura del nostro codice, con questo diventeremo in grado di scoprire se stiamo utilizzando delle funzionalità deprecate o semplicemente se abbiamo fatto qualche errore.
Questo package non lavora assolutamente da solo perché, a differenza delle impostazioni di Beautify dove è possibile disabilitarlo per determinati linguaggi, con Linter il concetto è letteralmente opposto. Si installano plugin aggiuntivi soltanto per i linguaggi che vogliamo far controllare.
Forse ti starai chiedendo come sia possibile trovare il package adatto al nostro linguaggio? Basta andare a visitare il sito web che è stato realizzato per scoprirli tutti.
Sync Settings – sync-settings
È probabile che nel tuo lavoro ti trovi a utilizzare dei computer diversi, sicuramente il passaggio da un sistema operativo a un altro è un duro colpo però ammettiamolo, c’è sempre qualcosa che manca anche se si tratta dello stesso.
Per esempio, il mio lavoro si svolge su tre computer Mac differenti, due fissi e un portatile. Anche se sono in grado di installare le mie applicazioni su tutti i computer, talvolta sento la mancanza di quella determinata scorciatoia da tastiera…
Per essere onesto con te da un po’ di tempo sto utilizzando makup per mantenere sincronizzate le diverse installazioni dei miei programmi, ma questo è un argomento per un altro articolo.
Una cosa molto bella che potremmo avere sui nostri sistemi operativi è la possibilità di condividere la configurazione dei nostri Atom, in questo modo potremo essere più veloci nello sviluppo dei nostri progetti dato che tutti gli editor che utilizziamo avranno le stesse scorciatoie, package e temi. Praticamente anche se cambieremo computer, il nostro editor di codice si comporterà come ci aspettiamo.
Ecco che un package come Sync Settings risulta utile.
Utilizzato da decine di migliaia di sviluppatori questo package è in grado di sincronizzare le impostazioni del nostro Atom e anche quelle di tutti i package installati, ma non si ferma certo qua! Dai un’occhiata alla pagina del progetto per scoprirlo nel dettaglio.
HTML
Con i precedenti package ci siamo avvicinati all’universo Atom e spero di averti aiutato a scoprire in quanti modi diversi potrai personalizzare questa applicazione e renderla in grado di rispondere alle tue necessità.
Detto questo, a partire da questa sezione andremo a conoscere Atom ancora più da vicino scoprendo alcuni package specifici per linguaggio di programmazione. Prima abbiamo scoperto atom-beautify
e linter
, adesso è giunto il momento di conoscere quelli che ci permetteranno di scrivere codice più velocemente e iniziamo il nostro viaggio parlando di HTML.
Emmet – emmet
Se hai iniziato a leggere i nostri articoli ai tempi in cui html5AndMore e wpAndMore erano i portali sui quali scrivevo più spesso, molto probabilmente hai già sentito parlare di questa soluzione molto interessante che permette di scrivere codice HTML (e non solo) alla velocità della luce.
È già capitato diverse volte di parlare di questa soluzione, sia in nostri articoli che nei nostri corsi, per questo motivo non voglio andare a parlare troppo di questo package.
La cosa importante da ricordare è che possiamo installarlo facilmente nel nostro Atom con i metodi che ti ho mostrato prima, se desideri avere un valido alleato nella creazione delle tue strutture HTML non devi fare altro che iniziare a usarlo 😉
Autoclose HTML – autoclose-html
Grazie a Emmet sarai in grado di risolvere molti dei problemi comuni a uno sviluppatore FrontEnd, in fin dei conti oltre che creare velocemente delle strutture HTML è anche in grado di indentarle e chiuderle correttamente.
Però se per qualche motivo non vuoi installare questo package o semplicemente perché ti trovi in situazioni in cui non è necessario utilizzarlo, credo proprio che questo package faccia al caso tuo.
Autoclose HTML fa quello che dice, ci aiuta a chiudere un tag HTML ogni volta che lo apriamo. Benché questa sia una funzionalità già integrata in molti IDE, può capitare che il tuo Atom non si comporti come desideri quando si tratta di chiudere gli elementi. Per questo motivo credo che troverai utile questo package.
HTML to CSS – html-to-css
Probabilmente è successo anche a te, guardi una grafica che ti propone il tuo collega o il tuo cliente che devi trasformare in un sito web e inizi subito a pensare quali elementi HTML e quale struttura dovrai fornire al tuo progetto.
Poi ci mettiamo davanti al codice e ci ricordiamo che tutti quei pensieri sulla struttura devono anche essere appoggiati da un CSS che ci permette di modificare lo stile di questi elementi, da questo momento in poi una grande danza avanti e indietro verso la tab HTML e quella CSS ha inizio…
Grazie a questo package tutti questi problemi sono soltanto un lontano ricordo del passato, infatti grazie a HTML to CSS sarai in grado di creare il CSS adatto per qualsiasi porzione di codice HTML selezionati. Questo significa che anche quando ti troverai ad aggiungere elementi alla tua pagina, tutto quello che devi fare è semplicemente selezionare la porzione di codice creata e avviare la funzionalità che hai appena installato.
Double Tag – double-tag
Questo package porta una semplice funzionalità, che ho trovato in molti IDE avanzati e che ritengo veramente utile per quando semplice.
Praticamente una volta installata potrai modifificare l’apertura del tuo elemento HTML e automaticamente modificherai quello di chiusura, in questo modo non dovrai più andare a cercare la chiusura in decine di righe di codice.
Linter HTMLHint – linter
Precedentemente ti avevo annunciato la possibilità di poter utilizzare un linter che ti permetterà di conoscere gli errori presenti nel tuo codice e di porvi velocemente rimedio.
Questo package permette di utilizzare la tua configurazione di HTMLHint generalmente salvata nel file .htmlhintrc
e che il programma cercherà automaticamente nella gerarchia delle tue cartelle. Sicuramente utile, ma anche il prossimo non è niente male 😉
W3C Validation – w3c-validation
Personalmente questa non è un package che mi trovo spesso a installare perché lavorando con un CMS risulta difficile per l’editor comprendere correttamente l’apertura e la chiusura di un dato tag, ma se ti capita o sei interessato a validare le tue pagine HTML non puoi farti scappare le utili funzionalità che vengono introdotte.
Atom Bootstrap4 – atom-bootstrap4
Probabilmente sai che non sono un grande fan del framework Bootstrap, soprattutto se stiamo parlando di utilizzarlo con WordPress. Però riconosco che è un framework molto famoso e probabilmente anche i tuoi CSS portano con se un po’ di codice che dipende dalle sue strutture HTML.
Dato infatti il suo utilizzo spero che troverai utile tutte le snippet di codice che vengono importate e che, come mostra l’immagine qua sopra, velocizzerà incredibilmente il tuo lavoro con questo framework.
Semantic UI – semantic-ui
Dato che precedentemente ho spezzato una lancia a favore di Bootstrap mi sembra corretto spezzarne una anche per un altro famoso framework FrontEnd che ha un approccio molto più semantico alla faccenda: Semantic UI.

Come per il package precedente, anche questo porta con se un gran numero di snippet che ti permetteranno di creare velocemente tutte le strutture HTML necessarie al funzionamento dei suoi 50+ componenti. Ricorda che tutte queste novità vengono mantenute nella tavolozza dei comandi.
Hai bisogno di approfondire le tue conoscenze su Atom, approfitta adesso del nostro esclusivo corso che ti permetterà di padroneggiare questo editor di codice open source e farlo comportare come desideri!
Atom Email Snippet – atom-email-snippet
Essere in grado di creare delle email partendo dal codice è una skill molto richiesta perché nonostante il fatto che il mercato offra un gran numero di soluzioni drag’n drop niente può battere la qualità del codice che può realizzare un essere umano.
Ecco perché mi trovo a consigliarti questo package, nato da un articolo molto dettagliato, offre ben 27 snippet che ci aiuteranno nella realizzazione di qualsiasi email.
CSS
Come puoi notare, il linguaggio HTML ha un bel numero di package che ci possono aiutare nel nostro lavoro, ma se devo essere onesto anche i CSS non scherzano 🙂
I nostri fogli di stile hanno visto molte mutazioni nel tempo. Alcune proprietà sono state deprecate, moltissime sono state aggiunte e al giorno d’oggi è possibile creare layout web utilizzando una vera e propria griglia CSS. Però stare al passo con tutte queste novità non sempre è semplice, ecco quindi una piccola collezione di package dedicati proprio a renderci la vita più semplice!
CSS Snippets – css-snippets
Se sei interessato a utilizzare snippet di codice per creare i tuoi file CSS (supporta anche la sintassi SCSS) non potresti trovare un package migliore.
Mantenuto e sviluppato nel tempo, all’interno di questo package troverai centinaia di utili snippet. Pensa che sono talmente tante che lo sviluppatore che ha creato questo package ha deciso di non creare alcuna pagina per elencarle tutte, ma piuttosto preferisce condividere il link del file ospitato su GitHub.
CanIUse CSS – caniuse-css
Sicuramente CanIUse è uno dei servizi più importanti e interessanti di tutto il web, in pochissimi secondi è possibile interrogare il loro database per scoprire quale è il livello di compatibilità per una determinata proprietà CSS (funziona anche con HTML, SVG e altri linguaggi).
Sicuramente questo è un servizio molto utile e interessante per aiutarci a mentenere le nostre pagine piene di codice aggiornato, però diventa molto noioso dover tutte le volte aprire una tab nel nostro browser e inserire la proprietà che stiamo cercando. Per fortuna nostra con questo package possiamo implementare queste funzionalità nel nostro editor di codice, tutto quello che dobbiamo fare è continuare a scrivere il nostro codice e man mano che inseriamo le nostre regole possiamo avere dei feedback sulla qualità e correttezza del nostro codice.
CSS Unit Converter – atom-css-unit-converter
Sicuramente conoscere le nuove unità di misura che possiamo utilizzare per sviluppare applicazioni web sempre più avanzate e compatibili ci permette di migliorare il nostro codice. All’interno del nostro blog ti abbiamo già presentato le unità di misura che si adattano automaticamente al nostro schermo e all’interno del corso dedicato al responsive web design spieghiamo come utilizzare le l’unità di misura rem
per creare siti web con la logica del content first.
Non sempre è facile mantenersi al passo con i tempi e utilizzare correttamente queste unità di misura, figuriamoci ricordarci il rapporto tra queste e le formule matematiche che servono per calcolarle!

Questo package porta con se tre nuove scorciatoie da tastiera che ci permettono di convertire facilmente le unità di misura tra loro senza neanche dover aprire l’applicazione della calcolatrice 😀
CSS Spy – css-spy
A essere onesti questo package è ancora in beta ma offre una funzionalità veramente interessante che può tornare utile in molti casi. Se ti è piaciuta l’idea del precedente HTML to CSS, allora probabilmente apprezzerai molto anche questo package!
Se prima avevamo una funzionalità che ci permetteva di creare un foglio di stile partendo dalla nostra selezione HTML, adesso possiamo inserire delle classi che ci vengono suggerite leggendo direttamente il CSS. Grazie a questo package è giunto il momento di dire basta agli utilizzi di classi inventate o scritte per troppa furia, se abbiamo strutturato bene il nostro foglio di stile possiamo sfruttare le classi suggerite senza doverci preoccupare troppo.
Autoprefixer – autoprefixer
I CSS sono un linguaggio che è in continua evoluzione e forse la cosa più frustrante di tutte è che i diversi browser decidono di implementare le varie proprietà come meglio credono. Sicuramente utilizzare CanIUse ci aiuta molto per conoscere la compatibilità del nostro codice, ma quello che ci richiede spesso di vare è scrivere le stesse proprietà con dei vendor prefix differenti.
Che onestamente trovo un’immensa perdita di tempo!
Grazie a questo semplice package possiamo interrogare automaticamente lo stesso servizio offerto da CanIUse per conoscere le corrette sintassi che possiamo utilizzare per le diverse proprietà. Qua sopra l’immagine mostra quanto sia semplice lavorare con questa soluzione trasformando la proprietà box-sizing
per funzionare correttamente con i diversi browser, ma ti assicuro che controlla anche molte altre proprietà. Scoprile all’interno del repository GitHub e magari lascia anche una stella 😉
CSS Comb – atom-css-comb
Scrivere i CSS è sicuramente un’esperienza elettrizzante, abbiamo la possibilità di creare elementi e atmosfere direttamente nel browser! Però riprendere in mano un progetto dopo diversi mesi ci pone di fronte a un problema bello grosso: l’organizzazione del nostro codice!
Non so se tu segui regole ben precise quando crei i tuoi CSS, io provo a seguire l’ordine alfabetico quando creo le varie regole però c’è sempre qualcosa che non quadra… Per questo motivo voglio consigliarti CSS Comb che ci permette di organizzare l’intero foglio di stile o singole regole in modo da aumentare la leggibilità dei nostri fogli di stile. Ti assicuro che una volta completato un progetto, avere questa funzionalità a qualche click di distanza è incredibilmente utile!
CSS Grid Snippet – css-grid-snippet
Per anni abbiamo chiesto al W3C un sistema per creare layout professionali senza dover ricorrere a stratagemmi o trucchi da circo, quest’anno hanno soddisfatto le richieste rilasciando il modulo CSS Grid. All’interno di SkillsAndMore abbiamo già trattato questo argomento in un articolo in cui ti presentiamo le CSS Grid, le potenzialità sono veramente molte, ma ricordarsi nuove proprietà non è sempre semplice.
Per questo motivo sono convinto che troverai questo package molto interessante. Le snippet messe a disposizione sono veramente utili perché ci permettono di entrare nel dettaglio di questa specifica e utilizzare anche le nuove unità di misura che sono molto utili nella creazione di layout moderni.
Flexbox Snippets – flexbox-snippets
Prima ti ho presentato un package per le CSS Grid e anche se non ho molto da dire riguardo a questo pensavo che potessi trovare utile una raccolta di snippet per Atom create appositamente per Flexbox 😉
Se vuoi conoscere meglio questo modulo ti ricordo che abbiamo un corso dedicato al suo utilizzo perché conoscendo da vicino le sue potenzialità capirai da solo quanto sia utile utilizzarlo assieme alle griglie per la creazione dei tuoi elementi.
CSS Edit Groups – css-edit-groups
Per quanto io sia un grande fan della suddivisione dei nostri CSS, devo ammettere che molto spesso mi capita di scrivere CSS da migliaia di righe di codice e nonostante che tenti di lasciare commenti utili sono molto frustrato perché navigare all’interno di questi grandi fogli di stile non è mai semplice.
Con il package CSS Edit Groups invece, utilizzando semplici commenti, possono navigare velocemente il mio codice e saltare da una portzione all’altra del foglio di stile. Non c’è molto da dire a riguardo, va provato!
Linter CSSLint – linter-csslint
Ultimo ma non per importanza, il package Linter che ci permette di utilizzare csslint per assicurarci di aver scritto del codice CSS corretto 😉
Ti sta piacendo l’articolo? Regalaci una condivisione!
[social_warfare]
Sass
Se hai pensato: “Una sezione dedicata a Sass? Non bastavano i CSS?”. Confesso che è un dubbio che ha attraversato anche la mia mente, ma devo dire che ritengo il linguaggio Sass una risorsa separata e ricca di package per Atom. Quindi per non creare troppa confusione ecco la sezione dedicata.
Se non conosci ancora Sass è giunto il momento di dire basta! All’interno di SkillsAndMore stiamo aggiornando il corso su Sass con tante nuove conoscenze e consigli utili, acquistalo ora per bloccare il prezzo e ottenere i nuovi contenuti appena realizzati!
Come sviluppatore Sass dovresti sapere che al suo interno possiamo utilizzare la sintassi SCSS che è incredibilmente simile ai classici fogli di stile e di conseguenza risulta molto intuitiva per tutti gli sviluppatori FrontEnd. I seguenti package che ho selezionato si rivolgono principalmente a questo tipo di sintassi, ma se ne conosci altri non esitare a farceli conoscere commentando questo articolo. Grazie al tuo contributo potremmo migliorare ulteriomente questo articolo!
SCSS Snippets – scss-snippets
Sicuramente questo non è il primo package che ti mostro per avere a disposizione delle snippet di codice da usare facilmente e nonostante il fatto che alcune snippet SCSS siano presenti anche all’interno del package CSS Snippets non posso fare a meno che consigliarti anche questo perché presenta una serie di soluzioni create appositamente per questa sintassi.
Per esempio, se usi Sass da diverso tempo dovresti essere a conoscenza della possibilità di inserire dei blocchi condizionali all’interno del nostro codice. Cose come while
, for
, if
e gli altri cicli presenti in un linguaggio di programmazione sono a nostra disposizione anche con la sintassi SCSS, ma non sempre è facile ricordarli e per questo motivo possiamo installare questo package.
Diciamo per esempio che hai bisogno di eseguire un for
. All’interno del tuo file .scss
puoi scrivere tranquillamente fr
e premere invio. Una volta che avrai eseguito questa semplice operazione il tuo codice verrà arricchito dalla seguente sintassi:
@for $var from 1 through $length { /* code */ }
Il codice generato è già pronto a essere modificato e per spostarti velocemente non dovrai far altro che premere il pulsante tab, anche se in fin dei conti abbiamo trattato queste cose da vicino all’interno del corso dedicato ad Atom.
Atom Sass – atom-sass
Vuoi compilare il tuo codice Sass ma non hai intenzione di pagare per qualche strumento oppure non desideri configurare Grunt o Gulp? Nessun problema perché con questo package puoi iniziare a lavorare immediatamente senza perdere troppo tempo nella configurazione del tuo ambiente di sviluppo.
Una volta installato questo package e aperto un file .scss
non dovrai far altro che premere la combinazione di tasti Alt + Ctrl + c (oppure Opt + Cmd + c se sei su Mac) e il gioco è fatto! Da questo momento in poi il tuo editor Atom compilerà il tuo codice SCSS in un classico foglio di stile ogni volta che salverai il tuo file.
Questo package è incredibilmente utile quando dobbiamo fare veloci modifiche all’interno di un progetto che è stato creato usando proprio la sintassi SCSS.
Sass Comment – sass-comment
Come in qualsiasi linguaggio di programmazione, anche all’interno dei nostri fogli di stile è importante avere una certa coerenza ed essere in grado di capire velocemente che cosa fa un certo blocco di codice, purtroppo non sempre questo è possibile.
Vuoi per il poco tempo che abbiamo per portare a termine un progetto, vuoi perché nel momento in cui scriviamo il nostro codice ci sembra così semplice da comprendere generalmente i nostri fogli di codice sono privi di qualsiasi indizio. Eppure nello sviluppo è buona pratica lasciare dei commenti esplicativi sul blocco di codice, peccato che molto spesso è un’attività incredibilmente noiosa! Ecco perché il package Sass Comment viene in nostro aiuto! Scrivendo semplicemente c-title
possiamo creare un complesso commento dove poter descrivere le nostre regole e le funzionalità aggiunte dal nostro blocco di codice.

Creare facilmente dei blocchi di codice ci può essere molto utile per poter creare della documentazione online che aiuti i nostri collaboratori e colleghi a comprendere meglio la logica del nostro blocco di codice.
Ovviamente non siamo obbligati a utilizzare soltanto la snippet c-title
ma lo sviluppatore di questo package ce ne offre molte altre comprese alcune che ci permettono di creare velocemente delle TODO 😉
Aligner SCSS – aligner-scss
A chi non è capitato di osservare il codice scritto per scoprire che è una grande confusione? Personalmente mi è successo moltissime volte e non parlo soltanto dei commenti, che abbiamo appena trattato, ma anche degli allineamenti del proprio codice! In CSS esistono regole, proprietà e valori che hanno lunghezze diverse e per i quali è difficile poterli allineare correttamente.

Abbiamo già visto un package molto simile grazie a CSS Comb ma questo è leggermente diverso, praticamente ci permette di allineare il nostro codice per comprendere più facilmente dove si trovino i valori impostati per le singole proprietà, molto interessante perché è un tipo di ordinamento che vediamo molto spesso all’interno di diversi progetti.
Il mio consiglio è: provalo! Al limite sarai sempre in tempo per rimuoverlo in un secondo momento 😉
Linter Sass Lint – linter-sass-lint
Come già successo per i classici CSS, anche Sass ha a disposizione un linter che ci aiuta a capire meglio la qualità del nostro codice. In questo package è già integrato sass-lint alla sua ultima versione e non richiede alcuna installazione o configurazione. Se sul tuo sistema hai già installato Linter puoi usare immediatamente tutte le sue funzionalità e correggere il tuo codice facilmente.
JavaScript
Eccoci a una sezione veramente interessante! Questo linguaggio si è trasformato moltissimo negli ultimi anni e non soltanto per gli ultimi aggiornamenti avvenuti con ES6 ma mai come oggi per questo linguaggio sono disponibili librerie, framework e plugin che ci permettono di creare le nostre applicazioni web.
All’interno di questa sezione ti voglio presentare alcuni dei package più utili da utilizzare con questo linguaggio senza andare troppo nel dettaglio di framework o librerie ma analizzando principalmente la sintassi originale di JavaScript, detto anche JavaScript Vanilla.
Un mare di snippet!
Apro questa prima sezione non per un package specifico perché onestamente ne esistono veramente molti di package in grado di fornirti una serie di snippet che puoi utilizzare nel tuo lavoro con JavaScript e trovo veramente difficile dichiarare un vincitore perché in fin dei conti li reputo tutti veramente buoni.
L’immagine che stai osservando proviene da JavaScript Snippets che è forse uno dei package più anziani per le snippet di codice dedicate a questo linguaggio. Con questo package avrai moltissime snippet che ti permetteranno di sviluppare sia classico codice JavaScript che codice dedicato allo sviluppo in Node.js, però se stai cercando qualcosa che ti permetta anche di scrivere con la sintassi ES6 ti consiglio di guardare altrove.
Infatti uno dei package che ritengo migliori in questa sintassi è proprio ES6 JavaScript, un fork di Turbo JavaScript, che viene implementato seguendo le linee guida presentate da AirBnb. Grazie a questo package è possibile scrivere velocemente la sintassi ES6 con comode snippet.
Però come dicevo, scegliere un vincitore è veramente dura quindi se tu stai utilizzando un package per le snippet in JavaScript con il quale ti stai trovando molto bene, non esitare a farcelo sapere all’interno dei commenti motivando le tue preferenze con qualche frase.
Ti sta piacendo l’articolo? Regalaci una condivisione!
[social_warfare]
Language Babel – language-babel
Se per lavoro scrivi codice JavaScript rispettando le funzionalità e la sintassi ES6 dovresti anche sapere che nonostante gli enormi progressi, non tutti i browser supportano questa sintassi. Per questo motivo il progetto Babel è stato creato e da anni aiuta migliaia di sviluppatori a generare del codice compatibile anche con vecchi browser.
Leggendo la documentazione si nota che molto sviluppo è stato dedicato al supporto della sintassi JSX e che questo package accetta delle configurazioni specifiche per progetto attraverso il file .languagebabel
che deve essere inserito all’interno della cartella principale del progetto stesso.
Anche in questo caso, come successo precedentemente con Atom Sass, se non si vuol perdere troppo tempo nella configurazione di Gulp, Grunt o uno qualsiasi degli altri build system supportati dal progetto, puoi semplicemente installare questo package e iniziare immediatamente il tuo lavoro 😉
Atom Typescript – atom-typescript
Ecco un altro package che ci aiuta a iniziare a scrivere una nuova sintassi senza perdere tempo nella configurazione di ambienti di sviluppo dedicati. Semplicemente installando questa soluzione non dovrai far altro che aprire i file .ts
all’interno di Atom e iniziare a programmare!
Il package offre anche la possibilità di configurare nel dettaglio tutte le sue caratteristiche attraverso il file tsconfig.json
.
Se conosci questa sintassi e devi applicare qualche modifica a un progetto che ti è capitato sottomano, sono sicuro che questo package ti risulterà incredibilmente utile 😀
Coffee Compile – coffee-compile
Progetto dallo sviluppo molto attivo che, un po’ come il precedente, ci permette di compilare il nostro codice CoffeeScript senza la necessità di configurare il nostro ambiente di sviluppo.
Grazie alle funzionalità aggiunte con questo package puoi iniziare a usare direttamente il tuo Atom con qualsiasi file con estensione .coffee
Linter JavaScript, un mondo a parte
Un po’ come successo nella sezione che ha aperto il capitolo JavaScript package, anche in questa non me la sento di consigliarti un unico package in grado di fare il Linting del tuo codice perché le offerte che sono messe a disposizione sono veramente molte e come mi sono già trovato a dire, molto dipende dai gusti che il singolo ha.
Se hai già installato il package Linter che ti ho proposto all’inizio di questo articolo, il package Linter JSHint farà al caso tuo dato che è compatibile e pronto a essere utilizzato con JSHint. Una new entry all’interno di questo campo è ESLint, progetto open source che è in costante sviluppo e che può sempre essere integrato all’interno del package Linter in modo molto semplice grazie al package dedicato.
Potrei consigliarti altri package in grado di svolgere questo compito, ma preferisco ricordarti la risorsa online messa a disposizione da Atom per trovare i Linter di qualsiasi linguaggio. Come scoprirai da solo, i linter JavaScript sono tra i package più popolari 😉
PHP
Continuiamo la carrellata di package utili allo sviluppatore moderno andando ad analizzare quello che forse è il linguaggio di programmazione più amato/odiato/utilizzato di tutto il web. Nonostante sia utilizzato in più del 80% dei siti web, basta entrare in qualsiasi forum o gruppo di sviluppatori per trovare facilmente qualcuno che ha condiviso qualche articolo/opinione negativa nei confronti di questo linguaggio.
Eppure io non la penso così, soprattutto da quando siamo entrati nell’era del PHP 7.
Ma questo non è l’articolo in cui voglio difendere o condannare il PHP, qua si parla di come sia possibile sfruttare al meglio il nostro Atom con questo linguaggio di programmazione, scopriamo i package più interessanti!
Docblockr – docblockr
Anche se questo non si tratta di un package specifico per PHP, supporta molti altri linguaggi, aggiunge al nostro editor dei template predefiniti per scrivere la documentazione del nostro codice.
Fa bene il suo lavoro andando a seguire anche l’indentazione e l’inserimento di caratteri speciali, consigliatissimo!
Autocomplete PHP – autocomplete-php
Ecco un package veramente utile. Il linguaggio PHP è un linguaggio molto vasto all’interno del quale può capitare di dimenticarsi qualche funzione. Per questo motivo avere a propria disposizione una funzionalità di autocompletamento ci può venire veramente utile.
Anche se un’immagine vale più di mille parole, quando si tratta di .gif
andiamo proprio a descrivere una funzionalità senza neanche la necessità delle parole.
PHP Coding Standard Fixer – php-cs-fixer
L’autocompletamente è sicuramente un package molto utile che ci aiuta ad essere più veloci nella scrittura del nostro codice, allo stesso tempo però non basta soltanto scrivere per creare delle applicazioni PHP.
Probabilmente stai pensando che per scrivere delle applicazioni degne di essere utilizzate queste non dovranno contenere errori e funzionare correttamente. Ebbene questo è un argomento che tratteremo a breve in una nuova sezione perché la funzionalità che ti permetterà di avere questo package è la possibilità di rispettare uno standard nella scrittura del nostro codice.
Rispettare gli standard è una pratica molto utile, soprattutto quando lavoriamo con colleghi su uno stesso progetto o quando vogliamo permettere ad altri sviluppatori di modificare il codice che abbiamo creato. Gestire gli spazi, i rientri e la logica presente in una applicazione è molto importante perché permette agli sviluppatori che verranno (o a noi stessi a distanza di qualche mese), di comprendere velocemente il funzionamento del codice e di identificare i blocchi che definiscono la nostra applicazione.
Come puoi notare da questa immagine, oltre ad avere dei chiari riferimenti inseriti direttamente all’interno del nostro codice, questo package ci permette di correggere in un colpo solo gli errori commessi grazie, ancora una volta, alla fuzzy search o alla scorciatoia da tastiera Ctrl + Opt + O
(o Ctrl + Alt + O
).
PHP Server – php-server
Lavorare con PHP può essere un compito noioso, esistono infiniti modi per configurare il proprio ambiente di sviluppo e restere al passo con i tempi non sempre è possibile, soprattutto quando si parla di piccole modifiche.
Ecco che con questo comodo package sarai in grado di avviare il server PHP che hai installato nel tuo sistema operativo cliccando direttamente sopra una cartella presente nella barra del progetto, la colonna a sinistra dove sono elencati i file appartenenti al progetto aperto.
PHP Debug – php-debug
Talvolta scovare gli errori nel nostro codice è un po’ una caccia alle streghe, sappiamo che qualcosa non funziona eppure non riusciamo bene a capire dove. Per risolvere queste situazioni una buona abitudine è quella di debuggare, il debug è un’attività che ti permette di scoprire nel dettaglio dove il tuo codice si sta comportando male.
Con PHP Debug sarai in grado di integrare tutti gli strumenti di debug e controllare anche i singoli breakpoint per scoprire passo passo come si comporta il codice nelle varie situazioni.
PHPUnit Snippets – phpunit-snippets
Dato che poco fa abbiamo parlato di come assicurarsi che il proprio codice funzioni correttamente, eccomi a presentarti un altro package che ti aiuterà a scrivere tutti i tuoi test per PHPUnit.
Installando questo package avrai oltre 20 snippet di codice a tua disposizione e ricorda che non dovrai per forza ricordarle a memoria perché grazie ad Atom hai a tua disposizione la fuzzy search che ti permetterà di individuare facilmente il blocco di codice di tuo interesse, ti basterà cercarlo.
Linter PHP – linter-php
Inserisco questo package per restare in linea con gli altri linguaggi di programmazione. Se nel tuo sviluppo usi il linter che ti ho indicato all’inizio di questa lista, puoi tranquillamente aggiungere anche questa funzionalità al tuo editor Atom e una volta configurato per utilizzare il comando php
del tuo terminale non dovrai far altro che lanciare il comando.
WordPress
Eccoci di fronte alla penultima sezione di questa lunga lista di package per il tuo Atom, finalmente parliamo della nostra piattaforma preferita: WordPress!
Di seguito puoi trovare alcuni dei package che puoi utilizzare per facilitare il tuo lavoro ed aiutare la tua memoria.
WordPress Suite – wordpress-suite
Ecco il primo grande package per WordPress per il quale è stato addirittura sviluppato un logo dedicato. La cosa bella di questa soluzione è che non aggiunge neanche una singola snippet ma invece ci aiuta a eseguire il debug della nostra piattaforma aggiungendo watcher e scorciatoie per consultare il log all’interno del quale vengono registrati tutti gli errori che possiamo incontrare nel nostro sviluppo.
Trovo questo package incredibilmente utile perché grazie al suo utilizzo non devo andare a cercare gli errori o i risultati di var_dump()
tra le pagine del mio sito, ma posso avere tutto sott’occhio all’interno di un file separato dove viene indicato ora, file e posizione in cui l’errore viene scatenato.
Oltre a questo potrai avere molte altre opzioni se all’interno del tuo sistema è installato WP CLI, un comando da terminale che ti permette di modificare praticamente sotto qualsiasi aspetto la tua installazione WordPress. Se ancora non la conosci ti consiglio di dare un’occhiata alla pagina del progetto perché recentemente è diventato il programma ufficiale di WordPress ricevengdo addirittura delle pagine dedicate ai comandi interni su Make WordPress.
Autocomplete WordPress Hooks – autocomplete-wordpress-hooks
Sono sicuro che hai già sentito parlare degli Hook WordPress, praticamente sono la funzionalità principale che ci permette di personalizzare questa piattaforma come desideriamo. Però se ti dovesse essere sfuggita questa caratteristica, proprio qua su SkillsAndMore abbiamo parlato diverse volte di questo argomento scrivendo anche una dettagliata introduzione.
Come abbiamo visto fino a ora, avere delle snippet e la possibilità di cercarle con la fuzzy search è sicuramente una funzionalità molto utile ed ecco perché ti sto presentando questo package.
Qualsiasi filtro o azione WordPress è alla nostra portata, basta semplicemente iniziare a scrivere all’interno delle funzioni add_filter()
o add_action()
per attivare le funzionalità di questo package ed avere a portata di mano sia l’hook di riferimento che, nel caso ce ne sia bisogno, la struttura della funzione e dei parametri che vengono messi a disposizione.
Se ancora non hai “fatto il callo” con i vari hook WordPress, questo package potrebbe aiutarti incredibilmente!
Atom WP Customizer – atom-wp-customizer
Questo è il fork di un package rilasciato per Sublime Text e permette di avere a propria disposizione moltissime snippet che ci aiuteranno nella gestione del codice necessario per lo sviluppo di componenti presenti nel Customizer.
Personalmente l’ho trovato molto utile soprattutto nella fase iniziale in cui non conoscevo ancora bene i diversi aspetti di questa nuova funzionalità che al giorno d’oggi permette di personalizzare facilmente qualsiasi tema.
Git
Atom ha annunciato una grande integrazione per Git a partire dalla versione 1.8, molto probabilmente non conterrà tutte le funzionalità che vengono introdotte con i package elencati qua sotto e per questo motivo eccomi a presentare alcuni package che ritengo veramente molto interessanti e le cui funzionalità ti permetteranno di gestire al meglio i tuoi repository.
Git Plus – git-plus
Iniziamo il nostro percorso nei package dedicati a Git con uno dei principali e più utilizzati: Git Plus.
Proprio come dice il nome, questo package ci permette di integrare all’interno del nostro editor tutti i comandi di cui abbiamo bisogno per gestire il nostro codice. Direttamente dal tuo Atom potrai eseguire dei push, dei pull, fare delle fetch e controllare la differenza nel codice.
Insomma, con un unico package avrai tutti i comandi a tua disposizione che potrai trovare facilmente all’interno del tuo editor. Se sei curioso di scoprire di più su questo package e del suo funzionamento ti consiglio proprio di seguire il corso dedicato perché c’è un’intera lezione dedicata a Git e alle funzionalità che potremo avere grazie a questo package!
Git Time Machine – git-time-machine
Come puoi immaginare, gestire un repository significa seguire l’evoluzione all’interno di moltissimi file presenti in un progetto e spesso non è facile saltare avanti e indietro tra browser ed editor per scoprire quali sono state le linee modificate in un file specifico.
Per questo motivo ritengo che il package Git Time Machine sia veramente utile ed essenziale per qualsiasi sviluppatore che utilizza questo sistema di controllo versione.
Oltre ad avere una timeline che registra tutte le modifiche fatte al nostro file, potremo tranquillamente cliccare su uno specifico commit per scoprire quali sono state le righe del file modificate.
La visualizzazione in split screen ci permette anche di identificare facilmente quali sono state le righe aggiunte e quelle rimosse scoprendo direttamente all’interno del nostro editor come il nostro file si è modificato nel tempo, aiutandoci anche a capire meglio quali sono state le scelte di sviluppo che sono state prese.
Merge Conflicts – merge-conflicts
Eccoci di fronte a uno dei package che viene integrato all’interno del nuovo rilascio di Atom e in tutta onestà credo proprio che questa sia stata una delle scelte migliori che siano state fatte perché i conflitti durante un push sono tra le cose più fastidiose da risolvere.
Come viene mostrato dalla stessa immagine, questo package ci permette di modificare i conflitti direttamente in Atom consentendoci di scoprire dove e quali file hanno dei conflitti con il codice presente all’interno del nostro repository.
Conclusioni
Siamo quindi giunti al termine di questa lunga lista di package per Atom e non posso nasconderti la faticaccia che ho fatto per scoprire, provare e selezionare tutti quelli che sono stati elencati.
Spero che tu non sia rimasto deluso del fatto che, volontariamente, ho lasciato da parte alcuni package dedicati a linguaggi di programmazione o framework come jQuery, Angular o React ma ho preferito non andare ad allungare ulteriormente questo articolo perché il mio intento è quello di consigliarti package che ti saranno utili per iniziare al meglio il tuo lavoro.
Come puoi notare abbiamo raccolto moltissime soluzioni che ti aiuteranno a personalizzare come meglio credi la tua installazione Atom e se ritieni che questo articolo potrebbe migliorarsi con dei package che usi quotidianamente, non esitare a commentare e ad aggiungere il tuo punto di vista.
Questo non deve essere visto come un articolo definitivo, piuttosto come una raccolta utile allo sviluppatore che per la prima volta si avvicina al mondo dei package Atom, se poi è la prima volta che ti avvicini ad Atom in tutti i sensi non posso fare a meno che consigliarti il nostro corso, abbiamo speso molte ore nella sua realizzazione e sono sicuro che i contenuti presenti saranno di tuo gradimento!
Come sempre un articolo interessante.
Uso Atom da più di un anno e mi sono sempre trovato bene eccetto alcuni piccoli problemi (tutti risolvibili).. uno mi è capitato con l’aggiornamento all’ultima versione dove ho perso tutti i miei settings 🙁 .
Mi piace la possibilità di poter usare anche la l’ apm e la grande comunity che ci lavora alle spalle.
Ammetto che per modifiche veloci ed al volo uso anche il buon Notepad++ 😉
Davvero interessante, una raccolta molto utile.
Grazie mille Domenico per essere passato da queste parti e aver condiviso il tuo apprezzamento, creare questa lista in effetti è stato proprio un lavorone 😀 Se ti va di darci una mano a crescere non esitare a condividere questo articolo, soprattutto se pensi che possa essere utile ad amici e colleghi.
A presto,
Andrea
Ciao, se io voglio usare atom per programmare in c/c++ che sto imparando o in python, a cui mi voglio avvicinare, basta che installo linter per la sintassi? In maniera da non usare più codeblocks
Ciao Marco,
teoricamente puoi usare Atom anche per linguaggi come Python (molto più semplice seguendo questa guida) e C/C++.
Il problema di questi ultimi due linguaggi è che oltre a installare un package per la sintassi hai la necessità di installare anche quella per il compilatore.
Io non ho esperienza con questi linguaggi di programmazione ma sembra che siano comunque compatibili con Atom.
Considera sempre che si trattano sempre di estensioni che aggiungono funzionalità e che probabilmente non troverai tutti gli strumenti che offrono editor o IDE più completi dedicati allo specifico linguaggio.
Grazie intanto per aver commentato e a presto,
Andrea
Ho installato “remote-edit” ed ho avuto problemi a configurarlo ed usarlo. Poi ho trovato in “Atom – Package” che il progetto è stato abbandonato e suggeriva “ftp-remote-edit” per lo stesso lavoro. Installato il package tutto Ok! perfetto
Grazie per il chiarimento, ultimamente non uso più Atom se non per piccole cose perché sono passato al “lato oscuro” con VS Code. Però spero che il tuo commento possa aiutare gli altri lettori dell’articolo a utilizzare uno strumento utile.