TinselCity What you see is the application



Vim como entorno de desarrollo

09 Feb 2010
Posted by gonzalo

Uno de mis propósitos para este año es el de alcanzar un nivel de satisfacción superior en el uso de mis herramientas de desarrollo. Más concretamente, en el uso de Vim. No soy excesivamente amigo de los IDEs complejos y siempre he tendido más hacia editores buenos pero sencillos.

Este es el caso de Vim. Vim, como editor, es para mi de los mejores que hay. Y si a eso añadimos la ayuda de unos cuantos escogidos plugins, entonces se convierte en una herramienta tremendamente potente.

Aprovechando la puesta en marcha de Montoya, quiero empezar configurando Vim de la mejor forma. Seguramente iré haciendo pequeños cambios con el tiempo, pero por ahora la base es esta.

Requisitos

Además de otros aspectos más estético-ergonómicos, las necesidades más básicas se reducen al resalte de sintaxis para los lenguajes a utilizar (si es posible también comprobación de sintaxis pues mejor). En este caso, desarrollo web, necesitaré HTML, CSS y Javascript. Además de estos, también PHP, Scala y Java. Basta con descargarnos los lenguajes que no están incluidos por defecto en la distribución.

Sería bueno, aunque no imprescindible, si podemos establecer autocompletado para HTML, PHP y Scala. Y si encontramos alguna ayuda adicional, bienvenido sea.

Por otro lado, las necesidades generales están casi cubiertas por la distribución estándar. Sería bueno, eso sí, disponer de algún modo de gestionar ficheros y búferes.

Configuración básica

Tras una época en que trabajé con el texto en negro sobre blanco, he vuelto luego a las configuraciones de fondo oscuro. No sólo me resulta más relajado de leer, sino que me funciona mejor el resalte de sintaxis, lo veo más claramente.

Hay muchos esquemas de colores en la página oficial de Vim. Algunos buenos esquemas de fondo oscuro, en mi opinión, son vividchalk, vibrantink-durdn y, con un poco menos de contraste para ambientes con menos luz, literal_tango. Personalmente me gusta también una variación de molokai con el fondo modificado a #000000 y algunas otras modificaciones menores en algunos colores.

Además de los colores, me gusta también utilizar Envy Code R como fuente. Y para no dejarme la vista, a un tamaño mínimo de 12. Indentación mediante 4 espacios, búsqueda incremental resaltada y algún detalle más.

Plugins generales

Algunos plugins útiles para cualquier desarrollo...

  • NERDTree, un árbol de archivos que nos permite movernos por el sistema de archivos y abrir los que necesitemos cómodamente.
  • MiniBufferExplorer. Vim funciona con buffers. Cada buffer es un fichero. Aunque estén abiertos, sólo vemos los buffers que estén activos en alguna ventana. MiniBuffExplorer nos proporciona una ventana en la que podemos ver todos los buffers abiertos y cambiar de uno a otro. También nos muestra su estado. Una alternativa es bufexplorer
  • surround no es esencial, pero sí muy útil para manejar bloques y sus envoltorios. Básicamente nos permite manipular las cosas que rodean a algo (comillas simples, dobles, paréntesis, corchetes, llaves... etiquetas HTML/XML...). Cuando me aprenda de forma natural sus teclas, seguro que lo encuentro más práctico.
  • yankring añade algunas mejoras en el manejo de la pila de recortes.
  • snipMate. Este plugin emula algunas de las facilidades de TextMate para usar snippets. Nos permite hacer cosas como teclear en modo inserción for<tab> y que lo expanda a la definición de un bucle for completo.

Y por supuesto existen multitud de utilidades más que podemos encontrar en la página de scripts de vim.

Soporte a lenguajes

Para activar el auto-completado de código para algunos lenguajes podemos usar:

    autocmd FileType javascript set omnifunc=javascriptcomplete#CompleteJS
    autocmd FileType html set omnifunc=htmlcomplete#CompleteTags
    autocmd FileType css set omnifunc=csscomplete#CompleteCSS
    autocmd FileType php set omnifunc=phpcomplete#CompletePHP
PHP

Podemos mejorar el resalte de sintaxis con algunas variables de control:

