Share
Un editor di codice è il pane della carriera di qualsiasi sviluppatore web. È l'unico aspetto della catena di strumenti di un programmatore che è amato, ma anche scelto con estrema passione e decisione. Questo non sarà un articolo su quale editor di codice è il più popolare, o cosa lo rende migliore del prossimo; lo scopo di questo articolo sarà per coloro che hanno scelto Atom come proprio editor di codice e mostrano come renderlo fantastico per il lavoro quotidiano.
Emmet LiveStyle è il primo strumento di modifica in tempo reale bidirezionale per i file CSS, LESS e SCSS.
Il pacchetto Atom è disponibile qui e non richiede alcuna configurazione speciale: avvia semplicemente Atom e Google Chrome e sei pronto per la modifica in tempo reale.
"LiveStyle utilizza le proprie implementazioni di preprocessori LESS e SCSS, scritti in puro JavaScript. A differenza delle implementazioni ufficiali dei preprocessor con le sourcemaps, LiveStyle fornisce mappature source-to-date appropriate, scope variabili e mixin, recupero degli errori e compilazione parziale. "
Una mia caratteristica preferita è "Remote View" e crea un URL pubblicamente disponibile che punta al tuo sito locale. Utilizza questo URL per visualizzare l'anteprima su qualsiasi dispositivo o browser connesso a Internet con aggiornamenti istantanei in tempo reale da Atom e DevTools.
Per padroneggiare questo pacchetto consiglio vivamente di consultare la documentazione e la guida introduttiva per assicurarti che soddisfi le esigenze del tuo specifico contesto e, naturalmente, che ti senti a tuo agio prima di usarlo.
Hai mai desiderato utilizzare un selettore di colori durante la codifica? Non aver paura perché Color Picker ti dà le spalle. Il Color Picker attualmente legge i colori HEX, HEXa, RGB, RGBa, HSL, HSLa, HSV, HSVa, VEC3 e VEC4 ed è in grado di convertire tra i formati.
Questo piccolo diavolo controlla anche le variabili di colore Sass e LESS come un super-investigatore. Basta aprire il selettore di colori con il cursore sulla variabile di tua scelta e cercherà la definizione per te. Puoi fare clic sulla definizione fornita e andare direttamente al punto in cui è definita.
Se il color picker non è la tua tazza di tè, allora dai una prova a Pigments. Pigments è un pacchetto per la visualizzazione di colori nei file di progetto. Pigments analizzerà i file sorgente nelle directory del progetto alla ricerca di colori e costruirà una tavolozza con tutti loro (piuttosto chiari).
Con il movimento sempre più richiesto nel nostro lavoro è bello avere strumenti che aiutano nel processo.
L'editor di curve di Bezier è un punto di svolta per gli sviluppatori di movimento e interattivi che cercano la combinazione perfetta per l'andamento. Scegli tra una moltitudine di opzioni di andamento che visualizzano i loro risultati dal vivo o creane tu stessi trascinando le maniglie del visualizzatore di andamento.
Ti piacerebbe nascondere i file dal tuo progetto che non devono essere impegnati nel tuo repository o visualizzati mentre lavori? In Atom Pacchi scheda, cerca "vista ad albero" e sotto le sue impostazioni, seleziona la casella per Nascondi nomi ignorati rimuovere i file ignorati a livello globale dalla vista ad albero o combinarli con Nascondi i file ignorati VCS. Questi file VCS specifici sono quelli controllati dal tuo .gitignore. I file ignorati a livello globale sono quelli come .DS_Store, per esempio.
Quando è possibile apportare miglioramenti alla navigazione visiva, suggerisco di farlo, ed è per questo che amo le icone dei file.
Questo pacchetto fornisce ai tuoi file una bella piccola icona con un po 'di colore per facilitare la ricerca, e generalmente rende le cose deliziose. Ti dà anche la possibilità di personalizzare dimensioni, sfumature di colore, icone di scambio e assegnare icone per estensione di file.
Non ti piace saltare tra la riga di comando e il tuo editor per fare commit? Questo pacchetto GitHub è ora fornito in bundle con tutte le versioni di Atom 1.18 e successive.
Goditi la possibilità di diramare, mettere in scena, commettere, spingere, tirare, risolvere i conflitti e persino visualizzare le richieste di pull per GitHub direttamente da Atom. Per aprire questa finestra metti il cursore del centro morto del tuo editor sul lato destro e cerca una linguetta con una freccia. Boom!
Sono un grande fan di questo perché rende la ricerca di file diffs un gioco da ragazzi. All'interno di Atom hai accesso alla cronologia di un progetto Git tracciato; inoltre è tutto visivo.
Git Time Machine rende di nuovo divertente la ricerca di file diff e meno disordinata di quanto non provi a controllare tramite la riga di comando. Mostra una trama visiva di commit al file corrente nel tempo e puoi cliccare sulla timeline o passare il mouse sopra un segno e vedere tutti i commit per un intervallo di tempo specifico. Hai la possibilità di ripristinare file completi o cherry pick riga per riga. È un pacchetto davvero fantastico da includere nel tuo flusso di lavoro Atom.
La ricerca del supporto per i browser non è mai stata più semplice e viene eseguita direttamente da Atom grazie al pacchetto Can I Use.
Digitare "posso usare" dalla palette dei comandi (Cmd + Shift + P) E inizia a digitare la proprietà o il termine di ricerca di cui hai bisogno per il supporto nel tuo progetto. Un modo molto efficiente per utilizzare questo servizio rispetto all'uso del browser web.
I pacchetti non sono l'unica opzione che devi rendere Atom più magico della sua installazione predefinita. Ci sono molte più opzioni che possono essere trovate direttamente dalle impostazioni di base per rendere la scrittura di codice un'esperienza piacevole.
Sotto Atom impostazioni vista puoi specificare le tue preferenze di avvolgimento.
Il Soft Wrap l'opzione avvolgerà linee troppo lunghe per adattarsi alla finestra corrente. Se questa opzione è disabilitata, le linee si sposteranno dal lato dello schermo, quindi dovrai scorrere la finestra orizzontalmente per visualizzare il resto del tuo contenuto.
L'opzione "Trova e sostituisci" è presente in editori di codice per sempre e per buoni motivi. Per cercare all'interno del tuo file corrente puoi premere cmd + f, quindi digita la stringa di ricerca e premi accedere (o cmd + g o il Trova il prossimo pulsante) più volte per scorrere tutte le corrispondenze in quel file.
Il Trova e sostituisci il pannello contiene anche i pulsanti per attivare la distinzione tra maiuscole e minuscole, eseguire la corrispondenza delle espressioni regolari e definire la ricerca per le selezioni. Puoi anche trovare e sostituire tutto il tuo intero progetto se invochi il pannello con cmd + Chift + f.
Atom ha il comando atomo - portatile che fornisce un'opzione di parametro della riga di comando per l'impostazione della Modalità portatile. Personalmente ho avuto una fortuna terribile con questa opzione e francamente i documenti su questo argomento hanno ancora molto bisogno di una riscrittura.
"La modalità portatile è molto utile per portare Atom con te, con tutte le tue impostazioni e pacchetti personalizzati, da una macchina all'altra. Questo può prendere la forma di mantenere Atom su un'unità USB o una piattaforma di archiviazione cloud che sincronizza le cartelle su macchine diverse, come Dropbox. "
Il mio suggerimento è di simulare il tuo ~ / .Atom directory su Dropbox (o su un altro servizio, ubicazione, ecc.) e chiamarla un giorno. Questa è la directory che memorizza tutte le impostazioni, i pacchetti, le configurazioni e tali che rendono Atom personalizzato per l'uso. Puoi ancora installare Atom da qualsiasi computer proprio come faresti normalmente, tranne che stai usando .atomo come un link simbolico riferito a un'altra posizione di tua scelta.
Se la modalità portatile o l'utilizzo del trucco del collegamento simbolico non è allettante, potresti prendere in considerazione l'impostazione di impostazioni di sincronizzazione. Questo pacchetto Atom sincronizzerà impostazioni, keymap, stili utente, script init, snippet e pacchetti installati su istanze Atom.
Se desideri applicare una modifica dello stile personalizzata senza creare un intero tema, puoi aggiungere i tuoi stili personalizzati a styles.less file nel tuo ~ / .Atom elenco.
Per aprire questo file nell'editor di Atom selezionare Atom> Foglio di stile. Il modo più semplice per vedere quali classi sono disponibili per lo stile è ispezionare il DOM manualmente con gli Strumenti per sviluppatori tramite comando + opzione + i nello stesso modo in cui lo fai per Chrome.
Ho solo raschiato la superficie per quanto riguarda pacchetti, plugin e simili, ma se hai ulteriori suggerimenti, commenti o pensieri ti incoraggio a lasciare un commento qui sotto e qualsiasi link pertinente pertinente a questa discussione. Se sei un grande elenco, controlla questo repository su GitHub chiamato Awesome Atom; Una lista curata di deliziosi pacchetti e risorse Atom. Come ex utente di Sublime sono stato completamente soddisfatto della mia scelta di passare ad Atom e continuerà ad essere il mio editor preferito per il prossimo futuro. Buona programmazione!
Accentsconagua