Notepad++: editor de código para desarrollo web

Posteado en Aug 5, 2011

Siguiendo el anterior post sobre editores de código para programación web vamos a hablar de: Notepad++ (y haremos una breve referencia a Geany, al final de esta entrada) dos editores de software libre, gratuitos y basados en un mismo origen, el componente de edición Scintilla.

Notepad++ solo tiene versión para Windows, aunque no nos dejemos engañar por su nombre. Es bastante más potente que el modesto Notepad ó ‘Bloc de Notas’ (algunos le han apodado el Notepad con esteroides). Ha sido desarrollado por Don Ho, en C++ con licencia GPL. La última versión para descargar es la v5.9.3 de Julio de 2011.

Para conocer todas sus funcionalidades en detalle aconsejamos consultar su documentación y ayuda online, desafortunadamente en inglés, pero a cambio, muy cuidada y bien estructurada. A diferencia de otros proyectos similares, este es un punto fuerte que facilita de verdad la utilización de este editor.
Aunque este programa no llega a lo que puede ser un IDE (ver nuestro post anterior), su facilidad y rapidez de uso lo convierten en una alternativa muy interesante, sobre todo para aquellos cuyas necesidades de desarrollo en el entorno web no requieren de herramientas tan avanzadas. Nosotros solo vamos a presentar algunas de sus características para aquellos que no lo conozcan y no estén habituados a utilizar este tipo de editores:

  • Multiples pestañas / Vista dividida (multiview)

Podemos cargar múltiples ficheros a la vez, utilizando pestañas y multiview. Por ejemplo, si estamos creando una página web con CSS y JS podemos tener cada fichero (HTML, Hoja de estilo, JavaScript) en una pestaña diferente.
Funcionalidad de multivista en Notepad++
Podemos ir más allá con la opción multivista: ‘Vista > Mover/Clonar el documento actual’que nos permite visualizar simultáneamente dos pestañas distintas, dividiendo la pantalla verticalmente. Es como si crearamos dos instancias del programa ya que a su vez cada una de esas vistas puede tener varias pestañas. Las combinaciones y posibilidades son múltiples, desde facilitarnos la comparación o ‘copia-pega’ entre ficheros a tener un mismo fichero en las dos ventanas (que se edita simultáneamente) pero con distinta configuración de visualización (zoom, posición del scroll,..).

  • Numeración de líneas, sangrados (tabulación), desplegado (folding)

Básicos en un editor de este tipo para localizar rápidamente errores, presentar más claramente el código en distintos niveles con tabulaciones configurables y ocultar/desplegar bloques que nos permiten ver mejor la estructura del fichero y sus distintas secciones (ver captura de pantalla en el siguiente punto).

  • Resaltar sintaxis del código

Notepad++ identifica el lenguaje del fichero que tenemos abierto y aplica distintos colores a los diferentes elementos para que los identifiquemos más fácilmente.
Podemos también indicarle expresamente el lenguaje que estamos utilizando de una lista de 50 que trae ya incorporados (donde se encuentran los más populares para el entorno web: HTML, CSS, JavaScript, PHP, Perl, Python,…).
Hay numerosas posibilidades de configuración, desde dar de alta términos claves en cada categoría, crear nuestro propio conjunto o definir los estilos de presentación para cada elemento: color, tamaño, tipo de fuente…
Configuración de estilos para resaltado de código en Notepad++
En la imagen de abajo se ve un ejemplo de un fichero HTML con JavaScript inscrustado, en el que el editor ha identificado ambos lenguajes (igual ocurría si hubiera código PHP) y marcado con diferentes colores y efectos distintos elementos. En este caso, hemos configurado para que las etiquetas y atributos HTML que no reconociera las presentara en rojo y naranja respectivamente y además subrayadas, lo que nos permite detectar fácilmente posibles errores.
Resaltado de sintaxis en Notepad++

  • Autocompletar código

Aunque con algunas carencias comparado con otras herramientas más avanzadas, nos puede dar sugerencias en linea sobre el código que estamos introduciendo (palabras claves, funciones o parámetros de funciones). Podemos configurar cuál de estas ayudas tener activa o a partir de cuantos caracteres aparece una sugerencia o completa una palabra.
Función de autocompletado en Notepad++

  • Búsqueda y reemplazo avanzado de términos y expresiones

Podemos ‘buscar/reemplazar’ utilizando expresiones regulares o realizando búsquedas en múltiples ficheros. Una funcionalidad muy útil en tareas de edición o mantenimiento de un sitio web.
En la imagen se puede ver por ejemplo como podríamos buscar los <div> que estuvieran incluidos en todos las páginas web de un directorio (incluyendo subdirectorios) con la clase  ‘resaltado’ o ‘destacado’ y sustituir el nombre de dicha clase por ‘principal’.
Notepad++: búsqueda y reemplazo de términos

  • Macros

Podemos ahorrar bastante tiempo con esta funcionalidad que nos permite grabar acciones repetitivas al introducir código y luego reproducirlas cuando queramos, es decir que dichas acciones se realicen automáticamente, en el fichero que estamos trabajando.

  • Plugins

Notepad++ puede extender sus funcionalidades a través de un Plugin Manager que nos ayuda a instalar los que necesitemos, listando además los que tenemos ya instalados (hay algunos por defecto), cuáles hay disponibles, su versión y  breve descripción de su funcionalidad.

Bueno, nos dejamos muchas funcionalidades sin presentar (snippets, ejecutar código…) , pero creemos que esta entrada os pueda dar una buena idea de las posibilidades de este programa.

Como indicábamos al principio, otro editor/mini-IDE recomendable es Geany,  sobre todo si trabajas en Linux ya que es  multiplataforma (Linux, MacOS X, Windows). Tiene algunas diferencias en funcionalidades, y hay quienes lo encuentran más potente o ajustado a lo que necesitan. Quizás la documentación de uso sea una de sus principales carencias, lo que nos ha hecho decantarnos por Notepad++ , sobre todo pensando en usuarios no habituados a este tipo de herramientas.