sábado, 13 de diciembre de 2014

'Sublime Text' es sublime.

     Sublime es un editor de texto para diseñadores web. Para mí el mejor. Lo he descubierto recientemente, pero en el poco tiempo que llevo utilizándolo se ha convertido en una herramienta imprescindible.

     El autocompletado de código es increible. Los colores utilizados para las etiquetas, variables, funciones e instrucciones condicionales y bucles es muy acertada e identifica a estos elementos a golpe de vista.
Su complemento perfecto, diría yo, es Firefox pues puedes ver lo que estás haciendo y como queda en un navegador al instante. Si

     Solo le falta una mínima compilación. Por lo menos que te indique cuando falta un punto y coma al finalizar una instrucción cuando estás picando código Javascript o PHP. Te podría indicar si te falta un punto en la unión de cadenas en PHP o el signo más en Javascript.
Un error que tampoco contempla es cuando haces referencia a un objeto en Javascript que todavía no has creado. Esto último reconozco que es muy difícil de controlar y contemplar pues se  puede hacer referencia a ese objeto desde cualquier otro documento que no estuviera en la misma ruta que el archivo. Esto sí lo controlan los IDE tradicionales como NetBeans puesto que todos los archivos que se van a utilizar están en la misma carpeta.

     Pero para el que no lo conozca, pasemos a su configuración:
     1º Después de descargarlo (http://www.sublimetext.com/3) y ejecutarlo por primera vez este es su aspecto original:

     2º Cuando abrimos un par de archivos vemos como se colocan por pestañas:

     3º Instalamos 'Package Control' para Sublime Text 3 desde https://sublime.wbond.net/installation#st3 Tras copiar el código, hay que ir al editor, pulsar en 'View' → 'Show Console', pegar el código y pulsar intro. Mientras está instalando los plugins en la parte baja verás un signo igual yendo de un lado para otro entre unos corchetes.

     4º También hay que activar el 'Side Bar' en 'View' → 'Show Side Bar'. Y reiniciamos el editor.
Su aspecto actual sería este:

     5º Ahora, en 'Preferences', pinchamos en 'Package Control', elegimos 'Install Package' y buscamos 'SideBarEnhancements'.
 Ahora, tras abrir alguna carpeta en el 'Side Bar' podremos ver las nuevas opciones, por ejemplo, 'Open in Browser'.

     6º También podremos abrir varias ventanas en columnas o filas desde 'View' → 'Layout' y seleccionar la vista que más nos guste. A mí en particular me gusta tener 2 filas. El aspecto sería este:


     Nota: Post con 12 consejos para ampliar Sublime: http://unadocenade.com/una-docena-de-plugins-indispensables-para-sublime-text/ (algunos ya están aquí)

     Pero por si esto no fuera suficiente, hay más. Se puede configurar la ruta de un servidor local y a la hora de ejecutar scripts PHP se va directamente a http://localhost/ruta/archivo.php y ejecuta el script. Para hacer esto tenemos que cambiar la ruta de localhosts en el fichero de configuración de tu servidor Apache2.

En XAMP abrimos y clic en el botón config de apache httpd.conf. Buscamos las líneas DocumentRoot "C:/xampp/htdocs" y <Directory "C:/xampp/htdocs">
 Las comentamos colocando una # y volvemos a escribirlas con la ruta deseada para el localhost.
     Ahora en el explorador de archivos del 'Side Bar' pinchamos sobre un archivo y nos vamos a la opción 'Project' → 'Edit Preview URLs' en el archivo que se abre en blanco llamado 'SideBarEnhancements.json' escribimos:
{
"C:/xampp/htdocs":{
"url_testing":"http://localhost",
"url_production":"http://127.0.0.1"
}
}

Y después de eso, como tenemos varios paquetes ya intalados y los atajos convencionales han chafado al atajo 'F12' para abrir el documento escribimos nuestro propio atajo. Nos vamos a 'Preferences' → 'Key Bindings – user' y en el archivo 'Default (Linux).sublime-keymap' escribimos esto:
[
    { "keys": ["ctrl+shift+o"],
        "command": "side_bar_open_in_browser" ,
        "args":{"paths":[], "type":"production"}
    }
]
     En mi caso el contenido de los dos ficheros es este:

     Por lo que vemos Sublime Text es muy modulable y configurable perfecto para programadores web. En el próximo post explicaré porque Firefox es el complemento casi perfecto para Sublime Text.

     @eltiopacote
Índice de entradas en: http://www.pacovalverde.es/indice

1 comentario: