Funciones principales de Notepad++ para trabajar en desarrollo Web

Notepad++ es un editor gratuito de código fuente que soporta varios lenguajes de programación.

Para ir a su página oficial pulsa Aquí

Es similar a un Bloc de notas en el sentido de que se puede editar texto sin formato y de manera simple. Sin embargo, incluye muchas opciones más avanzadas pensadas para dar funcionalidades realmente interesantes a desarrolladores y programadores.

En esta guía explicaremos cuales son las funcionalidades básicas que usan los programadores a la hora de trabajar sobre páginas Webs.

Antes que nada bajarnos la última versión de Notepad++ e instalarlo en nuestro ordenador.

1) Aspecto visual de Notepad++

A muchos programadores les gusta cambiar el color de la pantalla, es muy común ponerse una pantalla negra por estética y porque dicen que los colores oscuros cansan menos a la vista, por lo tanto antes que nada ajustar los colores porque es fácil que nos pasemos muchas horas delante de esta ventana.

Vamos a la pestaña configuración/configuración del estilo y veremos la siguiente ventana:

cambiar color de notepad++

Se puede configurar de forma más específica el color a nivel individual y no a nivel global del tema pero eso ya cada uno a su gusto.

2) Plugin comparar de Notepad++

Este plugin nos va a ayudar a comparar las diferencias de código entre dos documentos.

Es muy útil por ejemplo cuando modificas un archivo y al cabo del tiempo vuelves a entrar y no sabes exactamente que cambiaste o en que línea estaba el cambio, pues con este plugin solo tendrás que coger el documento original y el modificado, compararlo y automáticamente saldrán las diferencias.

Puedes descargarlo aquí

Una vez descargado lo descomprimimos y observamos que hay un archivo que se llama ComparePlugin.dll (en futuras versiones este nombre puede variar).

Ahora Abrimos la carpeta C:\Program Files (x86)\Notepad++\plugins (la ruta depende de donde esté instalado nuestro Notepad++) y copiamos nuestro archivo ComparePlugin.dll.

Ya lo tenemos instalado, reiniciamos el programa Notepad++, ahora abrimos los dos archivos que queremos comparar con el Notepad++ y nos dirigimos a la siguiente pestaña:

plugin compare de notepad

Cuando pinchemos la función «Compare» compara los dos archivos y nos indicará las diferencias de los dos documentos como la siguiente imagen.

resultado del plugin compare

En el documento de la izquierda venos que hay un símbolo de (-), quiere decir que tiene un elemento menos respecto al documento de la derecha y si nos fijamos en el documento de la derecha vemos que tiene un símbolo de (+)  lo que quiere decir es que tiene un elemento de más que es la línea que he incluido.

Importante, dependiendo del color del tema el plugin de comparar se verá más claro por el color que utiliza, si no se ve correctamente volver a poner el predeterminado.

3) Búsqueda completa dentro de un carpeta

Queremos buscar un identificador, una clase, una función, o cualquier palabra dentro de una carpeta con muchos archivos, haciéndolo a lo bruto podemos tirarnos un buen rato pasando por cada uno de los archivos y haciendo una búsqueda en cada uno de ellos, una buena noticia, ¡esto se ha acabado!, ahora con este programa haremos búsqueda globales donde nuestro procesador hará que en muy poco tiempo tengamos los resultados de nuestra búsqueda.

Dentro del programa pulsamos “CTRL+F”, esto nos abrirá una ventana de búsqueda, después accederemos dentro de la pestaña “buscar en archivos”, en la opción carpeta elegimos la carpeta donde deseemos realizar la búsqueda y en el campo buscar la referencia que hayamos escogido, en nuestro ejemplo buscaremos: id=”facebook”

notepad buscando elementos por archivos de nuestra pagina web

Cuando le demos a “buscar todo” saldrán todos los archivos de tu carpeta que contienen la referencia que hemos buscado.

En nuestro ejemplo solo hemos visto un resultado:

resultado de la busqueda realizada con notepad++

 4) Opción autocompletar

Cuando programas siempre viene bien tener esta opción activada ya que mientras escribes alguna instrucción te va dando las opciones disponibles que existen como la siguiente imagen:

opcion autocompletar notepad

Está opción suele estar activada de forma predeterminada pero si no es así la activamos en configuración/preferencias/Auto-completion (la ruta puede variar en versiones posteriores).

 

5) Cierre automático de etiquetas HTML

Para tener esta funcionalidad deberemos de instalar otro plugin, pero ahora lo instalaremos de otra manera, dentro de Notepad++ nos dirigimos a la pestaña plugins/plugin manager/Show Plugin Manager, aquí nos aparecerá una lista de plugins, deberemos buscar este «TextFX Characters» y lo instalamos, acto seguido se reiniciara el programa y en la parte superior veremos que hay una nueva pestaña llamada TextFX.

Entramos en nuestra nueva pestaña y pulsamos las dos opciones de la imagen:

cierre etiquetas html

Opción1: Autoclose XHTML/XML <tag> –>Cierra las etiquetas del lenguaje HTML como <div> o <p> automáticamente.

