Editores de texto

Te recomiendo algunos temas para VSCode

En este post voy a hacer una recopilación de temas agradables e interesantes para el editor Visual Studio Code.

Son temas que recomiendo personalmente con mi experiencia programando en este editor (muchos de estos son los más descargados), estoy seguro de que al menos uno te gustará.

Por cierto, si quieres hacer más bonito tu VSCode te recomiendo habilitar las ligaduras de fuentes.

Continue reading…

Instalar tema SynthWave ’84 en VSCode (colores neón)

Hace algunos días estuvo en tendencia un tema un poco raro pero igualmente bonito, que tiene colores neón.

Este esquema de color está influenciado por la música y la portada de las bandas modernas de Synthwave como FM-84, Timecop 1983 y The Midnight.

Se llama “SynthWave ’84” y puedes instalarlo buscando “synth” en las extensiones, o yendo al marketplace.

Continue reading…

VSCode: Ligaduras de fuentes con Fira Code

Hay una fuente o tipografía para programadores (o mejor dicho, para código fuente) muy agradable a la vista llamada Fira Code que además soporta las ligaduras de fuentes o font ligatures.

Las font ligatures son una forma de mostrar las fuentes de manera agradable, por ejemplo, mostrar el operador -> como una flecha, no como dos caracteres separados.

De esta manera, al leer el código, nuestro cerebro leerá solo un carácter y no tendrá que leer dos o más además de juntarlos y procesarlos.

Hoy veremos cómo habilitar las ligaduras de fuentes en Visual Studio Code, usando la fuente Fira Code.

Continue reading…

Instalar atajos de teclado de JetBrains en VSCode

Los productos de JetBrains han ido ganando terreno en cuanto a entornos de desarrollo integrado.

No he encontrado otro IDE tan maravilloso como GoLand para programar en Go, o PhpStorm para PHP, etcétera.

El punto es que los entornos de JetBrains cuentan con atajos de teclado o combinaciones de teclas que son las mismas a través de todos sus programas, y si estamos acostumbrados a los mismos, podemos hacer lo mismo en VSCode, pues hay una extensión que permite tener los atajos de teclado de los productos de JetBrains en Visual Studio Code.

Continue reading…

Resetear Visual Studio Code

VSCode se ha convertido en un editor bastante bueno, se ha colocado (según mi opinión) sobre Sublime Text, Atom y Brackets.

Hay ocasiones en las que necesitamos tener a VSCode como nuevo, es decir, limpiarlo.

En este post voy a mostrarte cómo resetear las configuraciones de VSCode y cómo eliminar también todas las extensiones.

De esta manera podrás dejar tu editor VsCode como estaba al inicio.

Continue reading…

Editor de Python 3 en línea

Ejecutar código de Python 3 gratis y en línea

Hoy veremos cómo ejecutar código de Python 3 en línea, sin necesidad de instalar nada.

Lo bueno del editor de texto en la nube que vamos a ver es que permite crear código ilimitado y ejecutarlo, el código de Python se mantiene en línea y no se necesita instalar nada; por lo tanto el sistema operativo no es una restricción.

Aparte de ello podemos descargar el proyecto como zip o exportarlo a gist; al igual que codificar al mismo tiempo entre varios usuarios.

Este editor de Python online también soporta la instalación de paquetes de pip.

Nota: recuerda que puedes instalar Python en Windows 10 o en Android.

Continue reading…

Tomar captura o foto de nuestro código fuente con VSCode y Polacode

Introducción

Con Polacode podemos tomar una foto a nuestro código fuente. Su nombre viene de combinar “Polaroid” y “Code”, Polaroid creo que es una marca de cámaras o algo así.

El código fuente, cuando es escrito correctamente, es bello. Es como leer un poema, como ver una obra de arte que puede ser entendida por casi cualquier persona.

A veces es necesario tomar captura de nuestro código, ya sea para exponerlo, mandarlo o cosas así que no logramos copiando y pegando.

Además, al tomarle captura o convertirlo en imagen conserva los colores, las indentaciones y todo lo demás; en pocas palabras conserva su belleza.

