Sublime Text 2. Atajos, Trucos, Plugins, Snippets y Temas.
Últimamente se habla mucho de ST2. Desde hace unos meses lo estoy utilizado como editor regular reemplazando a Notepad++ y Netbeans.
Las ventajas que da son muchas y las pocas desventajas que ofrece lo hacen un editor "perfecto".
Es un editor de texto multi-plataforma (Windows,Linux,Mac OS X). Por supuesto tiene su coloreado de código.. y otras cosas típicas de un editor como lo es Notepad++ o TextMate.
¿Porque Sublime Text 2? y no otro...
Es simple, pesa poco (7mb) y es muy potente.. permite la instalación de plugins y snippets.. ademas de ser completamente personalizable. Se dice.. y personalmente lo afirmo que es mejor que TextMate..
Descargar Sublime Text 2
Si te he convencido para probarlo puedes descargar su versión "UNREGISTRED" que no te limita a nada.. sin mas muestra un mensaje que dice.. "Cómprame" cada 9 guardados de archivo..
http://www.sublimetext.com/
Pulsado 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 etc..
Pulsando Ctrl + R, puedes encontrar los metodos/funciones de tu documento.
Si pulsamos Ctrl + G, y escribimos un numero, nos llevara a la linea con ese numero.
Si al pulsar Ctrl + P escribimos #, nos mostrara 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".
* Puedes ver mas atajos en la siguiente url. Si usas windows solo tienes que cambiar el símbolo ⌘ por Ctrl.
https://gist.github.com/1207002
Por ejemplo, para crear un snippet que inserte la ultima versión de jQuery no hace falta mas que ir a Tools -> New Snippet... Ahí se nos abrirá un documento nuevo de este estilo:
De ahí hace falta solo modificar el contenido entre <![CDATA[ y ]]>, con el texto que queramos insertar.
Después des-comentar la linea <tabTrigger></tabTrigger> y cambiar "hello" por la palabra clave sera cambiada por el texto al pulsar Tab.
Existen opciones adicionales como <scope>source.python</scope> que definirán donde se podrá activar el snippet. Si por ejemplo, lo des-comentamos y cambiamos source.php o text.html solo se ejecutar en PHP o en HTML respectivamente.
Por ejemplo, este snippet, se ejecutar al escribir includejquery y pulsar Tab, y incluirá la ultima versión del .js de jQuery.
* Para editar un snippet, debemos ir a Preferences -> Browse Packages.. de ahí entrar en la carpeta "User", buscar el nombre bajo el cual lo hemos guardado y arrastrarlo a Sublime Text 2.
* HAY MUCHA MAS INFORMACIÓN y UTILIDADES sobre los snippets, su funcionamiento y sus etiquetas. Para verla puedes usar la siguiente dirección url:
Leer mas...
He creado una serie de snippets.. algunos provienen de temas populares del subforo de PHP en EHN como lo es Pequeños trucos en PHP
Pueden descargarlos de aquí:
ehnSnippets.zip
md5: 16e0df89b8030bf2bcee1d975773cf2c
Tamaño: 3,48kb (Comprimido) / 32kb (Descomprimido)
PARA INSTALARLOS, solo deben descomprimir la carpeta en el siguiente directorio:
Instalación de Sublime Text 2\Data\Packages\User
Para ello, nos vamos a View -> Console y ahí ponemos
Después, podemos pulsar Ctrl + Shift + P, escribir Install y pulsar ENTER. Se os mostrara una serie de plugins que se pueden instalar.
Al instalarlo, en cualquier documento de texto podemos escribir por ejemplo:
automáticamente lo convertirá en,
Ejemplo:
Ejemplo:
Al instalar el plugin, podemos configurarlo o utilizarlo mediante la combinación de teclas Ctrl + Shift + P, escribiendo Fetch y eligiendo ya sea la opción "Fetch" o "Fetch: Manage remote files".
En Fetch, podemos elegir archivo simple o varios archivos (paquetes/frameworks) mientras que en "Fetch: Manage remote files" podemos configurar los archivos remotos. Por defecto viene con jQuery y html5_boilerplate.
Hay un pequeño problema y es que tiene un conflicto con Sublime Text 2, que por defecto la combinación Ctrl + Shift + T abre el ultimo documento. Asi que lo que hay que hacer es ir a Preferences -> Key Blindings User, y si esta vació, añadir esta linea:
PD: Podemos automatizar esto al guardar los archivos, cambiando en Preferences -> Settings - Default,
el "trim_trailing_white_space_on_save": false, por true.
La instalacion y uso son muy faciles. Simplemente descargamos el diccionario español (.txt, .dic y .aff) desde la siguente pagina web y los instalamos en ST2 / Data / Packages / User / Diccionarios (opcional). Una vez instalados, podemos selecionarlo desde View -> Dictionary -> User -> [Lenguaje] y activarlo mediante View -> Spell check o la tecla F6.
Diccionarios para ST2
Para instalarlo hay que ir a la siguiente dirección, descomprimir y meter la carpeta en ST2 / Packages.
Una vez hecho, debemos ir a Preferences -> Settings - Default y encontrar la linea "theme": "Default.sublime-theme", por el nombre de nuestro nuevo tema que en este caso seria "theme": "Soda Light.sublime-theme"
Tema SODA para ST2
Bueno, espero que os haya sido útil.
Saludos
Las ventajas que da son muchas y las pocas desventajas que ofrece lo hacen un editor "perfecto".
Básicamente.
¿Que es Sublime Text 2?Es un editor de texto multi-plataforma (Windows,Linux,Mac OS X). Por supuesto tiene su coloreado de código.. y otras cosas típicas de un editor como lo es Notepad++ o TextMate.
¿Porque Sublime Text 2? y no otro...
Es simple, pesa poco (7mb) y es muy potente.. permite la instalación de plugins y snippets.. ademas de ser completamente personalizable. Se dice.. y personalmente lo afirmo que es mejor que TextMate..
Descargar Sublime Text 2
Si te he convencido para probarlo puedes descargar su versión "UNREGISTRED" que no te limita a nada.. sin mas muestra un mensaje que dice.. "Cómprame" cada 9 guardados de archivo..
http://www.sublimetext.com/
Atajos
Selección múltiplePulsado 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 etc..
Pulsando Ctrl + R, puedes encontrar los metodos/funciones de tu documento.
Si pulsamos Ctrl + G, y escribimos un numero, nos llevara a la linea con ese numero.
Si al pulsar Ctrl + P escribimos #, nos mostrara 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".
* Puedes ver mas atajos en la siguiente url. Si usas windows solo tienes que cambiar el símbolo ⌘ por Ctrl.
https://gist.github.com/1207002
Snippets
Aunque, Sublime Text 2 ya viene con algunos snippets integrados, podemos fácilmente crear mas de ellos y específicos para nosotros.Por ejemplo, para crear un snippet que inserte la ultima versión de jQuery no hace falta mas que ir a Tools -> New Snippet... Ahí se nos abrirá un documento nuevo de este estilo:
<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>source.python</scope> -->
</snippet>De ahí hace falta solo modificar el contenido entre <![CDATA[ y ]]>, con el texto que queramos insertar.
Después des-comentar la linea <tabTrigger></tabTrigger> y cambiar "hello" por la palabra clave sera cambiada por el texto al pulsar Tab.
Existen opciones adicionales como <scope>source.python</scope> que definirán donde se podrá activar el snippet. Si por ejemplo, lo des-comentamos y cambiamos source.php o text.html solo se ejecutar en PHP o en HTML respectivamente.
<snippet> <content><![CDATA[ <script lang="javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> ]]></content> <!-- Optional: Set a tabTrigger to define how to trigger the snippet --> <tabTrigger>includejquery</tabTrigger> <!-- Optional: Set a scope to limit where the snippet will trigger --> <scope>text.html</scope> </snippet>
Por ejemplo, este snippet, se ejecutar al escribir includejquery y pulsar Tab, y incluirá la ultima versión del .js de jQuery.
* Para editar un snippet, debemos ir a Preferences -> Browse Packages.. de ahí entrar en la carpeta "User", buscar el nombre bajo el cual lo hemos guardado y arrastrarlo a Sublime Text 2.
* HAY MUCHA MAS INFORMACIÓN y UTILIDADES sobre los snippets, su funcionamiento y sus etiquetas. Para verla puedes usar la siguiente dirección url:
Leer mas...
He creado una serie de snippets.. algunos provienen de temas populares del subforo de PHP en EHN como lo es Pequeños trucos en PHP
Pueden descargarlos de aquí:
ehnSnippets.zip
md5: 16e0df89b8030bf2bcee1d975773cf2c
Tamaño: 3,48kb (Comprimido) / 32kb (Descomprimido)
| Lenguaje | Activación | Descripción |
| PHP | desdehasta | Función creada por WHK para encontrar/recoger un string en otro. |
| PHP | mysqlconnect | Imprime automaticamente las funciones mysql_connect() y mysql_select_db(). |
| PHP | nocache | Imprime varios headers PHP para evitar el cache de los navegadores. |
| PHP | bcaptcha | Genera el código de un captcha básico de 6 letras/números. |
| HTML | genhtml | Genera un documento básico XHTML 1.0 nuevo. |
| HTML | genhtml5 | Genera un documento básico HTML preparado para HTML5 |
| JS | includejquery | Incluye la ultima versión de jQuery mediante tag <script>. |
| JS(jQuery) | $ready | Imprime el onDocumentReady de jQuery automáticamente. |
Instalación de Sublime Text 2\Data\Packages\User
Plugins
Para empezar, hay que instalar el "Control de Paquetes" de ST2. La razón es que lo trae por default y hay que definir el sitio de donde los va a descargar.Para ello, nos vamos a View -> Console y ahí ponemos
import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())Después, podemos pulsar Ctrl + Shift + P, escribir Install y pulsar ENTER. Se os mostrara una serie de plugins que se pueden instalar.
Emmet
Anteriormente llamado ZenCoding... Este es uno de mis favoritos y el de otros también xD.Al instalarlo, en cualquier documento de texto podemos escribir por ejemplo:
#mimenu>ul>li*5Al pulsar
<div id="mimenu">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>* Podéis buscar más información sobre Emmet en Google. Tiene mucha mas sintaxis que esto.Prefixr
Nos permite hacer más compatible nuestro código CSS con todos los navegadores. Seleccionamos el código CSS que queramos procesar, pulsamos Ctrl+ALT+X y nos transformará el código automáticamente.Ejemplo:
body {animation: slide 1s alternate;}Al pulsar Ctrl + Alt + X obtendremos:body {-webkit-animation: slide 1s alternate;
-moz-animation: slide 1s alternate;
-ms-animation: slide 1s alternate;
-o-animation: slide 1s alternate;
animation: slide 1s alternate;}Alignment
Este plugin es para los que lo tienen que tener todo ordenadito y perfectamente visible.Ejemplo:
<?php $var = 'lalala'; $omsadsdasdadg = 'daskjdsajkfafhafa'; $a = 'a'; ?>Al seleccionarlo y pulsar, Ctrl + Alt + A se convertirá a:
<?php $var = 'lalala'; $omsadsdasdadg = 'daskjdsajkfafhafa'; $a = 'a'; ?>
Fetch
Es un plugin que permite descargar contenido remoto y pagarlo en nuestro documento.Al instalar el plugin, podemos configurarlo o utilizarlo mediante la combinación de teclas Ctrl + Shift + P, escribiendo Fetch y eligiendo ya sea la opción "Fetch" o "Fetch: Manage remote files".
En Fetch, podemos elegir archivo simple o varios archivos (paquetes/frameworks) mientras que en "Fetch: Manage remote files" podemos configurar los archivos remotos. Por defecto viene con jQuery y html5_boilerplate.
SFTP
Es como un FTP integrado en SublimeText 2. Para utilizarlo, después de instalar el plugin, debemos reiniciar ST2. Una vez reiniciado, nos vamos a File -> SFTP -> Setup Server. Ahí podemos indicar los datos de nuestro server. Por ejemplo, un archivo básico podria ser:{
// sftp, ftp or ftps
"type": "ftp",
"sync_down_on_open": false,
"host": "ftp.miservidor.net",
"user": "miusuarioftp",
"password": "mipassowordFTP",
"port": "21",
"remote_path": "/",
//"file_permissions": "664",
//"dir_permissions": "775",
"connect_timeout": 30,
}Una vez editado, guardamos el archivo con el nombre que queramos y nos vamos a File -> SFTP -> Browse Server. Ahí elegimos el nombre del archivo que acabamos de guardar y se nos conectara automáticamente. Permite la edición en tiempo real, borrar y cambiar de nombre..ColorPicker
Mediante el atajo Ctrl + Shift + C, permite abrir el tipo seleccionador de color de Windows/Linux/OS X. Inserta los values tipo HEX (#FFFFFF).TrailingSpaces
Aveces al escribir codigo nos dejamos espacios en blanco, que sobran y no son necesarios. Este plugin lo que hace es eliminarlos.Hay un pequeño problema y es que tiene un conflicto con Sublime Text 2, que por defecto la combinación Ctrl + Shift + T abre el ultimo documento. Asi que lo que hay que hacer es ir a Preferences -> Key Blindings User, y si esta vació, añadir esta linea:
[
{"keys":["ctrl+alt+k"], "command": "delete_trailing_spaces" }
]En caso de que no este vació, añadir esto a la ultima linea:{"keys":["ctrl+alt+k"], "command": "delete_trailing_spaces" }Esto hará que se active pulsando Ctrl + Alt + K.PD: Podemos automatizar esto al guardar los archivos, cambiando en Preferences -> Settings - Default,
el "trim_trailing_white_space_on_save": false, por true.
Diccionarios
Hasta la version 2.0 final no era posible utilizar diccionarios con acentos o letras como la ñ. La razón era la pobre implementación de esta funcionalidad. Ahora en la versión 2 final se ha solucionado este fallo y podemos utilizar un diccionario español.La instalacion y uso son muy faciles. Simplemente descargamos el diccionario español (.txt, .dic y .aff) desde la siguente pagina web y los instalamos en ST2 / Data / Packages / User / Diccionarios (opcional). Una vez instalados, podemos selecionarlo desde View -> Dictionary -> User -> [Lenguaje] y activarlo mediante View -> Spell check o la tecla F6.
Diccionarios para ST2
Temas
Aunque el tema de ST2 esta muy bien, quizás haya gente a la que la gusta mas el blanco o sus temas de Windows/Linux/OS X no les cuadren con ese color. Yo también prefiero el tema SODA que es de un color tirando a beige.Para instalarlo hay que ir a la siguiente dirección, descomprimir y meter la carpeta en ST2 / Packages.
Una vez hecho, debemos ir a Preferences -> Settings - Default y encontrar la linea "theme": "Default.sublime-theme", por el nombre de nuestro nuevo tema que en este caso seria "theme": "Soda Light.sublime-theme"
Tema SODA para ST2
Esquemas de color
Igual que el tema, el esquema de color (color scheme) es oscuro. Yo prefiero el blanco y por tanto tiro a por uno llamado Github. Para instalar esquemas de color no hace falta mas que pulsar Ctrl + Shift + P, escribir Install, y en el cuadro de busqueda poner scheme. Saldran unos cuantos resultados. Una vez selecionado se instalara automaticamente despues de lo cual para activarlo solo deben ir a Preferences -> Color Schemes y selecionar el vuestro.Bueno, espero que os haya sido útil.
Saludos
Comentarios
Publicar un comentario