if (tern && emacs) pwn();

Ya hace mucho tiempo que estoy intentando aprender javascript, soy una fanática de emacs, pero envidiaba mucho el autocomplete de la consola del explorador… y ayer, buscando por internet cómo tunnear mi emacs, me topé con Tern. Fue amor a primera vista XD

Para instalarlo, solo tienes que seguir los pasos de este link: http://ternjs.net/doc/manual.html#emacs

00documenting

No sabía que Javascript se documentaba de esa forma, o_O lo aprendí del código de phaser XD.

Tern reconoce la documentación, y te la muestra en el autocomplete. En la imagen de arriba, como el parámetro person tiene el tipo string, su autocomplete te muestra los miembros de un string.

01documentingCuando llamas a esa función, también te muestra su documentación.

02documentingy mientras escribes la función, te muestra el tipo de dato de cada parámetro de la función, en tiempo real.

03documenting

pero cuidado con los puntos! la descripción de la función debe terminar con un punto. De lo contrario, tern te mostrará toooodo el texto que escribiste.

04documenting

Además, tern también reconoce objetos que hayas creado recién!! solo tienes que especificar en la documentación el prototipo de ese parámetro.

005tern-project

y esto es lo que más me gustó de tern: en el archivo .tern-project puedes decirle a tern cuáles archivos están participando en el proyecto en el que estás trabajando, entre otras cosas.  En la imagen de arriba, yo le dije a tern que cargara cualquier .js que pusiera en esa carpeta. Como phaser.min.js está allí, se va a agregar al auto-complete de tern.

y cuando creo un nuevo “game” (que es de un tipo de dato definido en phaser.min.js), al darle punto, el auto-complete me sugiere los miembros de game (que están definidos en phaser.min.js).

Tern tiene muchas otras características, como renombrar variables, funciona en muchos lugares (emacs, vim, sublime text, eclipse, etc)… pero no me las preguntes a mí! instala Tern, y comienza a descubrirlas :D

Advertisements

Haciendo snippets con yasnippet

Hace muuucho tiempo prometí que escribiría una guía sobre cómo usar emacs para programar cosas web, y luego me olvidé ‘¬’

bueno, hoy lo volví a recordar XD

Recordarás que ya había escrito algo sobre cómo instalar yasnippet , esta vez quisiera compartir algunos snippets rápidos que creé, y que ahora los uso todo el tiempo mientras programo “cosas” web.

Pero más que compartir snippets ya hechos, quiero mostrarte cómo crear tus propios snippets, y algunas ideas para usar los snippets para aprender a usar librerías nuevas. Pero vamos en orden XD

No es necesario, pero talvez quieras instalarte primero web-mode (que te proveerá highlighting para php).

Lo que sí necesitarás, es yasnippet.

0. ¡¿qué es un snippet?!

Un snippet es un trozo de código que puedes “invocar” con una palabra clave. (Como el

 syso -> System.out.println(); de eclipse 

)

1. Haciendo tu propio snippet

Para crear un snippet para un mode de emacs, necesitas crear un archivo con la información del snippet en el directorio

 ~/.emacs.d/snippet/xxx-mode 

. En donde ‘xxx’ es el nombre del mode.

Por ejemplo, si quiero crear un snippet para javascript, tengo que crear un archivo llamado

 ~/.emacs.d/snippet/js-mode/mi-snippet 

.

El contenido de ese archivo debe ser algo así:

 
  # name: nombre
  # key: clave
  # --
  hola snippet

“clave” es la palabra clave que usarás para invocar al snippet. Puedes tener varios snippets con la misma clave, y allí es donde entra la importancia del “nombre”. Cuando tienes varios snippets que invocar con la misma palabra clave, te saldrá un menú desde el que puedes elegir cuál es el snippet que quieres elegir. Si le haz puesto nombre a tu snippet, entonces, el texto que esté en “nombre”, será el texto que se mostrará en ese menú.

Ahora, para probar tu nuevo snippet, abre un archivo javascript: “archivo.js”, luego: “M-x yas-reload-all” (eso hará que el snippet que acabas de crear se registre, sin tener que reiniciar tu emacs), ahora, en ese archivo, escribe “nombre”, y presiona “TAB” (o la tecla que uses para expandir un snippet). Si lo haz hecho bien, la palabra “nombre” debería desaparecer, y en vez de ella, apareció “hola snippet” (que es el código predefinido que escribimos en el snippet)… … genial, no? :D

Se pueden hacer cosas más complicadas con un snippet. Puedes poner campos de texto dentro del código predefinido… es complicado de explicar XD lo entenderás mejor si lo pruebas…

1.1 Un ejemplo dice más que mil palabras.

Antes de leerte todo este blog, talvez quieras probar este snippet, que probablemente despejará todas tus dudas, y así puedas saltarte a la 2da parte: usando snippets para aprender cosas nuevas.

 
  # name: un snippet esclarecedor
  # key: tutorial
  # --
  for (int ${1:i}=${2:0}; $1 < ${3:n}; ${4:$1++}) {
    $0
  }

