Sublime Text

Características

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

Status Bar

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

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

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

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

Proyectos

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

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-
  • Bootstrap 3 Snippets: ctrl `shift + p → bs3
  • Terminalctrl + alt + shift . Abre una terminal en la raíz del proyecto.

Emmet

html:5
lorem5
div>span

<div><span></span></div>
div#wrapper>span.texto

<div id="wrapper"><span class="texto"></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"
		
	

Configurar atajo

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

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.

Debugar en sublime-text

sudo apt-get install php5-dev php-pear
sudo pecl install xdebug

copio el path mostrado al final de la instalación:


Installing '/usr/lib/php5/20090626/xdebug.so'

Edito el php.ini y añado las siguientes líneas al final:

zend_extension="/usr/lib/php5/20090626/xdebug.so"
xdebug.remote_enable = on
xdebug.remote_handler = dbgp
xdebug.remote_host = localhost
xdebug.remote_port = 9000

Será necesario cambiar la configuración del proyecto

		
{
	"folders":
	[
		{
			"path": "..."
		}
	],
	"settings": {
			"xdebug": { "url": "http://localhost/pablomonteserin" }
	}
}
		
	

Shortcut keys para el debug

  • Shift+f8: Open XDebug quick panel
  • f8: Open XDebug control quick panel when debugger is connected
  • Ctrl+f8: Toggle breakpoint
  • Ctrl+Shift+f5: Run to next breakpoint
  • Ctrl+Shift+f6: Step over
  • Ctrl+Shift+f7: Step into
  • Ctrl+Shift+f8: Step out

If your window doesn't remove the debugging views when you stop debugging, then you can revert to a single document view by pressing `Shift+Alt+1`

icono de mandar un mail¡Contacta conmigo!
Pablo Monteserín
contacta conmigoPablo Monteserín

Para dudas técnicas sobre los ejercicios de mis cursos es necesario estar suscrito.