Opción2: {([Brace –> Cierra los símbolos de paréntesis, corchete y llave automáticamente.

Para que funcione la opción 1 le tenemos que decir a nuestro programa en que lenguaje estamos programando (HTML) y lo hacemos desde la pestaña lenguaje.

lenguaje html en notepad

6) Indicación del cierre de etiquetas

Una cosa que me gusta de este programa por muy simple que parezca es que te indica donde comienza y donde acaba una etiqueta, muchas veces he tenido en un archivo muchas etiquetas <div> y hay un momento que creas una de más y ya está la confusión, tienes que ir una por una viendo cual es el que sobra y si están cerradas en el sitio que toca.

Está función ya viene predeterminada con el programa, no se hace falta instalar nada.

pulsando etiquetas HTML

En la imagen vemos que al pulsar una etiqueta <div> automáticamente la otra se selecciona, una gran ayuda sin duda para tener un orden cuando se programa y evitar fallos de programación.

7) Codificación

En esta pestaña podemos escoger la codificación que deseemos, lo que quiere decir esto es que la codificación es el proceso donde la información que tenemos se convierte en ciertos símbolos con sus reglas propias para finalmente ser visualizada, hablando algo más claro por ejemplo para el idioma Español necesitamos una codificación que contenga los símbolos de los acentos y ñ, por eso deberemos escoger la codificación adecuada, en nuestro caso escogeríamos UTF-8.

codificacion-notepad

8) Conexión FTP usando el plugin NppFTP

Notepad ++ nos da la opción de poder conectarnos por FTP a nuestro servidor, obviamente no es tan potente como otros programas como FileZilla pero para algunos casos nos puede ser útil y rápido.

El plugin que usaremos es NppFTP y lo podemos encontrar en la barra superior en la pestaña plugins/NppFTP/Show NppFTP window

Después nos aparecerá un panel, lo primero que debemos hacer es crear una conexión nueva, para ello pulsamos la ruedecita settings y seleccionamos Profile Settings.

En el nuevo panel que nos aparecerá pulsamos Add new y a continuación introduciremos los datos correspondientes al servidor que deseemos conectarnos.

plugin nppFTP

 

8) JSMin

Se puede descargar aquí

El plugin JSMin sirve principalmente para minificar archivos js aunque también se puede minificar archivos css con él.

Usarlo es realmente sencillo solo tenemos que abrir un archivo js o css con notepad++, después nos dirigimos a la pestaña plugins/JSTool/JSMin y posteriormente veremos como nuestro archivo se muestra comprimido después de eliminar espacios en blanco, tabulaciones… de nuestro documento.

«Este programa está realmente bien, interfaz muy sencilla, rápido, gratuito y muy funcional, yo lo utilizo para programar en HTML pero creo que para trabajar en lenguajes como PHP o Javascript recomendaría algún programa más potente como DreamWeaver o Eclipse»

Iván Martínez

Ingeniero Informático apasionado por el mundo del desarrollo WEB. Me gusta caminar por este mundo lleno de tecnologías y día a día aprender cosas nuevas como el doctor Frankenstein ¡dadme cosas para experimentar!

8 comentarios en «Funciones principales de Notepad++ para trabajar en desarrollo Web»

  • el May 26, 2016 a las 8:06 pm
    Enlace permanente

    Hola Iván, muy buen post realmente notepad ++ es un editor de calidad, tengo una pregunta sabes si en notepad++ es posible para el lenguaje SQL, el editor detecto palabras resrervadas y las coloque en mayuscula?

    por ejemplo

    Yo escribo
    select * from country;

    Que notepad++ lo formatee
    SELECT * FROM country;

    en caso de que no se pueda con notepad++ sabes de algún editor que si lo haga ?

    Gracias

    Respuesta
    • el May 31, 2016 a las 3:52 pm
      Enlace permanente

      Hola, lo siento pero no conozco ningún editor ni plugin de Notepad++ que haga la funcionalidad que has descrito.

      Como remedio «casero» siempre puedes usar la función buscar/reemplazar o si te interesa mucho puedes desarrollar un script que haga lo que quieras sobre tu documento de Notepad++, que en ese aspecto Notepad++ es muy abierto. Saludos.

      Respuesta
    • el Oct 17, 2019 a las 5:16 pm
      Enlace permanente

      tienes que seleccionar en setings, luego en «general»
      seleccionas «español»

      Respuesta
  • el Ene 10, 2020 a las 6:17 pm
    Enlace permanente

    Hola buen día, me interesa utilizar notepad para realizar unas paginas web, pero tengo la duda su puedo realizar maquetación web dentro de este programa y si puedo publicar mis páginas.
    Saludos y que buena información tiene tu sitio.

    Respuesta
    • el Ago 15, 2020 a las 12:04 am
      Enlace permanente

      ¡Hola! He estado observando y por lo que sé, no puedes publicar páginas oficialmente. Son legibles solo para tu ordenador, pero si quieres publicar una página sin tanta programación y codificación te recomiendo la página «Zyro Web» a mi me ha sido de mucha utilidad, espero que también lo sea para ti Ana. Saludos. K

      Respuesta

Deja una respuesta

Tu dirección de correo electrónico no será publicada.