Sublime Text tips & tricks

Io sono Luca Montanera (@sidmonta)

Installazione

• 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

I pacchetti

• Tutte le impostazioni, plugin, temi ecc. si trovano nella cartella packages di Sublime

• Raggiungibile da Preferenze-> Browse Packages

• 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

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

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…

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

Go to

Go to Anything

Cmd + P

Aprire un file

• Cmd + P

Basta digitare il nome del file che si vuole aprire, purché faccia parte del progetto.

Esempio…

Andare alla riga

• Cmd + P oppure Ctrl + G

Se si ha premuto solo Cmd+P aggiungere “:” e scrivere la riga a cui andare.

Esempio…

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

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…

Command Palette

Utilizzo

• Cmd + Shift + P

Digitate il nome del comando che volete eseguire.

Personalizzazione

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

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”}

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

–Cmd + K, Cmd+ B

Utilizzate la Sidebar

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…

Editor

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

Finestre multiple

•Nel menu view->layout è possibile impostare una griglia in cui impostare la finestra del proprio editor

Esempio…

Finestre multipleScorciatoie

• 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

Finestre multipleOrigami

• 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

• Focus

• Cmd + K seguito da , , , → ← ↑ ↓

• Spostare file

• Cmd + K seguito da Shift + , , , → ← ↑ ↓

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…

• 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…

• 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…

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)

• 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

Temi e colori

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

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:

Cobalt2

Platto

itg-flat

Snippets

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>

• 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

Opzioni di ricerca

• [ * ] possibilità di usare le regex

• [ Aa ] ricerca case sensitive

• [ “ ] ricerca anche una porzione di stringa

Progetti

• .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

.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”

Build

http://docs.sublimetext.info/en/latest/reference/build_systems.html

http://addyosmani.com/blog/custom-sublime-text-build-systems-for-popular-tools-and-languages/

Per maggiori informazioni

Sublime permette di definire degli script da eseguire per compilare la pagina attiva per vari linguaggi di

programmazione

Bookmarks

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

Lavorare con Git

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

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

• 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

Package Control

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

Color Highlighter

• Permette di vedere il vero colore inserito tramite codifica esadecimale e non

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

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

LiveReload (o Takana)

• Esegue un server locale per ricaricare una pagina web dinamicamente al cambiamento del codice

• Necessita di una estensione per browser

Sublime Server

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

VAlingn

• Aggiunge una scorciatoia per allineare gli uguali

DocBlock

• Permette di scrivere rapidamente documentazione PHP, Javascript

Grunt

• Mette a disposizione grunt senza passare da terminale

Indent XML e Pretty JSON

• Indentano i file XML e JSON per una più facile visualizzazione

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

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?

AutoFileName

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

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

• …

Bracket Highlighter  

• Un plugin avanzato per la visualizzazione del matching di parentesi

xdebug

• Permette di debuggare un progetto

• Non funziona su singoli file

• È un po’ troppo scomodo

Sublime REPL

• Trasforma la finestra di sublime in un terminale con attivo un determinato interprete

• Esistono svariati interpreti

• Python

• Haskell

• PHP

• Ruby

• CoffeeScript

Sinstassi

• Esistono pacchetti per quasi tutti i linguaggi di programmazione

• Implementano l’autocomplete e l’evidenziazione del colore

• jQuery

• Wordpress

• PHP

• SASS

• CSS 3

• …

Linting

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.

Grazie

Domande?

–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”.