Bueno, decir que he creado este tema aquí porque el tema ira mas bien sobre plugins, trucos y tips de desarrollo web mas que de otros lenguajes.
Bueno..
Básicamente...
¿Que es Sublime Text 2?
Es un editor de texto multi-plataforma (Windows,Linux,Mac OS X). Por supuesto tiene su coloreador 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 (http://es.wikipedia.org/wiki/Snippet).. 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/2
Por supuesto también puedes buscarte un serial/crack que registre la versión. Pero si te gusta y tienes algún que otro dolar de sobra puedes comprarlo por 59$.
Atajos
Selección múltiple
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 y 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:
http://sublime-text-unofficial-documentation.readthedocs.org/en/latest/extensibility/snippets.html?highlight=snippets
Plugins
Sin duda esta es una de las mejores partes de Sublime Text 2.
En Sublime Text 2, esto se llama Control de Paquetes. Para activarlo, deben poner lo siguiente en la consola y reiniciar el programa. Para abrir la consola nos vamos a View -> Show Console. Ahí pondremos lo siguiente.
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.
Algunos Plugins Útiles
Emmet
Este es uno de mis favoritos y el de otros también xD.
Antes llamado Zen Coding, permite agilizar de una manera sorprendente el trabajo que nos lleva escribir código html. Ejemplo:
#mimenu>ul>li*5
Al pulsar TAB, esto automáticamente lo convertirá en,
<div id="mimenu">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
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;}
Code Alignment
Este plugin es para los que lo tienen que tener ordenadito y perfectamente visible todo.
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.
(http://i.elhacker.net/i?i=T1WOC5qjP7cdy_3ISBVYCGVo)
PD: Podemos automatizar esto al guardar los archivos, cambiando en Preferences -> Settings - Default,
el "trim_trailing_white_space_on_save": false, por true.
Clipboard History
Puedes manejar el historial de tu portapapeles y así no tener que salirse del programa / distraerse para copiar/pegar código =).
Temas
Aunque el tema de Sublime Text 2, me encanta, hay otros igual de buenos. Como SODA (uno de los mas populares).
Para instalar un tema, debemos descargarlo y meter su carpeta en la carpeta "Packages" de Sublime Text 2.
Luego, debemos ir a Preferences -> Settings-Default, buscar
"theme": "Default.sublime-theme",
y cambiar el Default por el nombre de nuestro tema.
Podemos descargar el tema Soda desde esta url:
https://github.com/buymeasoda/soda-theme/
(http://d2o0t5hpnwv4c1.cloudfront.net/1038_sublime/theme.png) (http://d2o0t5hpnwv4c1.cloudfront.net/1038_sublime/theme.png)
Diccionarios
No lo he mencionado en los anteriores posts porque en la build 2181 tenia un problema y no aceptada caracteres como la ñ o acentos (í ó etc..).
En la versión final (2) parece que ha sido solucionado así que os dejo el sitio donde podéis descargarlos y la carpeta donde hay que meterlos.
https://github.com/SublimeText/Dictionaries
Deben descargar tanto el .dic como el .aff y .txt.
Una vez descargados los metemos en Sublime Text 2/Data/Packages/User/Diccionarios(opcional).
Cerramos ST2, lo volvemos a abrir y desde el menú seleccionamos "View -> Dictionary -> User -> [Lenguaje]".
Para activar/desactivar debemos ir a View -> Spell Check o simplemente pulsar F6.
Contribuir
Este post lo he creado para que puedan contribuir con sus aportaciones. Ya sean snippets, temas, plugins, atajos y otras cosas. Siéntete libre de compartir.
Si quieren saber como crear un plugin pueden visitar este sitio:
http://net.tutsplus.com/tutorials/python-tutorials/how-to-create-a-sublime-text-2-plugin/
PD: Ultima actualizacion: 30/11/2012 - Añadidos plugins y diccionarios al post principal.
Saludos y gracias por leer.
Mas Plugins Útiles.FetchEs 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.
SFTPEs 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..
Mas Snippets.He creado una serie de snippets.. algunos provienen de temas populares del foro como lo es
Pequeños trucos en PHP (http://foro.elhacker.net/php/pequenos_trucos_en_php-t152467.0.html).
Pueden descargarlos de aquí
https://sites.google.com/site/drvymonkey/home/ehnSnippets.zip?attredirects=0&d=1
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. |
PARA INSTALARLOS, solo deben descomprimir la carpeta en el siguiente directorio:
Instalación de Sublime Text 2\
Data\
Packages\
UserSaludos
No sé porque este post pasa desapercibido. Lo estoy usando desde antes de ayer y es sin duda el mejor editor de texto que hay.
Poco mas y se puede usar como IDE.
Yeah, ¡mola!
No lo conocía... :D
Pero, solo me subraya en lila xD (No es que haya mirado como cambiarlo, es posible?)
CitarPero, solo me subraya en lila xD (No es que haya mirado como cambiarlo, es posible?)
Explícate quieres cambiar los colores de syntax o el que ? xD
Unos addons mas.ColorPickerMediante el atajo Ctrl + Shift + C, permite abrir el tipo seleccionador de color de Windows/Linux/OS X.
Inserta los values tipo HEX (#FFFFFF).
TrailingSpacesAveces 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.
(http://i.elhacker.net/i?i=T1WOC5qjP7cdy_3ISBVYCGVo)
PD: Podemos automatizar esto al guardar los archivos, cambiando en Preferences -> Settings - Default,
el
"trim_trailing_white_space_on_save": false, por
true.
DiccionariosNo lo he mencionado en los anteriores posts porque en la build 2181 tenia un problema y no aceptada caracteres como la ñ o acentos (í ó etc..).
En la versión final (2) parece que ha sido solucionado así que os dejo el sitio donde podéis descargarlos y la carpeta donde hay que meterlos.
https://github.com/SublimeText/Dictionaries
Deben descargar tanto el .dic como el .aff y .txt.
Una vez descargados los metemos en
Sublime Text 2/Data/Packages/User/Diccionarios(opcional).
Cerramos ST2, lo volvemos a abrir y desde el menú seleccionamos "
View ->
Dictionary ->
User -> [Lenguaje]".
Para activar/desactivar debemos ir a
View ->
Spell Check o simplemente pulsar F6.
Saludos
Hace dos días empece a probarlo ahora que por fin tengo tiempo libre... y DIOS XD parezco un niño pequeño el día de reyes :P, cada plugin que instalo, cada cosa que descubro del programa me produce un efecto orgasmico xDDDDD.
En fin... si se configura bien a tus gustos, para mi este editor es el editor definitivo.
Luego pondré mi configuración :P
Quería preguntaros a los que lo usáis, ¿qué tal para la programación en hoja de estilos (CSS3)? ¿Tal vez exista algún plugin?
A ver si saco yo también tiempo y le echo un vistazo.
Lo he instalado, y queria ponerlo en español, pero no tengo el directorio "/Data/Packages/User/Diccionarios(opcional)."
El diccionario no es para ponerlo en Español, es simplemente para que corrija las faltas ortográficas.
Aquí tenéis podéis bajaros el diccionario:
http://extensions.services.openoffice.org/en/dictionaries
Respecto a CSS3 estoy seguro que habrá plugins muy decentes, aquí tienes alguno Snippets: https://github.com/totallyvinny/Sublime-Text-2-CSS3-Snippets
Vale, ya me he dado cuenta de que solo es para que te corrija los errores, muchas gracias.
Hola,
Cita de: Caster en 22 Septiembre 2012, 17:45 PM
Lo he instalado, y queria ponerlo en español, pero no tengo el directorio "/Data/Packages/User/Diccionarios(opcional)."
He metido entre parentesis (opcional) porque el directorio by default no existe. Y por si querias tenerlo mas organizado, crearlo.
CitarQuería preguntaros a los que lo usáis, ¿qué tal para la programación en hoja de estilos (CSS3)? ¿Tal vez exista algún plugin?
A ver si saco yo también tiempo y le echo un vistazo.
Trae autocompletado compatible con CSS3. Pero no esta a nivel de otros como dreamweaver xD.
PD: A todo esto.
NO os recomiendo istalar plugins como Live CSS y otros que modifican directamente los color schemes. La razon es que provocan errores (mala programacion/encoding) y Sublime Text se os queda en blanco y negro... xD
Saludos
Acabo de instalar Zen Coding, reinicie el programa, pero el plugin no me funciona, no hace nada.
Edtio: Ya me funciona correctamente, no sabia que tecla habia que puslar para que transformase el texto.
PD: Respecto a ZenCoding (lo publique en mi web pero se me olvido editarlo aqui.)
CitarATENCIÓN
Zencodng tiene una incompatibilidad con los teclados españoles y la paréntesis de llave ( } ). Lo que pasa es que comenta automáticamente la linea en la que estáis al pulsar }. Para solucionar esto, debemos ir a
Preferences -> ZenCoding -> Bindings -> Key Bindings – Default
y ahi buscar la linea "keys": ["ctrl+alt+period"]}, y cambiar "period" por otra cosa. En la versión actual esta en la linea 215.
Saludos
Otro que es exquisito, sobre todo para gente que trabaja en windows es: Clipboard History.
Aquí tenéis el rep:
https://github.com/kemayo/sublime-text-2-clipboard-history
Lo que hace es pulsado ctl+alt+v te muestra el historial del portapapeles, una autentica pasada :D
Cita de: WarGhost en 22 Septiembre 2012, 18:51 PM
Otro que es exquisito, sobre todo para gente que trabaja en windows es: Clipboard History.
Aquí tenéis el rep:
https://github.com/kemayo/sublime-text-2-clipboard-history
Lo que hace es pulsado ctl+alt+v te muestra el historial del portapapeles, una autentica pasada :D
Instalado y probado, una maravilla.
Perdonad el doble post pero queria hacer una aportacion de un documento PDF con abreviaturas para el Zen Coding:
http://www.aether.ru/files/zencoding.pdf
Saludos
Hola a todos!
Llevo muchos años en el desarrollo de páginas web y os puedo decir que esta herramienta es brutal, no sólo por su sencillez, si no sobre todo cuando lo combinas con zen coding (usando simplemente el Tab) y los snippets.
Desgraciadamente, he tenido que quedarme con el Notepad++ (mira que quiero jubilarlo, pero el cabrito va muy bien y es muy completo), por un motivo muy importante para mí: NO PERMITE OTRA CODIFICACIÓN QUE NO SEA UTF-8. En mi empresa, por la plataforma que tenemos, sólo podemos trabajar con ANSI, por lo que no puedo utilizar el Sublime Text 2 (hay mucha gente quejándose de ello y ni siquiera existe un Road Map a la vista para poder grabar en otros formatos)
Aquél que no tenga este problema, le guste el diseño minimalista (personalmente me encanta) y dedique un poco de tiempo a estudiar las abreviaturas y los atajos de teclado... VA A FLIPAR. Yo lo hice este fin de semana entero y me quedé así :o
Un saludo a todos y gracias por el post!
Solo mencionar que ZenCoding tal y como se le conoce ya no va a seguir desarrollándose. La alternativa es Emmet. Es tan simple como Ctrl + Shift + P -> Remove Package -> Zen Coding. Ctrl + Shift + P -> Install Package -> Emmet.
Es básicamente lo mismo pero con mas opciones y algo mejor implementado.
Este es el repositorio en github.
https://github.com/sergeche/emmet-sublime
Saludos
Gracias drvy! Prometo que miraré lo del Emmet ;-)
Por otro lado, y para quien quiera saberlo, este fin de semana un amigo me hizo ver que realmente se puede grabar en los principales sistemas de codificación. Lo único que tienes que hacer es dar a "Save As" y elegir la codificación.... y si sueles elegir uno en concreto, como yo el ANSI, sólo tienes que cambiarlo en los parámetros generales del SublimeText (yo ya lo tengo puesto que guarde siempre a Windows 1152 ;-)
Un abrazo a todos!
Hola a todos! Soy novata en este mundillo de programación web y leyendo vuestro hilo he decidido utilizar este editor, pero no he encontrado la forma de ejecutar el codigo php. :huh:
Por favor ¿podríais ayudarme?
Gracias y un saludo