Hola taringueros, en esta ocasión les mostrare como convertir este editor en una gran herramienta, muy útil, se trata de Sublime text
En mi post anterior sobre programacion vimos las caracteristicas de este editor, si no las vieron pueden ir al post dando click .
Este editor es capaz de soportar la sintaxis de muchos lenguajes de programacion
¿Como haremos que este editor sea tan útil?, Sublime Text es un excepcional editor de textos que aporta muchas características útiles a la hora de programar o editar código. El editor está cargado de funcionalidades útiles y cómodas desde el punto de la usabilidad y eficiencia, utilizando el método geek y convirtiendo nuestro trabajo de edición de texto en una experiencia cada vez más sencilla y agradable, a medida que vamos aprendiendo a utilizar todas sus funcionalidades
, y serán explicadas a continuación
Pestañas
Al igual que otras aplicaciones de la actualidad, Sublime Text soporta pestañas, una característica que popularizaron los navegadores web. En cada una de estas pestañas, se muestra una x para cerrar la misma, que cambia a un circulo gris cuando se han escrito cambios en el archivo y no se han guardado todavía.
Autocompletado
Sublime Text tiene resaltado a color de sintaxis para facilitar la lectura de código, así como numerado de línea. También muestra un pequeño índice gráfico a la derecha, por el cuál podemos desplazarnos rápidamente a golpe de clic del ratón.
Pero quizás una de las características que más se agradecen (sobre todo a los usuarios que no tienen buena memoria), es el autocompletado. Esta funcionalidad nos ayudará a recordar como se escriben ciertos comandos, funciones o textos del lenguaje o marcado en el que nos encontramos.
Además, en muchos lenguajes (como por ejemplo, PHP), Sublime Text nos facilita el orden de los parámetros, por si no los recordamos, algo muy común en PHP con funciones como strpos o explode, donde el orden de los parámetros es diferente.
Selecciones múltiples
Una de las características más interesantes de Sublime Text es su flexibilidad para realizar tareas comunes de una forma sencilla y rápida. Por ejemplo, si seleccionamos una palabra con el ratón (en el ejemplo, len), pulsando CTRL+D podremos ir seleccionando las siguientes coincidencias y modificarlas todas a la vez:
También puedes utilizar la combinación CTRL+K para saltarte alguna selección que no quieras utilizar en el reemplazo.
Ediciones múltiples
Seleccionando varias líneas y utilizando la combinación de teclas CTRL+SHIFT+L puedes editar varias líneas a la vez, muy útil para cambios paralelos repetitivos:
Acceso directo a métodos o funciones
Es posible acceder directamente a métodos o funciones de un archivo con código fuente, lo cuál es muy interesante cuando nuestro código alcanza grandes proporciones. Se puede hacer pulsando la combinación de teclas CTRL+R, y escribiendo a continuación el nombre de la función:
Auto-cerrado de etiquetas
Si nos acostumbramos a utilizarla, la combinación de teclas ALT+. puede ayudarnos a cerrar rápidamente cualquier etiqueta HTML que tengamos abierta de forma instantánea:
Acceder a una línea concreta
Existe un atajo mediante el cual es posible saltar a una línea concreta de un archivo, simplemente pulsando la combinación de teclas CTRL+G y escribiendo a continuación el número de la línea deseada.
Combinaciones de teclado
Existen muchas otras combinaciones de teclas que convendría conocer, ya que son acciones que utilizaremos frecuentemente:
Code-folding
Sublime Text también proporciona la posibilidad de plegar o desplegar bloques de código, tanto en HTML como en lenguajes de programación. De esta forma, podemos centrarnos en la parte del código que nos interesa sin desorientarnos o perder el foco en lo que no tenemos intención de tocar.
Para utilizar esta funcionalidad, basta con mover el ratón hacia la parte izquierda del código (donde aparecen los números) y pulsar sobre las flechas para contraer o desplegar el código:
La zona reducida se mostrará con un pequeño símbolo ... que indica que hay más contenido en su interior.
Búsquedas
A medida que el código que manejamos se hace más grande, necesitaremos realizar operaciones de búsquedas de la forma más rápida posible. Para ello, pulsamos CTRL+F y nos aparecerá un pequeño panel donde escribir nuestra búsqueda. Esto resaltará en color la primera coincidencia y en color «hueco» las coincidencias sucesivas a medida que escribimos la palabra a buscar.
Por otro lado, si lo que queremos es realizar una búsqueda para reemplazar un texto por otro, pulsamos CTRL+H, lo que hará que nos aparezca el mismo menú, pero esta vez preparado para realizar una búsqueda con posibilidad de reemplazo.
Expresiones regulares
Es muy interesante saber que Sublime Text permite realizar búsquedas o reemplazos utilizando Expresiones regulares. Esto es una forma excelente de hacer cambios utilizando patrones no exactos. Para activar el soporte de expresiones regulares simplemente hay que pulsar el primer botón de la barra de búsqueda, simbolizado por los caracteres .*.
Una vez activo, podremos realizar búsquedas o reemplazos utilizando expresiones regulares. En el siguiente ejemplo se ha utilizado la expresión regular d.. que significa «Cualquier texto con una d seguido de dos caracteres cualquiera»:
El mundo de las expresiones regulares es muy amplio, pero es muy útil para automatizar tareas de búsqueda con patrones muy variables o desconocidos. Aquí algunos ejemplos:
Expresiones regulares atómicas
RegEx y su Significado
^texto = Línea que empiece por a
texto$ = Línea que acabe en
. = Cualquier carácter
a* = Cero o más «a»
a+ = Una o más «a»
a|b = Carácter «a» o «b»
= Una vocal minúscula
[^aeiou] = Carácter no vocal minúscula
Expresiones regulares básicas
RegEx = Significado
[a-zA-Z0-9]+ = Letras o números
[0-9]{2} = Cifra de 2 dígitos
[0-9]{1,3} = Cifra de 1 a 3 dígitos
[0-9]A? = Número que puede (o no) acabar en «A»
Expresiones regulares de agrupación (captura)
RegEx, Significado y Valor capturado ($1)
h(.+)a = Textos como: hola, hala, hasta, hora... = ol, al, ast, or...
Nivel ([0-9]+) = Textos como: Nivel 0, Nivel 1, Nivel 2... = 0, 1, 2...
Lo interesante de estas últimas expresiones regulares es que los paréntesis efectúan una tarea de agrupación, capturando el contenido y guardándolo en una variable $1. En el caso de que la expresión regular contenga más paréntesis, irá capturando en variables sucesivas: $1, $2, $3, etc...
Todo esto puede ser muy útil para realizar reemplazos con fragmentos capturados en dichas variables.
Snippets
Tanto con documentos de texto como lenguajes de marcado o etiqueta o código de programación, es muy común encontrarnos en la situación de tener que escribir textos repetitivos frecuentemente, lo que puede resultar algo tedioso y hasta desagradable.
Sublime Text permite crear snippets: pequeño fragmentos de código que puedes expandir a partir de la escritura de un pequeño texto seguido de la tecla TAB, ahorrando así mucho tiempo. En el siguiente ejemplo veremos como crear un sencillo snippet utilizando el texto disparador «hola», que lo expanderá a un texto predefinido más largo.
Creación de un Snippet
Lo primero, nos dirigimos al menú Tools / New Snippet.... Se nos creará un nuevo documento XML con la estructura apropiada para crear el snippet. Esta estructura tiene tres partes que debemos modificar:
1. Etiqueta content
Dentro de la etiqueta content escribiremos el texto expandido. Este texto debe estar rodeado de las etiquetas <[CDATA[ y ]]> para evitar problemas con el escapado. Escribimos el texto en su interior, teniéndo en cuenta que también se puede utilizar el formato ${1:palabra} para que al expandir un texto se seleccione automáticamente esa palabra (y podamos cambiar a las sucesivas pulsando TAB). De esta forma facilitaremos la edición del snippet.
2. Etiqueta tabTrigger
Esta será la palabra que tenemos que escribir y pulsar TAB para expandir. Utiliza palabras lo suficientemente complejas para no escribirlas accidentalmente, pero lo suficientemente sencillas como para resultar cómodas y útiles.
3. Etiqueta scope
Este parámetro (opcional) nos permite especificar si el snippet funcionará sólo en un tipo de archivo concreto, como archivos HTML (text.html) o código fuente Python (source.python), por ejemplo.
Eso es todo. Con esos parámetros especificados tendremos el snippet preparado para funcionar. Guardamos el archivo en la carpeta Data Packages User con el nombre hola.sublime-snippet (debe acabar con la extensión .sublime-snippet).
Listo. Ya podemos probarlo en el editor:
Estas son algunas de las caracteristicas que nos haran el trabajo mas facil, ¿pero que tal si agregamos algunas extras para que sea aun mas facil?
Para ello tenemos los plugins, para comenzar vamos a activar el gestor de paquetes de Sublime text
Para ello vamos a Menu -> View -> Show Console y pegamos el siguiente texto (para Sublime text 3):
import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
Con esto ya tendremos el gestor de paquetes preparado para Sublime Text 3.
Para Sublime Text 2 debemos colocar lo siguiente de la misma manera:
import urllib2,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')
Ahora, cada vez que queramos buscar un paquete en el repositorio para instalarlo, pulsamos CTRL+SHIFT+P y escribimos Install Package. Entonces podremos buscar entre la gran cantidad de paquetes que existen para Sublime Text e instalarlos con un simple click.
De la misma forma, pulsando CTRL+SHIFT+P y escribiendo Remove Package podemos desinstalar paquetes que no queramos utilizar más.
Si lo deseas, también puedes acceder a Package Control Repository para buscar paquetes vía web, categorizados en secciones como nuevos, tendencias, populares, autores u otros.
IMPORTANTE: Asegúrate de instalar plugins compatibles con la versión de Sublime Text que estés utilizando. Si estás utilizando ST3, es posible que no puedas utilizar paquetes diseñados para otra versión.
Editor de configuración
Como ya hemos dicho, uno de los puntos fuertes de Sublime Text es su capacidad de personalización. En el menú Preferences se puede acceder a los archivos de configuración para personalizar ciertas características del editor y/o de sus complementos.
Diferencias entre Default y User
Encontrarás siempre las configuraciones divididas en dos categorías diferentes: Default y User.
Los archivos con el sufijo Default son los que contienen las opciones y parámetros de la aplicación recién instalada y no son modificables. Por otro lado, los archivos con el sufijo User si son modificables, ya que son los que guardarán nuestros cambios, eliminando los valores de Default.
Por ejemplo, en Settings - Default vemos que una de las opciones es «font_size»: 10, si insertamos en Settings - User una línea con «font_size»: 14 comprobaremos que al guardar, el tamaño de la letra cambia.
Los archivos de configuración de Sublime Text realmente son archivos JSON con la extensión .settings, que a efectos prácticos son un archivo JSON que permite comentarios. Si tienes problemas con algún archivo de configuración, puedes validarlos para asegurarte de que están correctamente escritos. Puedes utilizar JSON Validator o JSON Lint.
Esquemas de colores
En el menú Preferences / Color Scheme se encuentran varios esquemas que cambian las combinaciones de colores del editor. Existen desde combinaciones con temas claros a temas más oscuros, como el que viene de serie. El esquema de colores que trae Sublime Text por defecto se llama Monokai.
En los paquetes del repositorio también puedes encontrar muchos otros esquemas de colores y temas instalables, como por ejemplo Flatron, Predawn, Brogrammer o Devastate:
Paquetes o plugins interesantes
Uno de los plugins que mas me ha gustado, es un estilo visual llamado Seti, son colores muy amigables y llamativos, recomendables si te la pasas mucho tiempo programando.
Para instalarlo deben buscar en su Package Control este estilo visual, esta nombrado como Seti_UI, luego deberan editar su configuracion de usuario en Menu -> Preferences -> Settings - User de esta manera:
ColorPicker
También para diseñadores, este paquete permite abrir un panel de elección de color al pulsar la combinación de teclas CTRL+SHIFT+C. Al seleccionar un color y pulsar aceptar, nos establecerá el código hexadecimal, ahorrándonos el tener que utilizar un programa externo para tal fin.
EMMET (Zen Coding)
EMMET (antes conocido como Zen Coding) es un estupendo plugin para Sublime Text que permite aprovechar la sintaxis CSS para ahorrar tiempo en la creación de código HTML.
Por ejemplo, podemos especificar el texto **ul>li*5>strong+em** con el que le indicamos:
-Construye una lista desordenada (ul).
-Que contenga 5 puntos (li*5).
-Que cada punto contenga una etiqueta strong, seguida de em.
Obviamente, esto sólo es un ejemplo. Se pueden construir cosas muchísimo más complicadas con una personalización más potente. La siguiente referencia muestra los operadores existentes que pueden utilizarse y combinarse con EMMET:
OperadoresSignificado
> Hijo (dentro de...)
+ Hermano (al lado de..)
^ Salir de la etiqueta actual
* Multiplicador (repite x veces)
() Agrupador
. Clase
# ID
[attr] Atributos
$ Número de iteración
{} Añadir texto
Para entender mejor estas opciones, prueba con los siguientes ejemplos:
-strong
-ul>li*5>strong{Punto $}+em
-div#header+div#container>div#content+div#menu^+div#footer
BracketHighlighter
Este sencillo paquete nos permite resaltar visualmente el ámbito de la zona donde estamos escribiendo en nuestro código. Así, si nos posicionamos sobre la apertura de una llave o unos paréntesis, se resaltará visualmente donde se cierran.
CSS Snippets
El paquete CSS Snippets contiene una gran cantidad de snippets especialmente diseñados para ahorrar tiempo en el desarrollo de código CSS. Por ejemplo, snippets que permitan crear código compatible con todos los navegadores, utilizando prefijos vendor de características que aún no están implementadas por completo:
Sidebar Enhancements
Otra de las maravillas que hacen que Sublime Text mejore notablemente. En esta ocasión se trata de una implementeación al sidebar del programa, que de normal es quizás demasiado básico. Gracias a este plugin podremos tener todas las opciones que un gestor de archivos necesita, y en un solo lugar, junto a nuestro código.
Desde edición de documentos, hasta búsquedas avanzadas en los directorios, todo lo que pueda hacer un gestor de archivos, es capaz de hacerlo este interesante plugin. Por eso, quizás, está triunfando tanto entre la comunidad de desarrolladores que utiliza Sublime Text como editor de texto.
Sublime Linter
Este plugin recuerda mucho a los grandes IDE, pues su función es realizar tu código en tiempo real, detectando posibles errores y advirtiéndote de los mismos, para que puedas solucionarlos antes de probarlo en vivo. Funciona con varios lenguajes, entre otros PHP, Python, Java…
Es cierto que aún no detecta todos los errores al momento, pero si los más cometidos, como son dejarte algún paréntesis/llave abiertos, olvidarse algún fin de sentencia…y todos esos errores que pueden llegar a ser un quebradero de cabeza para el desarrollador en cuestión.
Search Stack Overflow
Para este plugin espero que sepáis algo de inglés, pero ¿qué desarrollador no ha accedido alguna vez a Stack Overflow? Estoy seguro de que incluso los que no sean desarrolladores lo conocen, pues también se resuelven allí incidencias técnicas, aunque no es su campo principal.
La idea es bastante sencilla, seleccionas el texto que deseas buscar en el foro y pulsas botón derecho, a continuación, Stack overflow Search. También podemos hacerlo de otra forma, pulsando Ctrl+May+P, y escribiendo search. Podremos elegir entre dos opciones, search input o search selection. La primera nos permitirá escribir lo que deseamos buscar, la segunda utilizará el texto que tengamos seleccionado.
DocBlockr
Este plugin facilita el proceso de redacción de documentación y comentarios en PHP, Javascript, Actionscript, CoffeeScript, C & C ++
Alignment
El nombre de este plugin creo que es suficientemente autodescriptivo. Alignment, alineación. Si eres de los que les gusta que todas las asignaciones (entre otras cosas) de variables estén a la misma altura para facilitar la lectura, elige las lineas que quieras igualar, pulsa CTRL + ALT + A (por defecto) y se alinearán los operadores para que lo tengas todo más ordenadito.
En la configuración del plugin puedes elegir el carácter o los caracteres que quieres usar para alinear. De casa trae el símbolo igual ( = ), pero puedes añadir los que quieras, y cambiarlo.
CodeIntel
Como dicen por ahí, Code Inteligence. Este plugin es de los más valorados en SublimeText. Su función básica es ir completando lo que vas escribiendo, funciona con muchísimos lenguajes y va escaneando el proyecto para ir completando su base de datos y poder ir mostrando mejores coincidencias para con tu código.
Enlazamiento con compilador
Muchos programadores querran este editor tan genial, pero por ejemplo los programadores de C++ preguntaran... ¿Como haría yo para usarlo? en mi post anterior muchos lo hicieron, pues ustedes también podrán y aquí les diré como:
Vamos a Tools -> Build System -> New Build System
Se nos abrirá una pestaña ya con el "cmd": y le añadimos lo siguiente.
Para windows:
"cmd": ["g++ -Wall ${file_name} -o ${file_base_name} && ${file_base_name}.exe"],
"working_dir": "${file_path}",
"shell": true
Para linux:
"cmd": ["g++ -Wall ${file_name} -o ${file_base_name} && ${file_base_name}.exe"],
"working_dir": "${file_path}",
"shell": true
Quedando de la siguiente manera:
Lo guardan y le ponen el nombre que ustedes quieran, pero siempre y cuando lleve la extensión .sublime-build.
Ya guardado, vamos a Tools, Build System y escogemos el que hicimos en mi caso miC++.
Pero si no les gusta que su programa aparezca en la consola de Sublime text, pueden buscar el archivo compilado en el mismo lugar donde se encuentra su archivo cpp
Todo esto lo pueden hacer siempre y cuando tengan un compilador instalado, si no lo tienen instalado pueden instalar uno, en mi caso TDM - GCC, lo instalan como cualquier programa y asegurense de tildar la opcion "ADD TO PATH" o sublime no encontrara el compilador, esta opcion lo que hace es que el sistema pueda encontrar el compilador sin tener que dirigirse a su ubicacion original.
Para acceder a mis otros posts hagan click en las imagenes
Eso fue todo, ya saben si tienen dudas déjenla en comentarios, o envienme MP y den favorite, reco, y puntos y estaré haciendo mas de estos posts, y quizá en un futuro haga tutoriales de programación.
