Características

Creado por Jon Skinner como una extensión de VIM.
Rápido (escrito en C++ y Python).
Ligero (7mb) y portable.

La status bar de Sublime Text

Nos muestra:

la codificación del texto.
el número de espacios de un tabulador.
el tipo de coloreado de sintaxis que se está aplicando.

Es posible cambiar estos dos últimos valores pulsando sobre ellos.

Layouts de Sublime Text

View → Layout (Shift + alt + nºdivisiones (1,2,3…)) Puedo arrastrar las pestañas de una subventana a otra.

File → new view into file: me permite ver el mismo fichero desde dos pestañas diferentes.

Word Wrap

menu View → word wrap → Ajusta/desajusta el texto al tamaño de la ventana.

Selección múltiple

ctrl + click sobre diferentes posiciones de la pantalla.
shift + alt + flechitas arriba abajo (linux)
ctrl + alt + flechitas abajo (windows)
selecciono una palabra: ctrl + d → Nos va seleccionando las coincidencias que va encontrando cada vez que ejecutemos este comando. Luego, para editar, puedo usar las teclas del cursor para ubicarme en la posición correcta.
selecciono una palabra: alt + F3. Selecciona todas las ocurrencias de esta palabra en el código.

Shortcuts de Sublime Text

ctrl + shift + cursor arriba o cursor abajo: va moviendo sucesivamente la línea hacia arriba o hacia abajo
shift + alt + cursor arriba o cursor abajo: va haciendo selección múltiple
ctrl + f: busca una palabra en el texto.
ctrl + shift + f: busca un texto entre los documentos del proyecto. Si no quiero perder de vista la pestaña de navegación, puedo desmarcar el botón user buffer.
ctrl + n: abre una nueva pestaña
ctrl + w: cierra la pestaña actual.
ctrl + tab: navega entre las pestañas abiertas
ctrl + shift + 7 o ctrl + ç: (según versión)→ Comenta/descomenta código.
ctrl + shift + p: lista todos los comandos disponibles.
ctrl + shift + p → reindent: reindentar el código.
Botón derecho sobre el cuerpo del fichero → Copy File Path: obtener el nombre cualificado de un fichero.

Configurar shortcut

Tools → Build System → New Build System

En windows:
{
 "cmd": ["C:\\Archivos de programa\\Mozilla Firefox\\firefox.exe", "$file"]
} 

En linux:
{
   "cmd": ["/usr/lib/firefox/firefox.sh", "$file"]
}

Podré acceder a estos códigos usando:
Preferences → Browse Packages → User

Snippets de HTML

En un documento HTML:

html + tab → Inserta el código estructural de una página.
img + tab → Inserta el código de una imágen.
a + tab → <a href=»#»></a>(primero me situa el cursor en el href y luego, pulsando tab, en el texto visible).
lorem + tab → Nos pone un párrafo
div#pp + tab → <div id=»pp»></div>
style + tab → <style type=»text/css»></style>
script + tab → <script></script>
link + tab → <link rel=»stylesheet» type=»text/css» href=»»>
php + tab → <?php ?>

Podemos ver los snippet disponibles pulsando:
ctrl + alt + p → snip

Crear y eliminar proyectos en Sublime Text

Creación de un nuevo proyecto

Proyect → Close Proyect.
Proyect → Add Folder to Proyect
Proyect → Save Proyect as. Crea un nuevo proyecto representado por un fichero entre los packages de sublime text. Luego, debemos añadir carpetas a dicho proyecto o crearlas nuevas. Dichas carpetas, no tienen porqué estar en la ruta de configuración del proyecto.

Crea dos ficheros:

sublime-proyect
- de los 2, este es el que realmente habrá que tocar
- ubicación de los ficheros
- Xdebug
- ctrl + alt + p:cambiar de proyecto
sublime-workspace – configuración del usuario

Borrar un proyecto

Proyects → recent proyect → clear items

Esto borra la referencia a todos los proyectos.

Goto Anything (ctrl + p)

Cuando estoy escribiendo el nombre del fichero, o cuando ya tengo seleccionado un fichero concreto, puedo:

index.html#<head> Busca el inicio de la etiqueta head dentro de index.html
#<head> Busca el inicio de la etiqueta head dentro del fichero activo.
index.html:70 Buscaría la línea 70 dentro de index.html
:70 Busca la línea 70 dentro del fichero activo.

Package Control

Una vez instalado:

ctrl + shift + p → packages → para ver las opciones disponibles
ctrl + shift + p → install → install packages
ctrl + shift + p → list → para ver los plugins instalados
ctrl + shift + p → remove → para desinstalar plugins instalados

Plugins de Sublime Text

Tras instalar el package control, podremos instalar plugins

