Desarrollo Web con Sublime Text

Hace bastante tiempo cambie mi IDE de desarrollo (Dreamweaver) por Sublime Text, en su version 2, ahora ya podemos disfrutar de la version 3, pero eso da para escribir otro post con las nuevas caracteristicas y diferencias.

Que es Sublime Text 2?

sublime-text-2-iconSublime Text, en terminos simples, es un editor de texto ligero, pensado desde un inicio en la velocidad, haciendolo uno de los editores de texto más rápido y facil de usar. Además de la velocidad se tiene más de 1000 de plugins adicionales y todas de codigo abierto, con una comunidad de desarrolladores que día a día contribuyen con nuevos plugins.

Sublime Text puede ser utilizado para multiples lenguaje de programacion, no solo para desarrollo Web. Sabemos de sobremanera como trabaja un IDE de desarrollo y las ventajas que ofrece, entonces porque cmabiarnos a Sublime Text, si estamos cómodos con nuestro IDE favorito ? Ahora les comentare las diferencias y ventajas que ofrece Sublime Text.

Saltar a cuelquier lugar

go_toSublime Text tiene una característica llamada “go to anything”, el cual despleiga un panel que permite buscar archivos, metodos, variables, funciones e ir directamente a ciertas líneas de código.

Para acceder a este panel lo único que hay que hacer es precionar la combinación de teclas: CTRL + P, donde se podrá escribir el criterio de búsqueda y a medida que vaya introduciendo el texto, se iran filtrando los resultados de busqueda, esto hace que sea tan rápido encotrar algo, que no se necesita saber de memoria al estructura de carpetas, solo el nombre del archivo.

En la busqueda de archivos, solo hay que hacerlo a travéz de los nombre, pero si queremos buscar dentro de los archvios, existen dos maneras, CTRL + P nos permitira realizar busquedas de funsiones, variables y lineas de codigo especificas, para lo cual utilizaremos el simbolo @ para las funciones, y el simbolo # para las variables y el signo : (dos puntos) para saltar a una determinada línea de código.

Para realizar estas busquedas, no es necesario que el archivo este abierto, por ejemplo si quiere ir a la clase CSS home_page del archivo style.css, se puede teclear lo suguiente en el panel.

goto2Multi cursor

Una de las características que más me llamo la atención y que lo utilizo con relativa frecuencia es esta, la de multi cursor. Ésta característica le permite hacer multiples cambios al mismo tiempo, por ejemplo, si se ha escrito un par de lineas con una variable, pero se desea cambiar el nombre de la variable, en lugar de buscar la funsión de Buscar y Reemplazar se puede utilizar de forma rápida cursor multiselector para buscar la variable y cambiar todos los nombres al mismo tiempo.

multicursorLa combinacion de teclas CTRL + D nos permitira seleccionar una palabra (variable) sobre la que este el cursor, si volvemos a presionar la conbinacion de teclas CTRL + D volvera a buscar la siguiente coincidencia creando dos cursores. Esto hace que sea muy facil para agragar variables o funciones multiples, y lo mejor todo al mismo tiempo.

Gestión de Proyectos

Cuando se trabaja en varios proyectos, la gestión de éstos es fundamental para no cometer el error de modificar archivos que no pertenecen al proyecto. La gestión de proyectos en Sublime Text es muy fácil, se puede agregar carpetas a los nuevos proyectos y Sublime Text va a generar un archivo del proyecto automáticamente para ayudar con la administración.

La mejor parte de la administracion de proyectos con Sublime Text es el cambio rapido que se puede hacer de un proyecto a otro (si se tiene que cambiar de un proyecto a otro, entonces Sublime Text es el indicado).

Para poder utilizarlo, solo se debe presionar la combinacion de teclas CTRL + ALT + P y una ventana listando los proyectos sera mostrado, desde aqui se puede seleccionar cualquier otro proyecto. Cuando se selecciona un nuevo proyecto todos los archivos actuales se cerraran y serán sustituidos con el nuevo proyecto. Pero lo mas interesante es que Sublime Text recordará que archivos estaba abiertos para mostrarlo nuevamente la siguiente vez que se seleccione el proyecto.

proyectosHaciendo nuevamente enfasis en la velocidad de Sublime Text, el cambiar de proyecto esta al alcance de un par de teclas y sin la perdida de los archivos que se estaba editando.

Personalización de cualquier caracterisitica

