Consigli e trucchi per velocizzare la scrittura del codice e di conseguenza il lavoro di tutti i giorni per gli utilizzatori dell'editor Sublime Text

1. Sublime Text
tips & tricks

2. Io sono Luca Montanera (@sidmonta)

3. Installazione

4. • La versione stabile è la 2
• La versione 3 è in beta, ma va già molto, molto bene
• La versione 3 ha tre versioni
• Stable
• Dev (http://www.sublimetext.com/3dev)
• Nightly

5. I pacchetti
• Tutte le impostazioni, plugin, temi ecc. si trovano
nella cartella packages di Sublime
• Raggiungibile da Preferenze-> Browse Packages

6. • Installazione command line Tool
• Sublime Text 2
•ln -s “Applications/Sublime Text
2.app/Contents/SharedSupport/bin/subl” ~/bin/subl
• Sublime Text 3
•ln -s “Applications/Sublime
Text.app/Contents/SharedSupport/bin/subl” ~/bin/subl
Per Windows o Linux vedere la documentazione

7. Utilizzare subl
• Aprire una cartella
• subl ~path/to/directory
• Aprire la cartella corrente
• subl .
• Aprire un singolo file
• subl index.js
• Aprire un file alla riga
• subl index.js:200
• Aprire un file alla riga e alla colonna
• subl index.js:200:10

8. Argomenti di subl
•subl -
Il comando apre sublime come standard output
È utile in coda ad un pipe per far salvare l’output di un comando in
una finestra di sublime.
La si può anche utilizzare per scrivere nella console. Con Cmd+D si
ferma il segnale e si passa a Sublime.
Esempio…

9. Argomenti di subl
• subl —project <project>
• Apre uno specifico progetto
• subl —command <command>
• Esegue uno specifico comando di sublime
• subl -n file.js
• Apre un file in una nuova window
• subl —add file.js
• Aggiunge un file alla vista attiva

10. Go to

11. Go to Anything
Cmd + P

12. Aprire un file
• Cmd + P
Basta digitare il nome del file che si vuole aprire,
purché faccia parte del progetto.
Esempio…

13. Andare alla riga
• Cmd + P oppure Ctrl + G
Se si ha premuto solo Cmd+P aggiungere “:” e
scrivere la riga a cui andare.
Esempio…

14. Andare alla riga e alla colonna
Possibile solo dalla recente versione di Sublime Text
Dev
•Cmd + P oppure Ctrl + G
aggiungere “:” e scrivere la riga a cui andare seguito
da “:” con il numero della colonna

15. Andare alla definizione
• Cmd + P oppure Ctrl + R
Se si ha premuto solo Cmd+P aggiungere “@” e
scrivere la funzione in cui si vuole andare.
Esempio…

16. Command Palette

17. Utilizzo
• Cmd + Shift + P
Digitate il nome del comando che volete eseguire.

18. Personalizzazione

19. Settings files
• Il file per ogni modifica di impostazione possibile
sia per sublime che per i plugin si trova in
preferences.
• Tutti i file di configurazione sono in formato JSON
• Per le modifiche dell’editor serve il file Settings -
User

20. Copia con indentazione
• Aprire il file Key Bindings - User
• Aggiungere le righe
{“keys”: [“super+v”], “command”: “paste_and_indent”},
{“keys”: [“super+shift+v”], “command”: “paste”}

21. Font
• Aprire il file Settings - User
• “font-face” -> Nome del font
• “font-size” -> Dimensione del font
• “line_padding_bottom" e “line_padding_top" ->
determinano la line height

22. –Cmd + K, Cmd+ B
Utilizzate la Sidebar

23. Altre utili modifiche
• “highlight_line" -> Evidenzia la riga selezionata
• “bold_folder_labels" -> Imposta il grassetto al nome delle
cartelle nel sidebar
• “indent_guide_options":["draw_normal","draw_active" ] ->
Mostra le linee guida dell’indentazione
• “highlight_modified_tabs" -> Una schiccheria
• “rulers” -> imposta la colonna in cui visualizzare il righello
Esempio…

24. Editor

25. Sublime Code Intel
• Necessita di NodeJS
• Scaricabile da GitHub con il branch Development
• git clone -b development
git@github.com:SublimeCodeIntel/SublimeCodeIntel.git
• Rimuovere la cache
• rm -R ~/.codeintel
• Andare al rispettivo file di configurazione e abilitare
il plugin per i vari linguaggi di programmazione

26. Finestre multiple
•Nel menu view->layout è possibile impostare una
griglia in cui impostare la finestra del proprio editor
Esempio…

27. Finestre multiple
Scorciatoie
• Cmd + alt + [1-4] -> Divide lo schermo in [1-4] colonne
• Cmd + alt + 5 -> Divide lo schermo in una griglia 4x4
• Cmd + alt + shift + [2-3] -> Divide lo schermo in [2-3] righe
• Cmd + [1-4] -> Ci si sposta tra le colonne
• Ctrl + Shift + [1-4] -> Sposta il file corrente in una vista

28. Finestre multiple
Origami
• Cmd + K seguito da …
• Cmd + -> Crea una nuova colonna a destra→
• Cmd + -> Crea una nuova colonna a sinistra←
• Cmd + -> Crea una nuova riga in alto↑
• Cmd + -> Crea una nuova riga in basso↓
• Per distruggere una view aggiungere Shift al comando

29. • Focus
• Cmd + K seguito da , , ,→ ← ↑ ↓
• Spostare file
• Cmd + K seguito da Shift + , , ,→ ← ↑ ↓

30. Cursore multiplo
•Per aggiungere un cursore in un determinato punto
basta tenere premuto Cmd e cliccare dove lo si
vuole aggiungere
•Se non si vuole usare il mouse… Ctrl + Alt + o↓ ↑
Esempio…

31. • Si può selezionare tutte le istanze di una parola e
consecutivamente piazzare un cursore a quella
parola con Cmd + D
•Per saltare un valore Cmd + K + D
Esempio…

32. • Piazzare il cursore ad ogni riga di un blocco senza
dover premere per ogni riga:
1. Piazzare il cursore all prima riga del blocco
2. Tenendo premuto Cmd + Alt
3. Evidenziare il resto delle righe
Esempio…

33. Azioni da tastiera
• Cmd + Ctrl + o -> sposta una riga in alto o in basso↑ ↓
• Cmd + J -> unisce due righe
• Cmd + Shift + D -> duplica una riga
• Cmd + Shift + K -> seleziona i tag
• Ctrl + Shift + K -> elimina una riga
• Cmd + backspace -> elimina il testo dal cursore alla fine della stringa
• Ctrl + backspace -> elimina una parola (sinistra)
• Ctrl + fn + backspace -> elimina una parola (destra)

34. • Cmd + Enter -> aggiunge una riga sotto
• Cmd + Shift + Enter -> aggiunge una riga sopra
• Shift + Cmd + a -> Seleziona il contenuto di un tag
(solo il contenuto)
• Ctrl + Shift + M -> Seleziona il contenuto di una
parentesi
• Cmd + L -> Evidenzia l’intera riga

35. Temi e colori

36. Color Scheme
• Si può cambiare il Color Scheme semplicemente
selezionando quello che più si aggrada nel menu
• Preferences->Color Scheme
• Oppure modificando il file di preferenze
• “color_scheme”: url al color scheme
• Si possono trovare molti color scheme su internet o sul
package control
• Oppure personalizzarne uno con dei tools online

37. Temi
• I temi li si scaricano dal Package Control
• Per abilitarne uno occorre dichiararlo nel fili di preferenze
• “theme":
• Ogni tema ha le proprie preferenze, bisogna vedere le
opzioni sulla documentazione del tema
• I temi più famosi (da cui nascono le fork) sono Soda e
Cobalt2
• Degni di nota sono a mio parere:

38. Cobalt2

39. Platto

40. itg-flat

41. Snippets

42. Snippets
•Sublime supporta nativamente gli snippets
•Ne si può creare uno da Tool->New Snippet…
<snippet>
<content><![CDATA[I ${1:love} to make ${2:snippets!}.${3}]]></content>
<tabTrigger>hello</tabTrigger>
<scope>source.python</scope>
<description>A sample snippet</description>
</snippet>

43. • Lo snippet vero è proprio va inserito tra il CDATA
• ${1:default text for this placeholder} setta un place
holder che all’utilizzo verrà selezionato per poter poi
essere sostituito con il valore corretto
• Gli snippets vanno salvati in una cartella snippets
dentro la cartella Users di Sublime Text
• È possibile trovare degli snippets già fatti nel
package control

44. Opzioni di ricerca

45. • [ * ] possibilità di usare le regex
• [ Aa ] ricerca case sensitive
• [ “ ] ricerca anche una porzione di stringa

46. Progetti

47. • .sublime-project
• Setta le impostazione di un progetto
• .sublime-workspace
• Setta le impostazioni dell’editor di quel progetto
• Switch veloce per progetti
• Ctrl + Cmd + P

48. .sublime-project
• Imposta tutte le cartelle facenti parte il progetto
• Gli setta un nome -> “name”
• Se seguire i link -> “follow_symlinks”
• Escludere file -> “file_exclude_patterns”

49. Build

50. http://docs.sublimetext.info/en/latest/reference/build_systems.html
http://addyosmani.com/blog/custom-sublime-text-build-systems-for-popular-tools-and-la
Per maggiori informazioni
Sublime permette di definire degli script da eseguire
per compilare la pagina attiva per vari linguaggi di
programmazione

51. Bookmarks

52. Bookmarks
• In sublime in qualsiasi documento è possibile
settore dei segnalibri
• Selezionata una riga è possibile applicare un
segnalibro con Cmd + F2
• I segnalibri sono indicati nella sezione GoTo-
>Bookmarks

53. Lavorare con Git

54. Git
• È presente un plugin per Sublime di Git reperibile
tramite il package control
• Il plugin mette a disposizione molti comandi
richiamabili tramite la Command Palette

55. Sublime Git: comandi
• Il plugin mette a disposizione i principali comandi di
Git
• git init
• git status
• I file segnati con ?? sono non tracciati
• git add

56. • git commit
• Il file si chiude con Cmd + W
• git push
• git diff
• git pull
• git branch
• Degno di nota è il comando git quick commit

57. Package Control

58. Installare il package control
• Andare alla pagina
https://packagecontrol.io/installation
• Aprire la console di sublime
• Copiare lo script reperibile alla pagina citata
• Premere Invio
• Riavviare Sublime

59. Color Highlighter
• Permette di vedere il vero colore inserito tramite
codifica esadecimale e non

60. GitCutter
• Fa apparire nel lato sinistro di una riga un icona in
base alla modifica rilevata da Git
• Ti avverte visivamente se una riga è stata
aggiunta, modificata o rimossa

61. Emmet
• Il famigerato plugin per la stesura veloce di HTML
• Oltre a quello mette a disposizione un comodo
comando per wrappare del testo selezionato in tag
scritti con la dicitura di emmet

62. LiveReload (o Takana)
• Esegue un server locale per ricaricare una pagina
web dinamicamente al cambiamento del codice
• Necessita di una estensione per browser

63. Sublime Server
• Implementa un banalissimo server apache usabile
per quel progetto o cartella.

64. VAlingn
• Aggiunge una scorciatoia per allineare gli uguali

65. DocBlock
• Permette di scrivere rapidamente documentazione
PHP, Javascript

66. Grunt
• Mette a disposizione grunt senza passare da
terminale

67. Indent XML e Pretty JSON
• Indentano i file XML e JSON per una più facile
visualizzazione

68. Sublime SFTP
• Permette di connettersi ad un server tramite SFTP
• File->SFTP/FTP->Setup Server
• Permette di navigare su un server (una volta connessi)
• File -> SFTP/FTP->Browse Server
• Permette di mappare una cartella locale con una in
remoto
• Click destro sulla cartella da mappare

69. Vim Mode
• Il pacchetto è Vintageous per Sublime 3
• Mette a disposizione tutte le scorciatoie da tastiera
per utilizzare sublime come se fossimo in Vim
• Ma perché mai uno dovrebbe?

70. AutoFileName
• Permette, quando si sta digitando un percorso, di
utilizzare un autocomplete sui nomi dei file e delle
cartelle

71. Sidebar enhancements
• Aggiunge funzionalità molto utili al click destro su
un file/cartella nella sidebar
• Spostare nel cestino
• Copia/Incolla
• Aprire nel browser
• Copiare il contenuto di un file come data:uri base64
• Duplicate
• …

72. Bracket Highlighter
• Un plugin avanzato per la visualizzazione del
matching di parentesi

73. xdebug
• Permette di debuggare un progetto
• Non funziona su singoli file
• È un po’ troppo scomodo

74. Sublime REPL
• Trasforma la finestra di sublime in un terminale con attivo un
determinato interprete
• Esistono svariati interpreti
• Python
• Haskell
• PHP
• Ruby
• CoffeeScript

75. Sinstassi

76. • Esistono pacchetti per quasi tutti i linguaggi di programmazione
• Implementano l’autocomplete e l’evidenziazione del colore
• jQuery
• Wordpress
• PHP
• SASS
• CSS 3
• …

77. Linting

78. Sublime Linter
• È un sistema di controllo del codice scritto in realtime
• Il pacchetto principale è Sublime Linter, ma occorre aggiungere
un pacchetto per ogni linter che si vuole utilizzare.
• Ogni linter necessita dell’eseguibile nella propria macchina.
• Es. se si fa lint di php occorre che sublime possa accedere a
>> php -i
• Se si fa lint di javascript bisogna aver scaricato con node.js
jshint
• Ecc.

79. Grazie
Domande?

80. –Cav. Silvio Berlusconi
“And I want to say another thing. I consider the
American flag, not only a flag of a nation; but
also a symbol of democracy and freedom”.