Sublime Text tips & tricks

Quello che sta seduto di la

Io sono Luca

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 loutput 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

Apre uno specifico progetto

subl 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 delleditor 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 dellindentazione

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

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

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 lintera 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

hello source.python A sample snippet

Lo snippet vero proprio va inserito tra il CDATA

${1:default text for this placeholder} setta un place holder che allutilizzo 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 delleditor 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

BracketHighlighter

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 lautocomplete e levidenziazione 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 delleseguibile 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.