Si bien la mayoria de los IDE de desarrollo permiten modificar algunas características, en el caso de Sublime Text la personalización avarca a casi cualquier característica.

Se debe acceder a Preference > Setings – Default, donde se encontrará con la enorme lista de valores que se pueden cambiar, entre ellas están el tamaño de la fuente, tipo de letra, la combinación de colores, los números de líneas de pantalla, tamaño de la tabulación, márgenes, etc., etc., etc.

Tabuladores y Espacios

Cuando se trabaja en equipo, una de las cosas importantes es mantener el codigo limpio, de modo que sea mas facil su lectura. Desde el menu se puede seleccionar el numero de espacios que se utilizara.

tabulacionGuardado automatico

Se puede hacer que Sublime Text guarde automáticamente los archivos una vez que realice cambios en ellos (ni vien se pierta el foco), todo lo que se debe hacer es añadir (o modificar) una nueva propiedad en las preferencias de usuario. Por defecto se establece en “false”.

auto_saveAtajos de teclado

Además de tener la capacidad de modificar la forma en que el IDE funcionará, también se puede cambiar los atajos de teclado. Esto se lo hace mediante la navegación a Preferences -> Key Bindings – User .

Paquetes

Como se habia mencionado con anterioridad, una de las razones por las que Sublime Text es elegido, es la enorme cantidad de paquetes que están disponibles. Todos los paquetes que se instalan son como plugins que extienden la funcionalidad de Sublime Text.

El primer paquete que necesita instalar es el “Package Control ” (https://sublime.wbond.net). Este permite instalar / eliminar otros paquetes directamente en el nucleo de Sublime Tex. Con el uso de este plugin, se puede instalar un montón paquetes en cuestión de segundos.

package_controlAlgunos de los paquetes esenciales que se debe utilizar son:

Sublime Prefixr

Este paquete proporciona prefijos de navegador automatico para algunas propiedades CSS, un generador de degradez de color, sombras, bordes de radio, etc,etc.

Sidebar Enchancements

Este paquetes mejora la usabilidad de la barra lateral, dandole más opciones a los nuevos archivos, tambien permite mover archivos, copiar archivos y abrir archivos en otro programa, etc.

Sublime Linter

Este paquete hará resaltar código con errores en el editor de texto. Por ejemplo, si se salta un punto y coma en un archivo PHP, entonces Sublime Linter destacará esta fila para hacer notar que se ha cometido un error en esta línea.

Siblime Linter reconoce errores en los sigueintes lenguajes:

  • C/C++ – lint via cppcheck
  • CoffeeScript – lint via coffee -s -l
  • CSS – lint via built-in csslint, este requiere nodeJs
  • Haml – via haml -c
  • HTML – lint via tidy
  • Java – lint via javac -Xlint
  • Javascript – lint via built en jshint
  • Lua – via luac
  • Objective-J – lint via built-in capp_lint
  • Perl – lint via Perl
  • PHP – via php -l
  • Puppet – via puppet parser validate
  • Python
  • Ruby – via ruby -wc
  • XML – via xmllint

jQuery

Este paquete, viene con varios fragmentos de código listo para obtener ayuda con su desarrollo jQuery.

HTML5

Este paquete de HTML5 viene con fragmentos para el desarrollo HTML más rápido.

SVN

La integración SVN con todas las funciones de Sublime Text 2, proporciona una manera más rápida y mejor para trabajar con Subversion.

Automatic BrowserRefresh-sublime

Si se trabajando en un “montón” de cambios en hojas de estilo CSS (como es mi caso), entonces normalmente se tendría que ver la página, cambiar al IDE, realizar los cambios, guardarlos, volver al navegador, actualizar el navegador (F5) solo para ver los cambios. Con este paquete para Sublime Text 2, se puede saltar del paso de guardar los cambios y automáticamente actualizar el navegador para ver los cambios al instante.

Bootstrap

Este paquete viene con varios fragmentos de codigo lsitos apra ser utilizado concuntamente con este Framework.

Color Picker

Este paquete permite desplegar la apleta de colores.

File Diffs

Este paquete permite comparar archivos que se encuentre abierto (en los tabs).

Este editor de texto, es completamente gratis, sin ningun tipo de restricción ni limite de tiempo de uso, pero si se quiere contribuir con el proyecto, entonces se peude comprar la licencia que vale 59 Dolares.

Anuncios