Entendido? no? bueno… entonces lee el resto del blog XD

1.2 Un snippet más complicado

Ahora, haremos un snippet para hacer un div. Generalmente, cuando hacemos aplicaciones web, queremos hacer divs, y estos divs suelen tener clases diferentes. El div es el mismo, lo único que cambia, es su clase (y talvez, su id), algo así:

 
  <div class="esto siempre cambia" id="y esto también">  
    este es el contenido del div :P
  </div>

Vamos a hacer un snippet para “optimizar” el div xD

Crea un snippet llamado

 ~/.emacs.d/snippet/html-mode/tutorial-div 

el contenido es:

 
  # name: div class id
  # key: div
  # --
  <div class="$1" id="$2"> $0 </div>

Este snippet es igualito al que hicimos antes, la única diferencia son los “$”. Abre un archivo html y pruébalo por tu cuenta.

Notarás que el cursor ya no está al final del código predefinido, ahora está en “$1”, y el “$1” ha desaparecido. Prueba escribir algo, y a continuación, presionar “TAB”. Ahora el cursor se detuvo en el “$2”. Escribe algo de nuevo, y presiona tab. Ahora, el cursor se detuvo en $0, y el fondo de lo que escribes ya no está resaltado. “El snippet ha terminado”, y el cursor se quedó en $0.

1.3 Un snippet con texto por default

Suele pasar que, una porción de texto del código necesita ser cambiada, pero no muy seguido… por lo general, no cambia. Para esto, se le puede poner texto por defecto a cada snippet.

Por ejemplo, cuando comenzamos a hacer una página web, el idioma suele ser el español, pero podría ser otro.

Este snippet llamado

 ~/.emacs.d/snippet/html-mode/tutorial-html 

, escribe el esqueleto de un html:

 
  # name: esqueleto de html
  # key: html
  # --
  <!DOCTYPE html>
  
  <html lang="${1:es}">
    <head>
      <meta charset="${2:utf-8}" />
      <title>$3</title>
    </head>
    
    <body>
      $0
    </body>
  </html>

De nuevo, abre un archivo html, reinicia yasnippet con “M-x yas-reload-all”, y prueba el snippet con “html” “TAB”. Esta vez, el cursor se detendrá en lang=”…”, y, por defecto, estará escrito “es”, pero… en cuanto escribas algo, se borrará “es”, y se reemplazará por lo que escribas. Lo mismo pasará con charset. Luego, en title, pasará lo que ya expliqué en la sección anterior, y el snippet terminará, y el cursor se quedará dentro de body.

1.4 Reusando el texto

A veces, queremos reusar el texto que ya hemos escrito (como con los \begin{environment} \end{environment} de LaTeX, o con los tags de html).

Este es uno de los snippets que tengo en mi “arsenal” XD

 
  # name: generic tag
  # key: <
  # --
  <$1$2> $0 </$1>

De nuevo, abre un archivo html, reinicia yasnippet, y prueba el snippet que acabas de hacer escribiendo “<" "TAB". en $1, escribes el nombre del tag, observa cómo lo que escribes al abrir el tag, también se escribe cerrando el tag. Al presionar tab, puedes escribir las opciones del tag. Por último, el snippet se sale, y el cursor se queda en $0.

La segunda parte: usando snippets para aprender cosas nuevas, la escribiré después, me da flojera XD

emacs + YASnippet

Estuve buscando por todas partes un .el que, cada vez que escribiera el principio de un tag, este plugin autocompletara el final del tag, y pusiera mi cursor al medio.

Al final lo encontré en la forma de una herramienta mucho más completa, que no solo funciona con tags, sino con  C, C++, C#, Perl, Python, Ruby, SQL, LaTeX, HTML, CSS y más~, dejaré aquí las instrucciones para instalarlo… si todo lo que dije aquí no funciona, o si quieres aprender más sobre YASnippet y cómo añadirle la opción popup, no olvides ver los enlazes en la última sección “fuente”…

¿Cómo? :D

En realidad, es bastante fácil ~_^

Descarga del paquete

Puedes descargar un .zip de esta dirección: https://github.com/capitaomorte/yasnippet/archive/master.zip y luego descomprimirlo en tu ~/.emacs.d/plugins/ (si la carpeta plugins no existe, créala)

También puedes clonar el repositorio en tu ~/.emacs.d/plugins con un


 $ cd ~/.emacs.d/plugins/
 $ git clone https://github.com/capitaomorte/yasnippet.git
 $ cp -r ~/.emacs.d/plugins/yasnippet/snippets ~/.emacs.d/plugins/

Instalación

Luego, solo añades éstas líneas a tu .emacs:

;;YASnippet
(add-to-list 'load-path "~/.emacs.d/plugins/yasnippet") (require 'yasnippet)
(yas-global-mode 1)