Veamos entonces cómo tomar una foto de nuestro código, y no me refiero a una foto con una cámara real, ni tomando captura, sino con una extensión que tiene una de las cosas buenas que ha inventado Microsoft aparte de Office: Visual Studio Code.

Por cierto, anteriormente ya vimos cómo imprimir nuestro código fuente conservando colores, sintaxis y esas cosas.

Continue reading…

Imprimir o convertir a PDF código fuente con VSCode

Imprimir o convertir a PDF código fuente con VSCode

Introducción

Nuestro código fuente luce bien en nuestro editor, pero cuando lo queremos pasar a otro lugar como un documento de texto o un documento PDF, se le quitan los colores y las tabulaciones.

Hoy veremos cómo podemos convertir nuestro código a PDF, para poder imprimirlo, presentarlo, enviarlo o lo que sea.

Este tutorial se basa en una extensión para el maravilloso editor de texto VSCode.

Imprimir código fuente

Lo que tenemos que hacer es tener instalado VSCode. Después, instalamos la extensión llamada PrintCode.

Podemos ir al enlace que dejo arriba, o en nuestro editor buscar la extensión:

La instalamos y recargamos nuestro IDE.

Ahora abrimos un archivo que tengamos y que deseemos imprimir. Presionamos F1 o Ctrl + Shift + P y escribimos PrintCode:

Presionamos enter y automáticamente se abrirá una pestaña en nuestro navegador preferido…

Si utilizamos Chrome o uno de sus hermanos, podemos guardar como PDF. También podremos imprimir a una impresora física.

En caso de utilizar otro navegador, las opciones cambian, pero siempre hay opciones para imprimir a una impresora virtual o convertir el documento a XPS.

Finalmente aquí dejo el documento PDF generado. Se trata de unos ejercicios de MySQL resueltos.

Algunas abreviaciones útiles con Emmet al programar en HTML

Introducción

No sé cómo definir a Emmet, pero es algo como un plugin para los editores de texto más populares. Permite expandir “abreviaciones” desde las más simples hasta las más complejas.

Con Emmet, podemos agilizar el proceso de desarrollo, pues nos ahorra escribir mucho código. Este plugin es muy querido por la comunidad porque tiene soporte para la mayoría de editores.

Hoy mostraré algunas abreviaciones que utilizo en mi día a día.

Abreviaciones

Para expandir las abreviaciones, creo que se utiliza la tecla del tabulador.

Estructura de un documento HTML 5

html:5

Etiqueta meta viewport para sitios responsivos

meta:vp

Div con el id “contenedor”

#contenedor

Div con la clase “clase-1” y “borde-rojo”

.clase-1.borde-rojo

Div con el id “principal”, que tenga las clases “xs-12” y dentro de él tenga otros dos divs con las clases “borde-azul”

#principal.xs-12>.borde-azul*2

Botón con clases

btn.clase-1.clase-2

Botón con clases “btn” y “btn-success” cuyo tipo sea “button”

btn.btn.btn-success[type=”button”]

Botón tipo “submit”, que en su interior diga “Guardar”

btn[type=”submit”]{Guardar}

Lista con 5 elementos

ul>li*5

Lista en donde el contenido de cada elemento tenga el texto con el índice y la clase “list-element”

ul>li.list-element{Soy el elemento $}*5

Formulario con nombre, action y método para solicitar un correo electrónico. El input debe tener la clase “form-control” y un placeholder

form[name=”miFormulario”][action=”archivo.php”][method=”POST”]>label[for=”correo”]{Correo electrónico:}+input[type=”email”][placeholder=”Escribe tu correo…”]#correo.form-control

Tabla completa con clases

Mi favorito, genera la estructura de una tabla.

table.table.table-bordered>(thead>tr>th*3)+(tbody>tr>td*3)

Escapar índice

Si deseamos que aparezca el $ en lugar del número de elemento, debemos escaparlo con \. Pongamos el ejemplo de una lista con 3 elementos:

Conclusión

Espero no haberme pasado con los ejemplos, pero si lo hice fue para demostrar todo lo que podemos hacer. Igualmente podemos ir generando elemento por elemento; es decir, en el caso del formulario, primero hacemos el form, una vez dentro expandimos el label e input, etcétera.

