Facebook Twitter RSS Reset

¿Te gusta programar?Convierte este editor en tu mejor amigo


¿Te gusta programar?Convierte este editor en tu mejor amigo

Hola taringueros, en esta ocasión les mostrare como convertir este editor en una gran herramienta, muy útil, se trata de Sublime text

¿Te gusta programar?Convierte este editor en tu mejor amigo

En mi post anterior sobre programacion vimos las caracteristicas de este editor, si no las vieron pueden ir al post dando click aqui.

¿Te gusta programar?Convierte este editor en tu mejor amigo

Este editor es capaz de soportar la sintaxis de muchos lenguajes de programacion

¿Te gusta programar?Convierte este editor en tu mejor amigo

¿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.

¿Te gusta programar?Convierte este editor en tu mejor amigo

¿Te gusta programar?Convierte este editor en tu mejor amigo

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.

¿Te gusta programar?Convierte este editor en tu mejor amigo

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.

¿Te gusta programar?Convierte este editor en tu mejor amigo

programadores

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:

¿Te gusta programar?Convierte este editor en tu mejor amigo

También puedes utilizar la combinación CTRL+K para saltarte alguna selección que no quieras utilizar en el reemplazo.

¿Te gusta programar?Convierte este editor en tu mejor amigo

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:

¿Te gusta programar?Convierte este editor en tu mejor amigo

editor de texto

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:

¿Te gusta programar?Convierte este editor en tu mejor amigo

herramientas de programadores

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:

¿Te gusta programar?Convierte este editor en tu mejor amigo

programar

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.

editor de texto

Combinaciones de teclado

Existen muchas otras combinaciones de teclas que convendría conocer, ya que son acciones que utilizaremos frecuentemente:

¿Te gusta programar?Convierte este editor en tu mejor amigo

herramientas de programadores

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:

¿Te gusta programar?Convierte este editor en tu mejor amigo

La zona reducida se mostrará con un pequeño símbolo … que indica que hay más contenido en su interior.

programar

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.

¿Te gusta programar?Convierte este editor en tu mejor amigo

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.

¿Te gusta programar?Convierte este editor en tu mejor amigo

herramientas de programadores

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»:

¿Te gusta programar?Convierte este editor en tu mejor amigo

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:

programar

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»

¿Te gusta programar?Convierte este editor en tu mejor amigo = 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.

editor de texto

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.

programadores

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.

¿Te gusta programar?Convierte este editor en tu mejor amigo

¿Te gusta programar?Convierte este editor en tu mejor amigo

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.

programar

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:

¿Te gusta programar?Convierte este editor en tu mejor amigo

programadores

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.

¿Te gusta programar?Convierte este editor en tu mejor amigo

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.

¿Te gusta programar?Convierte este editor en tu mejor amigo

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.

programar

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.

editor de texto

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:

¿Te gusta programar?Convierte este editor en tu mejor amigo

herramientas de programadores

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.

¿Te gusta programar?Convierte este editor en tu mejor amigo

¿Te gusta programar?Convierte este editor en tu mejor amigo

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:

¿Te gusta programar?Convierte este editor en tu mejor amigo

programadores

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.

¿Te gusta programar?Convierte este editor en tu mejor amigo

¿Te gusta programar?Convierte este editor en tu mejor amigo

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.

¿Te gusta programar?Convierte este editor en tu mejor amigo

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

editor de texto

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.

¿Te gusta programar?Convierte este editor en tu mejor amigo

herramientas de programadores

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:

¿Te gusta programar?Convierte este editor en tu mejor amigo

programar

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.

¿Te gusta programar?Convierte este editor en tu mejor amigo

programadores

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.

herramientas de programadores

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.

¿Te gusta programar?Convierte este editor en tu mejor amigo

programar

DocBlockr

Este plugin facilita el proceso de redacción de documentación y comentarios en PHP, Javascript, Actionscript, CoffeeScript, C & C ++

¿Te gusta programar?Convierte este editor en tu mejor amigo

programadores

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.

herramientas de programadores

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.

¿Te gusta programar?Convierte este editor en tu mejor amigo

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

¿Te gusta programar?Convierte este editor en tu mejor amigo

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:

¿Te gusta programar?Convierte este editor en tu mejor amigo

Lo guardan y le ponen el nombre que ustedes quieran, pero siempre y cuando lleve la extensión .sublime-build.

¿Te gusta programar?Convierte este editor en tu mejor amigo

Ya guardado, vamos a Tools, Build System y escogemos el que hicimos en mi caso miC++.

¿Te gusta programar?Convierte este editor en tu mejor amigo

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.

¿Te gusta programar?Convierte este editor en tu mejor amigo

Para acceder a mis otros posts hagan click en las imagenes

¿Te gusta programar?Convierte este editor en tu mejor amigo

¿Te gusta programar?Convierte este editor en tu mejor amigo

programadores

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.

¿Te gusta programar?Convierte este editor en tu mejor amigo

No comments yet.

Leave a Comment