Vim como un IDE

[Pincha aquí para ver otros artículos sobre Vim]

Este artículo es un no-tan-escueto resumen-chuleta que nos permitirá configurar rápidamente el editor Vim como un IDE completo, incluyendo:

  • Navegador de ficheros de proyecto
  • Navegador de símbolos del lenguaje (clases, métodos, miembros…)
  • Navegador de ficheros externos
  • Pestañas
  • Navegador de ficheros recientes

…y más.

Aunque en el artículo me centro en el desarrollo con el lenguaje Python y algunos de los plugins son específicos para este lenguaje, si el lector de este artículo usa Vim seguramente sabrá buscar los plugins equivalentes para el lenguaje que le interese (pista: vim.org)

Para que todo esto funciona hay que seguir estos pasos, que explicaré con detalle después:

  1. Copiamos los ficheros que contienen los plugins en el directorio “plugin” del Vim
  2. Instalación de dependencias
  3. Editamos el fichero de configuración de Vim para activar algunas opciones de los plugins
  4. Somera pero suficiente explicación del uso de cada plugin
  5. Chuleta de atajos de teclado

El artículo presupone una cierta familiaridad con el Vim. Si no se tiene, aconsejo darle primero un vistazo a mis otros artículos sobre este editor.

Vamos a ello.

1. Copia de los ficheros necesarios

Primero tenemos que copiar los ficheros que contienen los plugins en el directorio de plugins de nuestro Vim. Este directorio será el $HOME/.vim/plugin en sistemas decentes y el subdirectorio “plugin” bajo el directorio donde hayamos instalado el Vim en Windows (si el directorio no existe se crea vacío.)

Los ficheros los podemos descargar buscando el nombre de cada uno en Vim.org y cada uno de éstos ficheros añadirá una parte de la funcionalidad, en concreto:

  • bufferexplorer.vim: permite visualizar todos los buffers abiertos y navegador por ellos usando cursores y el ratón
  • mru.vim: lista los ficheros abiertos recientemente.
  • NERD_commenter.vim: comandos inteligentes para comentar y descomentar el código.
  • NERD_tree.vim: navegador del sistema de archivos.
  • project.vim: creador de proyectos con navegador de ficheros de proyecto, búsquedas y algunas cosas más.
  • pythonhelper.vim: muestra en que clase y método estamos
  • pythoncomplete.vim: completado inteligente de Python
  • taglist: muestra un listado de símbolos (clases, métodos, funciones y miembros) y nos permite saltar rápidamente a uno.
  • xml.vim: cierra y anida automáticamente las etiquetas XML/HTML y nos permite operaciones sobre ellas.

Para que el xml.vim maneje también los ficheros HTML y los HTML de plantillas de Django (no sólo los XML), una vez lo hemos copiado en el directorio plugins creamos una carpeta en .vim/ftplugins y copiamos o creamos enlaces simbólicos al xml.vim dentro de ese directorio llamándolos “html.vim” y “htmldjango.vim”.

2. Instalación de dependencias

Además de éstos ficheros de Vim, necesitamos instalar una dependencias necesarias para que funcione el taglist (y queremos que funcione). Para ello necesitamos tener instalado y en el PATH el programa exhuberant-ctags. Para este programa siempre existe una versión empaquetada en las distribuciones de Linux, pero si usamos Windows podemos bajarla de: http://ctags.sourceforge.net/.

3. Edición del fichero de configuración de Vim

Para dejar todo funcional (aunque aún no sepamos usarlo) sólo queda modificar el fichero de configuración de Vim, el $HOME/.vimrc en Unix/Mac/Linux o _vimrc en Windows. En este artículo no explico la configuración completa, sólo la que atañe a los plugins que instalamos y a la integración de nuestro Vim-IDE. Por lo tanto podemos añadir estas líneas al final del fichero:

filetype plugin on

" F2 = OmniComplete
imap <f2> <c-x><c-o>


" Configuración del autocompletado inteligente (el de Python necesita un Vim
" compilado contra las librerías de Python para funcionar)
autocmd FileType python set omnifunc=pythoncomplete#Complete
autocmd FileType javascript set omnifunc=javascriptcomplete#CompleteJS
autocmd FileType html set omnifunc=htmlcomplete#CompleteTags
autocmd FileType css set omnifunc=csscomplete#CompleteCSS