" resalte de sintaxis de querys SQL incluyendo variables interpoladas
autocmd FileType php let php_sql_query=1
" resalte de sintaxis HTML dentro de cadenas
autocmd FileType php let php_htmlInStrings=1
" elimina el soporte de tags de apertura cortos (<? en lugar de <?php)
autocmd FileType php let php_noShortTags=0
" automágicamente colapsa funciones y métodos
autocmd FileType php let php_folding=1

Esto podemos ajustarlo a nuestro modo de trabajar.

Algo que resulta útil es utilizar la opción -l de PHP para comprobar la sintaxis del fichero en el que trabajamos. Para usarlo cómodamente lo podemos asignar al comando make para los ficheros de PHP:

" Llamamos a php -l y le decimos a Vim cómo entender los errores que nos responda
set makeprg=php\ -l\ %
set errorformat=%m\ in\ %f\ on\ line\ %l

Y si trabajamos con ficheros de extensiones distintas a .php, como puede ser el caso de Drupal, que usa .module o .theme, por ejemplo, podemos añadir todas esas esas extensiones para que las trate como ficheros de PHP:

if has("autocmd")
  augroup phpfiles
    autocmd BufRead,BufNewFile *.php,*.module,*.theme,*.inc,*.install,*.info set filetype=php
  augroup END
endif
HTML, CSS, Javascript

Existen multitud de scripts para ayudar en la edición para web. De plantillas HTML a diversas macros para HTML, aunque para mi suele ser suficiente con snipMate en este sentido. Un pequeño script que se hace querer es el que muestra los colores en las hojas de estilo. Es un detalle pequeño pero termina siendo de gran comodidad.

Para trabjar con Javascript es buena idea instalar un fichero de sintaxis mejorado así como bajarse JSLint y configurarlo. Existen muchas formas de hacerlo; podemos asociarlo al comando make o asignarlo a una pulsación. Mediante un plugin, yo lo tengo puesto de modo que se ejecute cada vez que se guarda el buffer y que muestre los errores en la ventana de quickfix.

Hay ayudas específicas para YUI, Dojo, jQuery y alguna otra librería más; aunque no son completas, ayudan algo. La de jQuery se trata sólo de un resalte de sintaxis particular, mientras que, por ejemplo, para YUI el plugin nos proporciona autocompletado de los métodos de algunos objetos.

Scala, Lift, Clojure

El soporte para Scala no es demasiado sofisticado, pero la propia distribución del lenguaje proporciona (en el directorio scala-tool-support) resalte de sintaxis para Vim y un par de detalles más.

Existe también una traducción de los snippets de TextMate para snipMate, lo cual puede ser de gran ayuda. También tengo instalado un plugin que ayuda a trasladarse entre los ficheros de modelos, vistas, tests y clases de Lift.

Por último, vimclojure proporciona autocompletado, macros, evaluación de código y búsqueda de ayuda. Es un soporte básico pero muy útil para aprender Clojure.

Personalizar

Vim es, además de un editor excelente, una herramienta tremendamente flexible y configurable. Por esto es importante no sólo aprender a manejarla bien sino ajustarla lo más posible a nuestra comodidad y preferencias. Existen muchas fuentes de ayuda sobre cómo hacerlo, así como miles de scripts que nos proporcionan grandes o pequeñas ayudas. El beneficio que sacamos del esfuerzo que supone conseguir un entorno a nuestra medida es que luego este se comportará exactamente como esperamos.

El siguiente paso es depurar PHP remotamente desde Vim.

Tags:

Hummm

Me lo voy a leer atentamente. Es que soy de los que piensan que vi es del siglo pasado (hecho irrefutable) y además incómodo de usar. Eso y que nunca se tienen suficientes dedos para usar emacs, que por cierto, también se ha convertido en un monstruo (se puede editar, gestionar email, apache, jugar al tetris, etc.).

Tengo pendiente de escribir un artículo en contra de dichos editores y en favor de otros un poco más modernos, como Textmate o e-texteditor.

También yo estoy más a favor de usar un editor bueno-bueno en lugar de un IDE.


He usado e un tiempo...

E lo he usado durante un tiempo y la verdad es que está muy bien. Pero Vim con unos cuantos plugins tampoco está nada pero nada mal.




Ver mi perfil en debug_mode=ON



Follow genezeta on Twitter