1. Características
  2. Status bar
  3. Layouts
  4. Word Wrap
  5. Selección múltiple
  6. Shortcuts
  7. Snippets
  8. Creación de un nuevo proyecto
  9. Goto Anything
  10. Package Control
  11. Plugins
  12. Settings
  13. Configurar atajo
  14. Cambiar las preferencias a nivel de proyecto
  15. Debugar

Características

Video tutorial de Sublime Text

Status Bar

Nos muestra:

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

Shortcuts

Snippets de html

En un documento html:

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:

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:

Package Control

Hay una extensión que no viene con sublime pero debería ser la primera en instalarse: Package Control.

Para instalarlo, hay dos formas, la fácil y la no tan fácil:

Una vez instalado:

Plugins

Tras instalar el package control, podremos instalar plugins

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.

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!
contacta conmigoPablo Monteserín

¡Hola! ¿En qué puedo ayudarte?