" Atajos para pestañas como los de Firefox/Chrome/Opera/etc
" Control T nueva pestaña (la cerramos con :q)
map <c-t> <esc>:tabnew<cr>
" Control PageUp/PageDown cambiar de pestaña
map <c-pageup> :tabp<cr>
map <c-pagedown> :tabn<cr>


" F10 activa modo pegar (no autoindenta, no descoloca lo que pegamos), F11
" lo desactiva
map <f10> :set paste<cr>
map <f11> :set nopaste<cr>


" Nuestros valores por defecto para el plugin Project
:let g:proj_flags=“imstvcg”


" Colores que no te dejan ciego (al gusto del consumidor, se puede escribir
" :color e ir dando a tab para ver las combinaciones existentes, hay más en
" vim.org)
colors torte


" Que no haga la ventana de gvim demasiado pequeña
au GUIEnter * set lines=80 columns=160


" Plugin taglist


" F5 muestra el frame de tags
map <f5> :TlistToggle<cr>


" Poner el frame en la derecha que el Project ya lo pone a la izquierda
let Tlist_Use_Right_Window = 1


" Tamaño mínimo de frame de tags
let Tlist_WinWidth = 40


" Buffer explorer con F4
map <f4> \be

Otra opción es meter ésto es un fichero separado e incluír el fichero al final de nuestro .vimrc.

4. Explicación del uso de las partes del IDE

Antes de leer este artículo convendría tener muy claros los conceptos de buffer, ventana, pestaña y vista. Como no quería que este artículo fuera muy largo los he explicado (con un dibujo de calidad épica) en este otro artículo.

El explorador de buffers (bufferexplorer.vim) [F4]

En muchas distribuciones modernas de Vim se incluye este plugin por defecto, debido a lo extremádamente cómodo que es. Escribiendo \be o, si usamos la configuración propuesta, F4 se nos mostrará un listado de los buffers abiertos y podremos cambiar entre ellos usando los cursores e intro o el ratón. Además por cada buffer se muestra el número de veces que lo hemos usado en esta sesión y si está modificado (un signo + al lado del nombre.) Pulsando “?” desde el bufferexplorer se nos muestra la ayuda de atajos de teclado. Realmente usando el bufferexplorer y subdivisión de ventanas no harían falta pestañas para nada.

Nuevos atajos de pestañas [Control T / Control AvPag / Control RePag]

Dentro de Vim podemos crear pestañas similares a las de los navegadores como Firefox. Si usamos la versión gráfica de Vim (gvim) las veremos exactamente iguales a las de otros programas gráficos, mientras que en modo texto puro se dibujará una barra de pestañas en la parte superior.

Para crear pestañas con la configuración que hemos puesto los atajos son también los mismos que con Firefox, es decir:

  • Control+T para crear una pestaña nueva
  • Control+RePag para ir una pestaña a la izquierda
  • Control+AvPag para ir a una pestaña a la derecha

Las pestañas se cierran como cualquier buffer o fichero en Vim, escribiendo “:q”

PythonHelper

Este plugin mostrará, cuando estemos editando un fichero Python, la clase y el método en el que estamos en la barra de estado de Vim. No hace falta asignar ningún atajo ni escribr ningún comando, si hemos configurado el vimrc bien lo hará automáticamente (aunque tiene un retardo de 1-2 segundos cuando cambiamos de clase.)

Gestor de ficheros de projecto (project.vim) [F12]

El project.vim proporciona funcionalidades similares a las de los navegadores de archivos de proyecto de los IDEs “normales” haciendo que al pulsar F12 se muestre en la parte izquierda de la pantalla una ventana donde se muestra un árbol con todos los ficheros del proyecto que hayamos creado. Podemos navegar por ese árbol con el ratón o los cursores/intro. Además, podemos hacer búsquedas dentro de los archivos (usando grep) y visualizar los ficheros concordantes con la búsqueda en otra ventana. Tiene muchas más funcionalidades más allá del contexto de este artículo-chuleta y para verlas todas aconsejo darle un vistazo a la documentación.

