Nel momento in cui inizi a sviluppare un sito, il primo strumento che utilizzerai è un editor di testo, che si tratti di un semplice blocco note o di un IDE.
In questa puntata Addy & Matt guarda la sua raccolta di plug-in per Sublime Text e discutere di come ognuna aiuta a gestire il flusso di lavoro.
Controllo della spedizione
Per ottenere i pacchetti (o plug-in) a cui viene fatto riferimento nell'episodio, devi installare Package Control (Controllo pacchetti), è semplice e intuitivo installare e trovare istruzioni su come farlo qui.
JSHint
JSHint è un linter JavaScript che esamina il codice JavaScript evidenziando eventuali errori o pratiche scorrette nel tuo codice.
Ad esempio, se per errore hai digitato in modo errato il nome di una variabile, come
in basso, JSHint indicherà che fo non è mai stato definito
causerà un errore.
var foo = { bar: 'Hello, World.' };
var msg = fo.bar;
Il plug-in JSHint evidenzi i problemi mostrando un riquadro giallo attorno alla del testo e posizionando il cursore su quel bit di codice provocherà un errore messaggio mostrato in basso a sinistra di Sublime.
Altri problemi rilevati sono:
- Variabili definite ma mai utilizzate
- Evitare di creare funzioni all'interno di loop
- Utilizzare i metodi di confronto corretti
Per installare il pacchetto SublimeLinter-JSHint dovrai anche installare il pacchetto SublimeLinter e seguire le istruzioni di installazione istruzioni nella pagina del pacchetto SublimeLinter-JSHint.
Alcuni sviluppatori potrebbero trovare utile includere il grondaia JSHint anche il plug-in. Posiziona un puntino nella grondaia di qualsiasi linea con un problema JSHint.
JSCS
JSCS evidenzia tutti i punti in cui JavaScript non segue uno stile di programmazione specifico.
Ad esempio, puoi usare JSCS per definire se gli spazi devono da usare dopo le parole chiave, ad esempio "se", o per indicare l'eventuale presenza di parentesi graffe deve essere sulla stessa riga o su una nuova riga di un metodo.
Il pacchetto SublimeLinter-JSCS evidenzia eventuali problemi incorporati in uno stile simile a JSHint facilitando la correzione di eventuali problemi.
Questo è estremamente utile quando si tratta di lavorare in un perché tutti possono seguire la stessa guida di stile mantieni la coerenza del codice.
La cosa migliore è che con il pacchetto JSCS-Formatter puoi risolvere automaticamente eventuali problemi sulla pagina
premendo ctrl + shift + p e digitando "Formattatore JSCS: formatta questo file"
e premere Invio. Puoi scoprire di più nel post del blog di Addy.
Evidenziatore di colori
Evidenziatore di colori aggiungerà un colore allo sfondo eventuali definizioni di colore nel tuo CSS o Sass.
Puoi definire se viene visualizzato come sottolineato con un sfondo completo quando passi il mouse sopra o mostra il colore sullo sfondo della definizione. Vai a 'Package Settings' (Impostazioni pacchetto) > 'Evidenziatore di colori' > "Impostazioni - Predefinite" per vedere le impostazioni iniziali e modifica le impostazioni in "Impostazioni - Utente".
Per evidenziare completamente lo sfondo aggiungi quanto segue in "Impostazioni - Utente" file:
{
"ha_style": "filled"
}
Colore grondaia
Colore grondaia è un'alternativa all'evidenziatore di colori, invece di mostrare il colore sopra la variabile color, mette il colore nella grondaia di quella linea.
Selettore colori
Se hai bisogno di un modo semplice e veloce per selezionare un colore dello schermo quindi il Pacchetto selettore colori. può essere adatto a te.
Premi ctrl + shift + c e fai partire: hai ottenuto un selettore colori.
AutoFileName
AutoFileName è un semplice plug-in che un elenco di possibili file durante la digitazione. Questo è super è molto utile se stai cercando di digitare il nome di un'immagine Aggiungere un file CSS o JS per risparmiare tempo e, cosa ancora più importante, riduce il rischio di errori di battitura.
Autoprefissore
A tutti noi abbiamo avuto quel momento in cui ci siamo dimenticati aggiungere una proprietà CSS con prefisso. Con Autoprefisso eseguila sul tuo CSS e aggiungi tutti i prefissi necessari.
Significa che si parte da questo...
.container-thingy {
display: flex;
flex-direction: column;
align-items: flex-start;
}
... al seguente, semplicemente premendo ctrl + shift + p e digitando
'Autoprefisso CSS' e premendo Invio.
.container-thingy {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}
Puoi anche specificare quali browser e versioni di browser preferisci il supporto nelle impostazioni del pacchetto. Vai alla pagina Controllo del pacchetto per ulteriori informazioni.
Altro...
Esistono moltissimi altri plug-in che Sublime Text, quindi assicurati di esplorare la sezione Controllo pacchetti.
Per altri consigli e suggerimenti, guarda la fantastica presentazione di WesBos su scorciatoie da tastiera e altri plug-in per Sublime Text.
WesBos ha anche scritto un libro intitolato "Testo sublime per utenti esperti" che potrebbe interessare anche le persone meravigliose :)