Sublime Text | Descarga y uso
Diseño Web

CaracterĂ­sticas

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

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-
  • 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>
lorem5Lorem ipsum dolor sit amet.
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.

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"
    }
}
]
icono de mandar un mailSOPORTE Usuarios Premium
Pablo MonteserĂ­n
contacta conmigoPablo MonteserĂ­n

Para dudas técnicas sobre los ejercicios de mis cursos es necesario tener una cuenta premium activa. Para cualquier otra cosa, puedes usar el formulario de la página de contacto.