Para añadir un proyecto nuevo seguimos estos pasos:

  1. Abrimos la subventana de proyectos con F12
  2. En modo comando tecleamos \C ("barra patrás, C mayúscula")
  3. Nos pregunta el nombre de la entrada; éste es el nombre con el que aparecerá en la lista y normalmente vamos a poner el nombre del proyecto (ej. “MiSuperPrograma”.)
  4. Nos pregunta el directorio que tiene que cargar; introducimos el nombre del directorio raíz de los ficheros del proyecto (ej. “C:\misproyectos\misuperprograma” en Windows o “/home/pepito/misproyectos/misuperprograma” en Linux.)
  5. Nos pregunta el “CD parameter”. Esto es simplemente el directorio al que cambiará Vim cuando abramos un fichero de este proyecto. Generalmente metemos el mismo directorio del paso anterior.
  6. Finalmente, nos pregunta el “File Filter”. Aquí introducimos los patrones de los tipos de ficheros que queremos que se incluyan en el proyecto, separados por espacio. Por ejemplo para un proyecto en C++ podríamos introducir “*.c *.cpp *.h”, para un proyecto Python “*.py”, para un proyecto Django “*.py *.html *.css *.js” o si nos queremos quitar de líos ponemos “*” y dejamos que añada todos los ficheros.

Al terminar estos pasos analizará la ruta especificada (dependiendo del tamaño del proyecto puede tardar un rato) y al terminar nos mostrará una entrada con el nombre que hayamos dado en el paso 3, que podemos desplegar para navegar por los ficheros del proyecto. Si queremos hacer una búsqueda dentro del contenido de los ficheros, nos situamos en la ventana de Project y escribimos “G” ("barra patrás, G mayúscula") tras lo cual nos pregunta la búsqueda y nos muestra los resultados en otra ventana, pudiendo seleccionar los ficheros de los resultados para abrirlos. La búsqueda se realiza a partir de donde tengamos el cursor en el árbol.

Si una vez añadidos los ficheros del proyecto queremos eliminar algunos directorios del árbol (que no del disco, ojo), podemos borrar líneas en la ventana del proyecto usando los comandos normales de Vim.

Si en el futuro queremos actualizar el árbol del proyecto, por ejemplo porque hemos añadido nuevos directorios externamente, podemos usar \R para ello.

Podemos crear ficheros de proyecto distintos para cada proyecto, pero yo encuentro más cómodo tenerlos todos juntos en el mismo fichero por defecto (que creo que guarda en $HOME/.vimproject) y desplegar el árbol de aquel con el que esté trabajando.

El navegador de símbolos nos mostrará un árbol con los ficheros que tengamos actualmente abiertos en buffers o pestañas (podemos ver los distintos buffers abiertos con \be en modo normal) y para cada fichero las clases, funciones, métodos y miembros. Ponemos el cursor sobre un símbolo y pulsamos intro (o pinchamos con el ratón si lo tenemos activado o usamos gvim) y la pestaña actual saltará al símbolo si es del fichero que tenemos abierto, saltará a otra pestaña existente si el fichero está abierto en ella o creará un nuevo buffer en la pestaña actual si el fichero no estaba abierto.

En ocasiones queremos abrir un fichero que no pertenece al proyecto. La forma normal de hacer ésto con Vim es escribir “:e ruta/al/fichero”, pero con este plugin podremos desplazarnos por ficheros y directorios con los cursores y abrirlos pulsando Intro (o el ratón, si lo tenemos activado.) Además el navegador tiene más funcionalidades como bookmarks. Para consultar todas las opciones pulsamos “?” cuando estemos en su ventana.

El plugin mru.vim (de Most Recently Used) proporciona una funcionalidad similar a la de los menús “Fichero->Recientes” de los IDEs gráficos. Para ello escribimos “:MRU” (en mayúsculas) en modo comando, o lo asignamos a una tecla.

Comentar código de forma inteligente (NERD_commenter) [,cc / ,cu]

El NERD_Commenter es un plugin fantástico que nos permite comentar código en multitud de lenguajes. Para ello seleccionamos en modo visual el código que queremos comentar y en modo comando escribmos “,cc”. Para descomentar es “,cu”.

Pegar texto sin que se descoloque [F10/F11]

Si hemos usado el fichero de configuración que indiqué al principio, pulsando F10 activaremos el modo “Paste” de Vim, que desactivar temporalmente el autoindentado. De esta forma podremos copiar texto desde fuentes externas sin que se descoloque todo. Para volver al modo normal pulsamos F11.

Ficheros XML y HTML (xml.vim)