AutoFileName: autocompleta rutas.
Readme please: permite acceder rápidamente a los ficheros readme please del paquete instalado.
Brackets highlighter: resalta apertura y cierre de llaves, corchetes, paréntesis, etc. Precisa reiniciar Sublime Text.
Color Picker: muestro la rueda de colores del sistema operativo pulsando ctrl+shift+c.
sftp: para trabajar con un servidor. Botón derecho sobre la carpeta que contiene los ficheros que quiero sincronizar → SFTP/FTP → Edit remote mapping … → Tendré que tocar los parámetros type, host, user, password, remote_path.
FileDiffs: para comparar ficheros. Puedo pulsar con el botón derecho sobre una pestaña de un fichero y escojer con qué fichero lo quiero comparar.
Additional PHP Snippets: Generación de getterss y setters. Se arrancan con php-
Terminalctrl + alt + shift . Abre una terminal en la raíz del proyecto.
Babel. Coloreado de sintaxis en React.
Babel snippets. Permite usar zen coding al programar con JSX.
Open Folder. Permite abrir una carpeta del ordenador desde sublime.

Emmet

html:5

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

lorem5

Lorem ipsum dolor sit amet.

div#wrapper>span.texto

<div id="wrapper"><span class="texto"></span></div>

div>span

<div><span></span></div>

div[data-role]

<div data-role=""></div>

table>tr*2>td>a[href=#]{enlace}+span


<table>
	<tr>
		<td><a href="#">enlace</a><span></span></td>
	</tr>
	<tr>
		<td><a href="#">enlace</a><span></span></td>
	</tr>
</table>

Modificar los snippets de Emmet

Preferences → Browse Packages → Emmet → emmet → snippets.json

Nettuts+ Fetch plugin

Descarga la última versión de una librería. Viene por defecto con la librería de Jquery y la html5 boiler plate. Para usarlo: ctrl +shift+ p → fetch.

ctrl + shift + p + fetch manage →


{
	"files":
	{
		"jquery": "http://code.jquery.com/jquery.min.js"
	},
	"packages":
	{
		"html5_boilerplate": "https://github.com/h5bp/html5-boilerplate/zipball/master",
		"wordpress_latest":"http://wordpress.org/latest.zip",
		"codeigniter":"http://ellislab.com/codeigniter/download"
	}
}

Plugin PlainTasks

Me permite crear archivos de extensión .TODO para llevar un control de tareas. Puedo salvar estos archivos dentro de mi proyecto para ver las tareas cuando sea necesario.

Nuevo documento de tareas: ctrl + shift + p → tasks → new document
Grupo de tareas: Escribo el nombre del grupo sucedido de dos puntos (:).
Nueva tarea
- Escribo el nombre de la tarea → ctrl + enter
- ctrl + i
Introducir divisiones: — + tab
Marcar una tarea hecha: me posiciono encima → ctrl + d

Sublime → preferences → settings

Configuración del comportamiento del editor. Existen dos grupos principales (default & User).

Los cambios siempre los debemos guardar en user, ya que esa es una carpeta que no la toca nadie, pero default, cambia con cada nueva versión.

Cambiar las preferencias del sistema

Preferences → Settings → User
//Resalta la línea dónde estoy escribiendo
"highlight_line": true,
//Resalta las pestañas que todavía no fueron salvadas
"highlight_modified_tabs": true,
//Borra los espacios en blanco sobrantes al salvar 
"trim_trailing_white_space_on_save": true,
//Salva automáticamente cuando vayamos a otra aplicación(por ejemplo, el navegador, para probar la página) o cuando cambio de pestaña
"save_on_focus_lost": false,

"font_size": 13,
"theme": "Soda Dark.sublime-theme"

Cambiar las preferencias a nivel de proyecto

{
	"folders":
	[
		{
			"path": "/media/DocumentsDisk/tutos/theory/pyro_pablomonteserin"
		}
	],
	"settings":
	{
		//Aquí incluyo la configuración específica de este proyecto
	}
}

Key Bindings

Preferences – Key Bindings – User

Atajos del teclado. Los guardamos siempre en User.

Los siguientes códigos permiten utilizar zen codding en JSX y cambiar el wrap al pulsar ctrl+z

[
{
    "keys": ["tab"], "command": "expand_abbreviation_by_tab", "context": [
        {
            "operand": "source.js", 
            "operator": "equal", 
            "match_all": true, 
            "key": "selector"
        },
        {   
            "key": "selection_empty", 
            "operator": "equal", 
            "operand": true,
            "match_all": true 
        }
    ]
},
{ "keys": ["tab"], "command": "next_field", "context":
    [
        { "key": "has_next_field", "operator": "equal", "operand": true }
    ]
},
{
    "keys": ["alt+z"],
    "command": "toggle_setting",
    "args": {
        "setting": "word_wrap"
    }
}
]