;;popup on YASnippet
(require 'popup)
(require 'yasnippet)

;; add some shotcuts in popup menu mode
(define-key popup-menu-keymap (kbd "M-n") 'popup-next)
(define-key popup-menu-keymap (kbd "TAB") 'popup-next)
(define-key popup-menu-keymap (kbd "<tab>") 'popup-next)
(define-key popup-menu-keymap (kbd "<backtab>") 'popup-previous)
(define-key popup-menu-keymap (kbd "M-p") 'popup-previous)

(defun yas/popup-isearch-prompt (prompt choices &optional display-fn)
(when (featurep 'popup)
(popup-menu*
(mapcar
(lambda (choice)
(popup-make-item
(or (and display-fn (funcall display-fn choice))
choice)
:value choice))
choices)
:prompt prompt
;; start isearch mode immediately
:isearch t
)))

(setq yas/prompt-functions '(yas/popup-isearch-prompt yas/no-prompt))

y listo · w ·

Uso…

para usarlo… tienes que escribir una “palabra clave” y luego presionar TAB. Por ejemplo, crea un archivo .html y escribe “div”, luego, presiona tab y selecciona el esqueleto que quieras usar :D

O… entra a un archivo .cpp, escribe “main” y presiona TAB…

Para ver cuáles son palabras clave disponibles, puedes revisar el menú YASnippet (dentro de emacs, la barra superior), y en la primera parte del menú (antes de la primera división de “——————-“) puedes ver *-mode >, y cuando pongas tu cursor sobre eso, aparecerán todos los “snippets” disponibles para el modo de edición en el que estás, y a la derecha de cada uno, la palabra clave que debes insertar, seguido de un “=>”.

Si algo falla, o si quieres aprender más sobre este plugin, te recomiendo estos links:

https://github.com/capitaomorte/yasnippet <— Github de YASnippet
http://iany.me/2012/03/use-popup-isearch-for-yasnippet-prompt/ <— explicación de popups para YASnippet

(Migración de Tumblr a WordPress, fecha original: 2013-09-01)

Emacs: Autocomplete

MasterCard propaganda

Tener Emacs configurado a tu medida: NO TIENE PRECIO

Finalmente logré configurar mi emacs para que funcione con autocomplete! Es fácil, y escribiré un mini tutorial de cómo hacerlo. (Si esto no funciona, talvez deberías leer esto: http://cx4a.org/software/auto-complete/manual.html#Installation ).

Lo primero es descargar el autocomplete. Para hacerlo, sigue este link: http://cx4a.org/software/auto-complete/index.html#Latest_Stable y descarga el *.tar.bz2 Una vez descargado, descomprímelo, para descomprimirlo mediante la consola, accede al directorio en el que descargaste el paquete, y escribe estas líneas:

~/Downloads/ $ tar jxf auto-complete-x.x.x.tar.bz2

Una vez descomprimido, puedes ejecutar el script de instalación (lo cual simplifica muuuucho~ las cosas) el script se encuentra en auto-complete-x.x.x/etc/install.el

Para ejecutar el script, entra a la carpeta auto-complete-x.x.x y haz lo siguiente:

$ make install DIR=$HOME/.emacs.d/

(DIR=$HOME/.emacs.d/ sirve para indicar en dónde está tu emacs).

Por último, para que tu emacs cargue el auto-complete cada vez que arranque, deberás modificar tu .emacs

Para hacer esto, recomiendo fuertemente que hagas un backup, así (tienes que estar como root):

# cd ~
# cp .emacs .emacs.bk

Hasta aquí, hemos creado un backup del archivo, si todo sale mal no entres en pánico!Siempre puedes volver al backup que haz hecho ejecutando:

# cp .emacs.bk .emacs (en caso de pánico)

Ahora sí, vamos a modificar el archivo de arranque del emacs, configurándolo para que cargue el auto-complete… Abre el archivo para su edición con tu editor favorito (por ejemplo, emacs)

$ emacs .emacs & (yo dawg, I herd you like emacs…)

Añádele las siguientes líneas al archivo:

;; Autocomplete
(add-to-list ‘load-path “/home/vg/.emacs.d/”)
(require ‘auto-complete-config)
(add-to-list ‘ac-dictionary-directories “/home/vg/.emacs.d//ac-dict”)
(ac-config-default)

El ‘;;’ es un comentario para documentar. Puedes no documentar, pero no es recomendable, a menos que quieras tener una sopa de código ilegible en el futuro ~_^

y eso es todo~~ si quieres aprender más sobre emacs:

RTFM! (sobre cc mode: http://cc-mode.sourceforge.net/html-manual/ )

Estaré publicando algunas cosas que aprenda sobre configurar el .emacs, pero hasta entonces, estaré RTFM XD Suerte con eso! Y recuerda… para todo lo demás, existe MasterCard ~_^

(Migración de Tumblr a WordPress, fecha original: 2013-10-15)