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.

[
    {
        "args": null,
        "command": "copy"
    },
    {
        "args":
        {
            "extend": false,
            "to": "eol"
        },
        "command": "move_to"
    },
    {
        "args":
        {
            "characters": "\nconsole.log"
        },
        "command": "insert"
    },
    {
        "args":
        {
            "contents": "('Línea $TM_LINE_NUMBER. $0 => ', $0);"
        },
        "command": "insert_snippet"
    },
    {
        "args": null,
        "command": "paste"
    },
    {
        "args":
        {
            "extend": false,
            "to": "eol"
        },
        "command": "move_to"
    }
]

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.