TextMate è, di gran lunga, l'editor di testo preferito per la maggior parte degli sviluppatori web sul Mac. Nello screencast di oggi daremo un'occhiata ad alcune delle funzioni che la maggior parte degli sviluppatori semplicemente non usa, che possono aumentare enormemente la produttività consentendo di digitare meno!
Non una persona Mac? Jeffrey ha uno screencast intitolato "How I Can Code Twice As Fast As You" che mostra come eseguire azioni simili usando un'applicazione "text expander" in Windows.
Puoi vedere tutte le scorciatoie e le funzioni di TextMate nel menu 'Pacchetti'. Ecco alcuni di quelli che uso regolarmente:
⇥ | linguetta |
⇧ | Cambio |
^ | Controllo |
⌥ | Opzione (Alt) |
⌘ | Comando |
⎋ | Escape (esc) |
↩ | Ritorno |
↓ ← ↑ → | Tasti freccia della tastiera |
scorciatoia | Azione |
^ ⇧ , | Nuova coppia di tag HTML |
⌥ ⎋ | Completamento automatico tag / attributo |
⌘ ⇧ 7 | Converti la selezione in entità HTML |
! ⇥ | Condizionatori di Internet Explorer |
⇧ ↩ | Interruzione di linea |
^ ⇧ V | Convalida HTML / CSS |
collegamento ⇥ | Tag Link Stylesheet |
stile ⇥ | Blocco di stile in linea |
scriptsrc ⇥ | Tag JavaScript esterno |
script ⇥ | Blocco JavaScript in linea |
scorciatoia | Azione |
php ⇥ | |
echo ⇥ | |
se ⇥ | |
ifelse ⇥ | |
per ⇥ foreach ⇥ mentre ⇥ array ⇥ interruttore ⇥ caso ⇥ | Come ti aspetteresti. |
req ⇥ req1 ⇥ incl ⇥ incl1 ⇥ | richiede 'file'; require_once 'file'; include 'file'; include_once 'file'; |
$ _ ⇥ | Seleziona $ _ ['POST'], $ _ ['GET'] ecc. (Global Array) |
^ ⇧ V | Convalidare la sintassi |
⌘ ⇧ R | Esegui il file PHP |
scorciatoia | Azione |
se ⇥ ife ⇥ (if, elsif) a meno che ⇥ mentre ⇥ | Come ti aspetteresti. |
req ⇥ | richiedere "" |
reqg ⇥ | richiedere "rubygems" richiedere "" |
Hash ⇥ | Hash.new | hash, chiave | hash [chiave] = |
: ⇥ | : chiave => "valore", |
File ⇥ | Seleziona per i diversi metodi dell'oggetto "File" (leggi, scrivi, ecc.) |
⌘ R | Esegui il file Ruby |
scorciatoia | Azione |
cla ⇥ | Crea controller di rotaie |
lampeggia ⇥ | flash [: notice] = " |
ra ⇥ | render: action => " |
vp ⇥ | validates_presence_of: input |
vl ⇥ | validates_length_of: input,: within => 1 ... 12 |
^ P | params [: oggetto] |
^ J | session [: oggetto] |
^ ⇧ . | <%= %> |
ff ⇥ | <% form_for @model do |f| -%> <% end -%> |
f. ⇥ | Seleziona per l'helper della forma Rails: etichetta, campo, password, area testo, casella di controllo ecc. |
Slt ⇥ | <%= stylesheet_link_tag"%> |
jit | <%= javascript_include_tag"%> |
⇧ ⌥ ⌘ ↓ | Vai al controller, modello, vista, ecc. Appropriati per il file corrente |
mcol ⇥ | Utilizzare nelle migrazioni. Selezionare per aggiungere, modificare, rinominare, rimuovere colonne ecc. |
Creeremo un collegamento (a cui si accede con ⌘⇧A) per racchiudere il testo attualmente selezionato in un collegamento e passare direttamente all'attributo per inserire l'URL.
In TextMate, vai su "Pacchetti> Editor di pacchetti> Mostra editor di pacchetti" (o premi ^⌥⌘B). Questo è l'aspetto del mio editor. I tuoi potrebbero sembrare diversi in quanto ho aggiunto alcuni pacchetti personalizzati e ne ho rimossi alcuni per le lingue che non uso:
Fai clic sul menu a discesa HTML (pacchetto), fai clic sul + in basso a sinistra della finestra e seleziona "Nuovo frammento". Denominare questo snippet "Wrap Link", quindi per "Activation", selezionare "Key Equivalent" e nella casella inserire la combinazione di tasti che si desidera utilizzare (ad esempio ⌘⇧A).
All'interno dell'area di testo inserisci:
$ TM_SELECTED_TEXT
$ TM_SELECTED_TEXT
è una variabile contenente il testo selezionato. Chiudi la finestra e provalo. Apri un documento in TextMate, evidenzia il testo e premi la combinazione di tasti. La selezione sarà racchiusa tra tag di ancoraggio.
Tuttavia, come è ora, devi comunque spostare il cursore su href = ""
attributo per inserire il link effettivo. Non sarebbe più facile se il nostro cursore si muovesse automaticamente lì?
Modificare il comando "Wrap Link" nel modo seguente:
$ TM_SELECTED_TEXT
Il $ 1
indica a TextMate dove posizionare il cursore dopo aver eseguito l'operazione. Puoi piazzare $ 2
, $ 3
ecc. e poi spostarsi attraverso di essi usando il tasto tab.
Infine, cambia il comando in:
$ 2: $ TM_SELECTED_TEXT
Puoi aggiungere testo predefinito in una posizione utilizzando $ 2: testo predefinito. 'Testo predefinito' verrà visualizzato e automaticamente evidenziato quando ci si inserisce la scheda.
Nel nostro caso, abbiamo impostato il testo selezionato come posizione di tabulazione per le circostanze in cui potresti voler cambiare il testo originale.
Puoi anche "speculare" il testo inserito nei punti di tabulazione, in questo modo:
Testo: $ 1
Qualche altro testo: $ 2: blah de blah de blah
Mirror of 1: $ 1
Qualsiasi cosa tu inserisca nella prima scheda, verrà automaticamente inserita in altre posizioni che mantengono lo stesso valore.
Personalmente ho creato i miei bundle per includere le librerie jQuery, inserire il testo di "Lorem Ipsum" e anche per scrivere articoli di Nettuts. Per esempio:
Trova te stesso usando senza scrupoli i tag jQuery? Prova questi:
'jQuery CDN' accessibile con inc-jquery
tab-trigger:
'jQuery UI CDN' accessibile con inc-ui
tab-trigger:
'jQuery Inline Script' accessibile con inline-jquery
tab-trigger:
'jQuery Document Ready' accessibile con jquery
tab-trigger:
\ $ (function () $ 0);
Nota: I back-slashes all'inizio $ (function ()
è di sfuggire al $
carattere - altrimenti TextMate penserà che sia una variabile da provare e renderizzare!
Potresti anche semplicemente assegnarle tutte a a jquery
scheda-trigger, quindi quando lo si esegue, si otterrà un menu a discesa da cui scegliere. Questo è utile se preferisci non memorizzare grandi gruppi di nomi di frammenti!
Ho anche un pacchetto per i vari tag su cui gli articoli Nettuts dipendono, come ad esempio:
'Pre Code Block' a cui è stato eseguito l'accesso utilizzando il trigger di tabulazione pre-nt:
$ 2
Accesso 'Tuts Image' usando il trigger di tabulazione di nt-img:
Durante la scrittura di articoli, utilizzo un piccolo modello per semplificare la lettura durante la correzione di bozze. Questo snippet contiene un esempio di "mirroring" nei tag Title e H1. Accedo a questo utilizzando il trigger di tabulazione del template nt:
$ 1: TITOLO $ 1
$ 2: testo di riepilogo
$ 4: Intestazione
$ 5: inizia a digitare! Usa H3 per le intestazioni e H4 per le sottotitoli
$ 0