De esta forma no se complican tanto las cosas y todo es legible. Espero que este tutorial haya servido para algo. Te invito a probar con tus propias abreviaciones y a leer la documentación oficial.

Macro para hacer un console.log de Javascript en Sublime Text 3

Introducción

Antes que nada, quiero decir que este macro está basado en este post. Simplemente me di a la tarea de modificarlo un poco y explicar su instalación y funcionamiento en español.

También cabe mencionar que este macro funciona como un encanto en Sublime Text 3, pero el autor original lo probó en ST2 y también funcionaba. Todo es cuestión de probar.

Una vez dicho eso, comencemos.

¿Qué hace este macro?

Si eres un desarrollador web de Javascript, te habrás encontrado en algún momento de tu vida con que tienes que hacer un console.log para escribir mensajes en la consola y depurar algunas cosas.

El problema viene cuando:

  • Tenemos que escribir muchos console.log
  • No sabemos cuál variable estamos imprimiendo

Esto se hace laborioso y, como lo dije hace un momento, podemos confundir la variable que estamos imprimiendo.

Así que, qué mejor que imprimir algo como:

var edad = 21;
console.log('edad => ', edad);

Y así, en la consola sabríamos cuál variable es, y cuál es su valor. Además, sería mejor hacer esto:

var edad = 21;
console.log('Línea 2. edad => ', edad);

De esta manera imprimiríamos la línea y la variable, ya que podemos tener variables locales con el mismo nombre.

Te habrás dado cuenta de que esto suena bonito, pero laborioso. Y la verdad es que sí, qué pereza estar escribiendo todo eso. ¿No sería mejor seleccionar la variable y presionar unas teclas para que el editor hiciera esto por nosotros? pues esto es lo que el macro hace. Veamos ahora su instalación.

Instalación

Primero que nada, vamos a descargar el código que dejo abajo. Bien podemos copiarlo en un archivo o descargarlo directamente. El punto es que su nombre debe ser console.log.sublime-macro. Si lo llamamos de otro modo, simplemente hay que recordar el nombre.

Lo que no podemos cambiar, creo, es la extensión.

Una vez descargado vamos a guardarlo en los paquetes del usuario. Normalmente, en Windows, está en C:\Users\tu_usuario\AppData\Roaming\Sublime Text 3\Packages\User.

Si no estás en Windows o no existe la carpeta, puedes ir a la opción del menú Preferences > Browse packages:

En mi caso, una vez descargado se ve así:

Con esto ya lo hemos descargado. Podemos invocarlo desde el menú, pero lo que queremos es que se active con una combinación de teclas.

Activando con combinación de teclas

Para esto ahora vamos a crear una combinación de teclas. Vamos al menú y seleccionamos Preferences > Keybindings como se ve a continuación:

Automáticamente se abrirá una nueva ventana con dos archivos. A la izquierda las combinaciones del editor, y a la derecha las nuestras. Por defecto, se mostrarán unos corchetes [].

Dentro de los corchetes vamos a pegar lo siguiente:

{ "keys": ["ctrl+shift+l"], "command": "run_macro_file", "args": { "file": "Packages/User/console.log.sublime-macro" } }

De manera que quede así:

Una vez hecho esto, guardamos el fichero con Ctrl + S. Es momento de probarlo.

Nota: si ya tenías otras combinaciones en el archivo, simplemente agrega una coma y añade el código, algo así:

Funcionamiento

Después de todo el proceso que hemos hecho, es hora de probar y saborear la recompensa de nuestro esfuerzo. Crearemos un archivo Javascript y escribiremos lo siguiente:

var edad = 21;

Ahora vamos a seleccionar la variable edad, haciendo doble click sobre ella. De manera que se vea así:

Notar por favor que, aunque no se ve bien, hay una pequeña diferencia en edad. Para evitar confusiones, así se ve sin seleccionar:

Muy bien, cuando esté seleccionada presionamos la combinación Ctrl + Shift + L.

Por cierto, olvidé decir que podemos cambiar esta combinación en el archivo Keybindings.

Cuando lo hagamos, veremos la magia:

Podemos hacerlo con cualquier variable, propiedades de un objeto o datos de un arreglo:

Eso es todo por hoy.