Editor Sublime Text 3 (ST3)
Sublime 3 es un editor de código muy rápido y sofisticado que nos permitirá ejecutar un
montón de tareas de forma muy rápida y sencilla. Soporte muchos lenguajes de programación
y dispone de un sistema de instalación de paquetes adiciones que amplían sus características
de forma ilimitada.
Página Oficial: [Link]
Documentación Oficial: [Link]
Instalación de Sublime Text 3
1. Para Instalar Sublime 3 tendremos que ir a la página [Link]
2. Descargaremos el paquete de instalación para nuestra versión de sistema operativo
(actualmente Sublime Text está en versión Beta) [Link]
3. Disponemos de versiones para OSX, Windows(32 y 64 bits) y Ubuntu (32 y 64 bits).
4. Seguimos los pasos indicados en la instalación.
Combinaciones de teclas y funciones básicas en
Sublime Text 3
Selección múltiple
Pulsando Ctrl + D, seleccionamos la próxima ocurrencia de la palabra/string que tenemos
seleccionada.
Pulsando Ctrl + L, seleccionamos la próxima linea.
Pulsando Ctrl y utilizando el ratón, podemos seleccionar lo que queramos.
Linea de Comandos
Pulsando Ctrl + Shift + P podemos abrir la linea de comandos, desde la cual podemos
hacer de todo.. desde insertar snippets.. cambiar configuraciones a cambiar de lenguaje.
Movernos por el código
Pulsando Ctrl + P, podemos navegar por el source del archivo abierto, por otros archivos
y etc..
Pulsando Ctrl + R, puedes encontrar los metodos/funciones de tu documento.
Si pulsamos Ctrl + G, y escribimos un número, nos llevará a la línea con ese número.
Si al pulsar Ctrl + P escribimos #, nos mostrará todas las etiquetas de un documento
HTML.
Múltiples cursores
Pulsando Ctrl y haciendo click sobre las lineas, podemos insertar múltiples cursores y
cambiar o añadir contenido a la vez.
Modo anti-distracción
Para entrar en el modo anti-distracción, puedes pulsar Shift + F11. Esto centrara el código
y lo pondrá a "Full Screen".
Para más información visitar las siguientes URL con ejemplos de ST3:
[Link]
[Link]
Configuración del instalador de paquetes en Sublime
Text 3
Una vez instalado Sublime Text 3 vamos a configurar el sistema que nos permitirá instalar
componentes adicionales. Ese sistema es el package control.
Para instalar el package control haremos lo siguiente:
Abrimos Sublime Text y veremos el siguiente aspecto:
Activamos que se muestre la barra lateral en el menú View -> Side Bar -> Show Side
Bar.
Si no se activa el Side Bar pulsar en la opción View -> Side Bar ->Show Open Files .
Mostraremos la consola con View -> Console.
Iremos a la siguiente página: [Link]
Pulsaremos en la opción Install Now >
Seleccionamos el texto indicado para nuestra versión y lo copiamos.
Vamos a la consola de Sublime Text y lo pegamos.
Pulsaremos Enter y esperaremos a que el sistema actualice los repositorios.
Para acceder al package control iremos a Tools -> Command Palette (CTRL + Shift +
P) y una vez allí teclearemos package y seleccionamos Package Control: Install
Package
Una vez en el package manager podremos buscar en la lista el plugin que queramos
instalar.
Configuración de cliente FTP en Sublime Text 3
En Sublime Text podemos configurar un cliente FTP que nos permitirá enviar nuestros ficheros
al servidor de forma automática cada vez que grabamos el fichero.
Para ello abriremos el Package Control con CTRL + Shift + P , teclearemos package y
seleccionamos Package Control: Install Package
Tecleamos SFTP y lo seleccionamos:
Una vez instalado configuraremos el plugin de la siguiente forma:
En la vista lateral click con el botón derecho en la carpeta principal en la que queremos
configurar nuestro FTP automático y seleccionaremos la opción SFTP/FTP: Map to
Remote...
Configuraremos las siguientes opciones según nuestros parámetros:
Instalación de plugin SideBarEnhancements en
Sublime Text 3
Si queremos probar nuestras páginas en un navegador por defecto y en una URL determinada
haremos lo siguiente:
Tendremos que instalarnos primero el plugin: SideBarEnhancements.
Para ello pulsaremos CTRL + Shift + P teclearemos install y seleccionamos Package
Control: Install Package
Tecleamos SideBarEnhancements
Una vez instalado el plugin en el SideBar cuando pulsemos con el botón derecho nos
aparecerán más opciones de gestión de ficheros adicionales.
A continuación tendremos que configurar la URL dónde queremos que se abran nuestras
páginas de prueba.
Haremos click con el botón derecho del ratón en la carpeta principal equivalente a la
raíz en nuestro servidor web y seleccionaremos Project -> Edit Preview URLs
Editaremos el fichero con las rutas dónde se encuentran nuestros ficheros locales (en
nuestra carpeta personal L: (fijarse que la ruta termina con /)
Al pulsar la tecla F12 se abrirá el servidor de Testing.
Al pulsar la tecla ALt+F12 se abrirá el servidor de Producción.
Ejemplo de código de [Link]:
{
"E:/xampp/htdocs/web/_dev/[Link]/": {
"url_testing":"[Link]
"url_production":"[Link]
},
"E:/xampp/htdocs/[Link]": {
"url_testing":"[Link]
"url_production":"[Link]
}
}
// Si da error en la ruta poniendo la letra de la unidad,
// Sustituir por la ruta de la conexion Por ejemplo:
//gaiasa/dawMP/webservidor/[Link]
Grabaremos el fichero con CTRL+S.
Configuración de Navegador por defecto en Sublime
Text 3
Iremos a Preferences -> Package Settings -> Side Bar -> Settings User
Ejemplo de código de [Link] a incluir en Preferences -> Package
Settings -> Side Bar -> Settings User:
{
"default_browser": "",
"portable_browser": "C:/Program Files
(x86)/Google/Chrome/Application/[Link]"
}
Configuración de combinación de teclas para abrir
navegador en Sublime Text 3
Iremos a Preferences -> Key Bindings - User
El código para el fichero anterior se puede copiar de Preferences -> Package Settings ->
Side Bar -> Key Bindings - Default
Ejemplo de código de Default(windows).[Link]:
[
{ "keys": ["shift+f6"],
"command": "side_bar_open_in_browser" ,
"args":{"paths":[], "type":"production", "browser":""}
}
]
// Se ha configurado para que abra con la misma combinación de teclas que
NetBeans Shift+F6.
Reindentar código en Sublime Text 3
Una forma de reindentar el código es la siguiente:
Seleccionar todo el código con CTRL + A
Ir a Edit -> Line -> Reindent
Si es algo que hacemos a menudo lo mejor es crear una combinación de teclas, en este
caso CTRL+Shift+R:
Iremos a Preferences -> Key Bindings-User
Añadiremos el siguiente objeto json al array (si es que ya tenemos alguno)
Objeto JSON a añadir al array:
{ "keys": ["ctrl+shift+r"],
"command": "reindent" ,
"args": { "single_line": false }
}
Nuestro fichero Default(Windows).[Link] podría tener un aspecto como
el siguiente:
( En este caso el fichero ya tenía otra combinación de teclas programada -> Shift+F6 que
programamos anteriormente para abrir un navegador).
[
{ "keys": ["shift+f6"],
"command": "side_bar_open_in_browser" ,
"args":{"paths":[], "type":"production", "browser":""}
},
{ "keys": ["ctrl+shift+r"],
"command": "reindent" ,
"args": { "single_line": false }
}
]
Auto ajuste de líneas largas (wrap) en Sublime Text 3
Para auto ajustar las líneas largas que se salgan del editor haremos lo siguiente:
Preferences > Settings – User.
Introduciremos la siguiente línea: "word_wrap": true,
{
"word_wrap": true,
"ignored_packages":
[
"Vintage"
]
}
Grabaremos el archivo con CTRL + S.
Plugin Emmet en Sublime Text 3
Este plugin nos ayudará a generar código de forma rápida
Para instalarlo:
CTRL+ Shift + P y tecleamos install y seleccionamos Package Control: Install
Package.
Escribimos emmet y en los resultados que aparezcan pulsamos en Emmet.
Una vez instalado creamos un fichero html y podemos probar combinaciones como las
siguientes:
! [TAB] -> Escribe la cabecera de un documento HTML5
div>ul>li -> Genera un div que contiene un ul y un li
Para más información y ejemplos visitar: [Link]
Plugin Bootstrap 3 Snippets en Sublime Text 3
Este plugin nos permitirá autocompletar código de Bootstrap:
Para instalarlo:
CTRL+ Shift + P y tecleamos install y seleccionamos Package Control: Install
Package.
Escribimos bootstrap y en los resultados que aparezcan pulsamos en Bootstrap 3
Snippets.
Para probar su funcionamiento abrimos un fichero nuevo y probamos a teclear alguna
combinación de las disponibles en:
[Link]
// Para generar un formulario en bootstrap:
bs3-form + [TAB]
// Para escribir un campo de tipo input text:
bs3-input:text + [TAB]
// Para escribir un campo de tipo input date:
bs3-input:date + [TAB]
// Más ejemplos en: [Link]
Plugin BracketHighlighter en Sublime Text 3
Este plugin nos ayudará a localizar más fácilmente la apertura y cierre de etiquetas,
funciones, etc..
Para instalarlo:
CTRL+ Shift + P y tecleamos install y seleccionamos Package Control: Install
Package.
Escribimos bracket y en los resultados que aparezcan pulsamos en BracketHighlighter.
Una vez instalado abrimos un fichero y probamos en un fichero con código a ver si marca
las aperturas y cierres correctamente.
A veces dependiendo de la combinación de colores podrá destacarlo más o menos.
Plugin ColorPicker en Sublime Text 3
Este plugin nos permitirá seleccionar colores desde el código fuente:
Para instalarlo:
CTRL+ Shift + P y tecleamos install y seleccionamos Package Control: Install
Package.
Escribimos colorpi y en los resultados que aparezcan pulsamos en ColorPicker.
Para probar su funcionamiento teclearemos CTRL+Shift+C
Plugin DocBlockr en Sublime Text 3
Este plugin nos permitirá crear documentación sobre el código fuente:
Para instalarlo:
CTRL+ Shift + P y tecleamos install y seleccionamos Package Control: Install
Package.
Escribimos docbl y en los resultados que aparezcan pulsamos en DocBlockr.
Para probar su funcionamiento simplemente tendremos que escribir /** y
pulsar TAB encima de una función.
Ejemplo:
/**[TAB]
function sumar(a,b)
{
return a+b;
}
// Y obtendremos algo como:
/**
* [sumar description]
* @param {[type]} a
* @param {[type]} b
* @return {[type]}
*/
function sumar(a,b)
{
return a+b;
}
// Tendremos que completar la documentación cubriendo cada apartado y
pulsando [TAB] para pasar al siguiente.
// Y generaremos un código similar al ejemplo siguiente:
/**
* Función que devuelve la suma de dos números pasados como parámetro.
* @param {number} a
* @param {number} b
* @return {number}
*/
function sumar(a,b)
{
return a+b;
}
Plugin HTML-CSS-JS Prettify en Sublime Text 3
CTRL+ Shift + P y tecleamos install y seleccionamos Package Control: Install
Package.
Escribimos html css y en los resultados que aparezcan pulsamos en HTML-CSS-JS
Prettify.
Para probar su funcionamiento simplemente tendremos que hacer click con el botón
derecho en el código y seleccionar HTML/CSS/JS Prettify -> Prettify Code
Plugin Typescript para trabajar con Angular2 en
Sublime Text 3
CTRL+ Shift + P y tecleamos install y seleccionamos Package Control: Install
Package.
Escribimos TypeScript y en los resultados que aparezcan pulsamos en TypeScript.
Reiniciamos Sublime y ya podremos ver con colores el código de TypeScript.
Si queremos configurar el tamaño del tabulador en espacios y alguna que otra opción
iremos a:
Preferences > Settings > Syntax Specific (User) y pegaremos el siguiente código:
{
"tab_size": 3,
"translate_tabs_to_spaces": false
}
Plugin Laravel Blade Highlighter en Sublime Text 3
Este plugin nos permitirá poner de diferente color las plantillas Blade de Laravel:
Para instalarlo:
CTRL+ Shift + P y tecleamos install y seleccionamos Package Control: Install
Package.
Escribimos laravel y en los resultados que aparezcan pulsamos en Laravel Blade
Highlighter.
Plugin Laravel Color Scheme en Sublime Text 3
Este plugin nos permitirá poner de diferente color código generado en Laravel:
Para instalarlo:
CTRL+ Shift + P y tecleamos install y seleccionamos Package Control: Install
Package.
Escribimos laravel y en los resultados que aparezcan pulsamos en Laravel Color
Scheme.
Plugin PHP Getters and Setters en Sublime Text 3
Este plugin nos permitirá crear los getters and setters en PHP a la hora de hacer una
clase.:
Para instalarlo:
CTRL+ Shift + P y tecleamos install y seleccionamos Package Control: Install
Package.
Escribimos PHP Getters y en los resultados que aparezcan pulsamos en PHP Getters
and Setters.
Para probar su funcionamiento simplemente tendremos que pulsar con el botón
derecho Getters and Setters en el código PHP dónde tenemos la clase y seleccionar la
opción deseada.
Plugin PHPcs en Sublime Text 3
Da soporte a PHP_CodeSniffer ST2. Chequea si el código sigue el stándard. Se puede
seleccionar Zend, PEAR,etc.. Para más
configuración: [Link]
Para instalarlo:
CTRL+ Shift + P y tecleamos install y seleccionamos Package Control: Install
Package.
Escribimos PHP Construc y en los resultados que aparezcan pulsamos en PHPcs.
Plugin PHP Constructors en Sublime Text 3
Este plugin nos permitirá crear los constructores de una clase en PHP.:
Para instalarlo:
CTRL+ Shift + P y tecleamos install y seleccionamos Package Control: Install
Package.
Escribimos PHP Construc y en los resultados que aparezcan pulsamos en PHP
Constructors.
Para probar su funcionamiento simplemente tendremos que pulsar con el botón
derecho PHP Constructor y seleccionar Generate PHP Constructor for Class.
Plugin Pretty JSON en Sublime Text 3
Este plugin nos permitirá validar, formatear y minimizar un JSON:
Para instalarlo:
CTRL+ Shift + P y tecleamos install y seleccionamos Package Control: Install
Package.
Escribimos pretty y en los resultados que aparezcan pulsamos en Pretty JSON.
Para configurar la combinación de teclas iremos a Preferences -> Package Settings ->
PretyJSON-> Settings - User
Y añadimos lo siguiente:
{ "keys": [ "ctrl+alt+m" ], "command": "un_pretty_json" }
Para usarlo seleccionaremos el texto JSON y pulsaremos CTRL+ALT+M
También podremos validar y formatear. Pulsamos CTRL + Shift + P, tecleamos JSON y
veremos las opciones posibles y combinaciones de teclas correspondientes.
Para formatear usaremos CTRL + Alt + J
Plugin SublimeCodeIntel en Sublime Text 3
Este plugin nos permitirá autocompletar código en diferentes lenguajes:
Para instalarlo:
CTRL+ Shift + P y tecleamos install y seleccionamos Package Control: Install
Package.
Escribimos codeIntel y en los resultados que aparezcan pulsamos en SublimeCodeIntel.
Para probar su funcionamiento simplemente tendremos que escribir código de algún
lenguaje y esperar a que nos muestre las opciones de autocompletado.
Más información sobre el plugin SublimeCodeIntel
Teclas rápidas con el plugin SublimeCodeIntel:
ALT+Click (en una variable, nos lleva a la sección del código dónde se creó dicha
variable.
Shift+Control+Espacio (para mostrar las opciones de autocompletado para un texto
determinado).
Para PHP tendremos que activar la opción de autocompletado en:
Abrimos el siguiente fichero: Preferences -> Package Settings -> SublimeCodeIntel ->
Settings - Default
Copiamos todo su contenido.
Lo pegamos en el siguiente fichero: Preferences -> Package Settings ->
SublimeCodeIntel -> Settings - User
Modificamos esta línea para que quede así, 'añadiendo PHP en la última posición:
"codeintel_selected_catalogs": [
"PHP", "jQuery", "HTML5"
],
Grabamos el archivo con nuestros ajustes y reiniciamos el Sublime Text 3.
Plugin SublimeLinter Sublime Text 3
Chequea constantemente si nos hemos olvidado de llaves, punto y coma, etc..
Para instalarlo:
CTRL+ Shift + P y tecleamos install y seleccionamos Package Control: Install
Package.
Escribimos PHP Construc y en los resultados que aparezcan pulsamos en Sublimelinter.
Hay que instalar módulos adicionales para cada lenguaje:
SublimeLinter-php
SublimeLinter-jshint
SublimeLinter-json
SublimeLinter-csslint
Plugin Terminal en Sublime Text 3
CTRL+ Shift + P y tecleamos install y seleccionamos Package Control: Install
Package.
Escribimos terminal y en los resultados que aparezcan pulsamos en Terminal.
Para probar su funcionamiento simplemente tendremos que hacer click con el botón
derecho en alguna carpeta y seleccionar Open Terminal Here...
Plugin TrailingSpaces en Sublime Text 3
Se encarga de eliminar los espacios al final que tengamos en el código.
CTRL+ Shift + P y tecleamos install y seleccionamos Package Control: Install
Package.
Escribimos terminal y en los resultados que aparezcan pulsamos en TrailingSpaces.
Le asignaremos una combinación de teclas en Preferences -> Key Bindings ->
User (delete_trailing_spaces):
[
{ "keys": ["shift+f6"],
"command": "side_bar_open_in_browser" ,
"args":{"paths":[], "type":"production", "browser":""}
},
{ "keys": ["ctrl+shift+r"],
"command": "reindent" ,
"args": { "single_line": false }
},
{ "keys": ["ctrl+shift+s"],
"command": "delete_trailing_spaces"
}
]
Para probar su funcionamiento simplemente tendremos que pulsar CTRL+Shift+S y se
eliminarán automáticamente todos esos espacios al final.
Combinación de teclas para grabar todos los archivos
en Sublime Text 3
Mediante esta combinación de teclas grabaremos todas las modificaciones de todos los
archivos que tengamos abiertos en Sublime.
CTRL+ Alt + S.
[
{ "keys": ["shift+f6"],
"command": "side_bar_open_in_browser" ,
"args":{"paths":[], "type":"production", "browser":""}
},
{ "keys": ["ctrl+shift+r"],
"command": "reindent" ,
"args": { "single_line": false }
},
{ "keys": ["ctrl+shift+s"],
"command": "delete_trailing_spaces"
},
{ "keys": ["ctrl+alt+s"],
"command": "save_all"
}
]
Para probar su funcionamiento simplemente tendremos que pulsar CTRL+Shift+S y se
eliminarán automáticamente todos esos espacios al final.
Creación de un snippet en Sublime Text 3
Vamos a ver como podemos crear un snippet en Sublime Text 3 para que nos cubra la
cabecera de Bootstrap al teclear bs y pulsar TABULADOR.
[Link]
Para ello iremos a Tools -> New Snippet... y se mostrará el siguiente código:
<snippet>
<content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the
snippet -->
<!-- <tabTrigger>hello</tabTrigger> -->
<!-- Optional: Set a scope to limit where the snippet will trigger
-->
<!-- <scope>[Link]</scope> -->
</snippet>
Dentro de <![CDATA[ ... ]]> teclearemos el código fuente de nuestro snippet.
Los parámetros ${1:this} y ${2:snippet} serán los textos que nos aparecerán cuando
ejecutemos el snippet y pulsemos TABULADOR.
${1:this} : ${1} -> indica primer parámetro y :this -> indica texto por defecto en esa
posición.
<tabTrigger>hello</tabTrigger> -> Aquí se indica el texto previo que activará el snippet
al pulsar TAB.
Código fuente de nuestro snippet para Bootstrap:
<snippet>
<content><![CDATA[
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>${1:Titulo documento}</title>
<meta name="viewport" content="width=device-width, initial-
scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/[Link]">
<link rel="stylesheet" href="css/[Link]">
</head>
<body>
${2: Contenido del documento}
<script
src="//[Link]/ajax/libs/jquery/2.1.1/[Link]"></script
>
</body>
</html>
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the
snippet -->
<tabTrigger>bs</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger
-->
<!-- <scope>[Link]</scope> -->
</snippet>
Para guardar el fichero con el snippet:
Carpeta: \Sublime Text 3\Packages\User
Nombre: sin restricciones.
Extensión: .sublime-snippet (es obligatoria, sino no funcionará el snippet).
Para probar el snippet:
Teclear bs y pulsar TAB a continuación.
Configuración de Git en Sublime Text 3
[Link]
Configuración de Sublime Text 3 para seguir los
estándares PSR-2
Entraremos en Preferences -> Settings
Copiamos y pegamos la siguiente configuración sobreescribiendo lo que tengamos.
{
"default_line_ending": "unix",
"ensure_newline_at_eof_on_save": true,
"font_size": 12,
"ignored_packages":
[
"Vintage"
],
"preserveIndent": "false",
"rulers":
[
120
],
"tab_size": 4,
"translate_tabs_to_spaces": true,
"trim_trailing_white_space_on_save": true,
"word_wrap": "true"
}