El plugin xml.vim proporciona muchas funcionalidades para editar ficheros HTML y XML (RTFM), pero yo básicamente uso dos:

  • Que te cierre las etiquetas HTML según escribes la de apertura escribiendo un “>” adicional (es decir, si escribimos &gt; nos pondrá y pondrá el cursor en medio.

  • Ver cual es la etiqueta de cierre a la correspondiente a donde tenga el cursor o viceversa, que se hace con \%.

Resumen de atajos de teclado

Project

  • Añadir proyecto o subdirectorio de proyecto existente: \C y elegir directorios y tipos de ficheros (opcionalmente editamos en la ventana del proyecto para eliminar directorio vacíos y ajustar)
  • Mostrar panel de proyecto
  • (en panel de proyecto) Amplíar/Reducir panel de proyecto
  • \G (en panel de proyecto): Grep (buscar en ficheros)
  • \R (en panel de proyecto): refrescar los ficheros del proyecto.

Tagglist

  • Saca ventana de tags
  • (en ventana) Muestra la ayuda
  • Muestra el prototipo del símbolo

Pestañas y buffers

  • Control T: Nueva pestaña (:q para cerrar)
  • Control RePag: mover pestaña anterior
  • Control AvPag: mover pestaña siguiente
  • :mksession ficherosesion Guardar sesión (pestañas abiertas y ficheros en ellas)
  • :source ficherosesion Cargar sesión
  • \be o para navegador por los buffers abiertos.

Copiar-pegar

  • Modo pegar (no descoloca las cosas al copiarlas)
  • Salir de modo pegar (para que vuelva a autoindentar)

XML

  • \x con algo seleccionado en modo visual -> rodear de etiqueta (preguntará la etiqueta)
  • \d Borrar las etiquetas sobre las que estamos o las que rodean al texto donde estamos
  • \5 o \% saltar a la etiqueta de apertura o cierre
  • > (modo inserción) escribe la etiqueta de cierre correspondiente
  • >> (modo inserción) escribe la etiqueta de cierre correspondiente y la anida

Nerd Comenter

  • ,cc comentar línea o selección visual
  • ,cu descomentar
  • ,c alternar comentar/descomentar

Nerd tree

  • Mostrar/ocultar navegador de ficheros
  • ? (en el panel) Ayuda del Nerd tree
  • :MRU (mru.vim) mostrar ficheros abiertos recientemente

Posibles mejoras

Con las funcionalidades que hemos añadido a Vim (si hemos seguido los pasos) tenemos un IDE bastante interesante. Otra opción es empotrar un componente de Vim dentro de otro IDE; esta opción también existe pero a mi me parece menos interesante que la que he explicado aquí, salvo cuando por cuestiones laborales tenemos que usar esos IDE forzosamente.

Una mejora bastante obvia sería un plugin de autocompletado que funcionase BIEN con Vim. He probado pydiction, pysmell y el OmniComplete que viene de serie y ninguno me satisface del todo; pysmell y pydiction te obligan a andar generando ficheros de tags y el OmniComplete que viene de serie completa cuando le sale de las narices y luego te deja una ventana abierta en la parte superior que hay que cerrar a mano. Así que sigo usando el vetusto Control-p.

En cualquier caso las funcionalidades de este artículo pueden mejorarse mucho porque las posibilidades de Vim son casi infinitas; por ejemplo podemos poner un plugin para integrar Vim con un sistema de control de versiones como Subversion/Bazaar/Git/Mercurial/etc de modo que podamos hacer commits, updates y diffs directamente; yo personalmente prefiero usar las instrucciones de los SCV desde la línea de comandos. También podemos usar, en el caso de Python, el plugin ropevim que permite hacer refactorizaciones similares a las que hace Eclipse con el Java; yo no lo uso porque no me fío de las refactorizaciones automáticas porque he tenido alguna experiencia dolorosa con ellas.

Agradecimientos

La lista de personas que me ha enseñado en el pasado algún truquillo para Vim es muy larga, desde gente en es.comp.os.linux.* en tiempos prehistóricos a blogueros varios en Internet, pero para esta configuración en concreto como IDE me han ayudado mucho los comentarios de mi amigo y compañero de aventuras tecnológicas Miguel y muy especialmente de Fermín que me apuntó en la dirección del project.vim y me dejó deslumbrado con una captura de pantalla que me mandó por email donde usaba el project junto al tags.

Los comentarios de este artículo están abiertos, de modo que si algún lector se sabe alguna mejora adicional puede escribirla debajo y si la considero interesante la incorporaré al artículo citanto al autor.

Contents