Documentación técnica:

Editores de código
2 de 29
Índice

1. Introducción …………………………………………………………………………………………………………………… 5

1.1. Características …………………………………………………………………………………………………… 5

2. Editores de texto ………………………………………………………………………………………………………… 6

2.1. Notepad++…………………………………………………………………………………………………………… 6

2.2. Brackets ……………………………………………………………………………………………………………… 7

2.3. Atom ……………………………………………………………………………………………………………………… 9

2.4. Sublime Text …………………………………………………………………………………………………… 11

2.5. Visual Studio Code …………………………………………………………………………

……………… 12

3. Instalación detallada de Visual Code ……………………………………………………………… 14

4. Entorno de desarrollo Eclipse …………………………………………………………………………… 20

5. Instalación detallada de Eclipse para desarrolladores de

JavaScript y TypeScript ……………………………………………………………………………………………… 21
4 de 29
1. Introducción

Una de las partes fundamentales a la hora de empezar a programar en cualquier

lenguaje de programación es el uso de un editor de código fuente adecuado.

Si bien es cierto que con cualquier editor de texto es posible escribir código fuente,
un editor de texto especializado facilita el trabajo y ahorra mucho tiempo al
desarrollador facilitándole algunas tareas.

En este tema veremos algunos de los editores de textos más utilizados en la

actualidad para la programación de aplicaciones web.

Los editores de textos son una parte fundamental de los entornos integrados de
desarrollo (IDEs) que veremos en el próximo tema. Los IDEs, además de incluir un
editor de texto, proporcionan funcionalidades adicionales como la integración con
librerías, completado automático de código, compilación, visores WYSIWYG
(What You See Is What You Get), etc.

1.1. Características

Los editores de textos son aplicaciones informáticas dedicadas a la creación y

modificación de archivos digitales compuestos por textos sin formato (o texto
plano).

Un editor de texto suele tener funciones básicas para el tratamiento de texto:

selección de texto, copiar, pegar, búsqueda, deshacer, etc.

En general, todos los editores de texto disponen de una parte principal de la

pantalla donde se muestra el contenido del archivo que se está editando, un menú
principal donde se encuentran todas las opciones disponibles y luego, en la parte
lateral, bien a la izquierda y/o la derecha otra información que permite acceder a
partes del código más rápidamente.

5 de 30
2. Editores de texto

En la actualidad hay multitud de editores de texto disponibles, tanto gratuitos

como de pago. Todos ellos nos servirían para nuestro propósito de desarrollar un
programa. La gran mayoría de ellos dan soporte para múltiples lenguajes de
programación, y disponen de extensiones que amplían sus funcionalidades.
Aunque el resultado sea el mismo, y entre muchos de ellos haya grandes
similitudes de apariencia y funcionamiento, siempre existen pequeñas diferencias
entre ellos. Como para gustos existen los colores, podemos elegir el que más se
ajuste a nuestras preferencias.

En este apartado se presentan algunos los más utilizados, algunos de ellos forman
parte de entornos integrados de desarrollo (IDEs) que veremos en el próximo
tema.

2.1. Notepad++

Es un editor de texto, de código libre desarrollado en C++, que utiliza

directamente el API de Windows y la librería STL. Lo que aporta un buen
rendimiento en tiempo de ejecución y tamaño reducido.

Podemos visitar la página del editor en la dirección: https://notepad-plus-

plus.org/

Menú

Parte principal
(edición)

Acceso a
información rápida

Figura 1. Vista principal del editor Notepad++

6 de 30
2. Editores de texto

Algunas extensiones destacadas

Las extensiones pueden instalarse a través del menú Plugins, donde podemos
encontrar un gestor para las mismas:

Figura 2. Vista detalle del submenú de instalación de extensiones Notepad++

A continuación, se enumeran algunas de las extensiones más destacadas:

• “Brackets Emmet”, extensión que permite añadir el popular conjunto de

herramientas Emmet, que facilita el trabajo del programador mediante el uso
de abreviaciones y atajos de teclado.
• “Markdown for Notepad++”. Extensión para resaltar la sintaxis de lenguajes no
soportados de forma nativa por Notepad++.
• “Emmet”. Extensión muy popular que permite agilizar el proceso de desarrollo
en HTML, CSS, Sass y Less, mediante el uso de abreviaciones. Es interesante
visitar la página https://emmet.io/ donde pueden verse todos los métodos
abreviados que existen para los diferentes lenguajes.
• “Multiclipboard”. Extensión que permite disponer de un historial de texto
copiado, para volver a reutilizarlo.
• “Compare”. Extensión para comparar el contenido de dos archivos.

2.2. Brackets

Brackets es un editor de texto de código abierto desarrollado a partir de Adobe

Edge Code, que ha sido creado utilizando JavaScript, HTML y CSS. Soporta

7 de 30
2. Editores de texto

múltiples formatos de archivos, incluye pre-procesadores de texto. Posee una

interfaz sencilla, y un peso mínimo (ocupa muy poco espacio en memoria y disco).

Una de las características más populares de Brackets es la edición rápida, que

hace que la edición en línea sea relativamente rápida y fácil.

Hay otras características interesantes que los usuarios pueden aprovechar como,
por ejemplo, la entrada en vivo que crea instantáneamente una vista previa del
trabajo de codificación realizado mientras están trabajando con él. Otra
característica interesante, es la integración con el depurador de JavaScript
Theseus.

Como nota negativa, podemos señalar los problemas de compatibilidades con

plugins de terceros.

La página desde donde podemos descargar el editor, extensiones y consultar

información relativa al mismo es http://brackets.io/

La apariencia principal de este editor es la siguiente:

Figura 3. Vista principal del editor Brackets mostrando un fichero HTML

8 de 30
2. Editores de texto

Algunas extensiones destacadas

• “Brackets Emmet”, extensión que permite añadir el popular conjunto de

herramientas Emmet, que facilita el trabajo del programador mediante el uso
de abreviaciones y atajos de teclado.
• “Brackets Git”, es una extensión que permite integrar el popular control de
versiones Git en el entorno de desarrollo de Brackets.
• “Brackets Beautify”, es una extensión que permite optimizar el código más
rápidamente haciendo uso de atajos de teclado. Utiliza para ello JS-Beautify.
• “CanIUse Extension”, herramienta que ofrece las estadísticas y características
de los navegadores más populares. Útil para saber qué tecnología admite cada
navegador desde el propio entorno de Brackets, pensando sobre todo ver en
que navegadores no soportan ciertas tecnologías.
• “Markdown Preview” extensión que muestra una vista previa de documentos
con markdown (HTML, PHP, Python, Ruby, Java, etc.) desde dentro del
entorno de desarrollo.
• “eqFTP” cliente FTP/SFTP para la transferencia y sincronización de archivos
con servidores remotos.
• "JavaScript-Snippets". Ayuda a escribir fácilmente código fuente en
JavaScript.
• “Brackets Icons” extensión simple que permite añadir iconos a los archivos que
se encuentra en la barra lateral de la interfaz de Brackets.
• “Brackets Autoprefixer” extensión que permite añadir prefijos comerciales
(vendor prefixes) a las propiedades en CSS.
• “Brackets Minimap” extensión que permite añadir un mapa de navegación de
código parecido al que tiene Sublime Text. Minimap.

2.3. Atom

Es un editor fruto de la red GitHub, se define como un editor de texto totalmente

‘hackeable’ y es esta su principal característica. Entendiendo hackeable como
totalmente personalizable, ya que el código es 100% abierto.

Es un editor ligero, con un interfaz personalizable, con varios paquetes de

instalación alternativos y varios temas disponibles. Y un gran número de
extensiones, en su inmensa mayoría gratuitas, disponibles desde la comunidad
GitHub. El paquete GitHub ya está incluido con Atom.

9 de 30
2. Editores de texto

Toda esta información está disponible desde https://atom.io/

La vista principal de este navegador es la siguiente:

Figura 4. Vista principal del editor Atom mostrando un fichero XML

Algunas extensiones destacadas

• “Emmet”, permite agilizar el proceso de desarrollo en HTML, CSS, Sass y Less,

ofrece una serie de abreviaciones para trabajar rápidamente con cualquiera de
estos lenguajes.
• “Git Plus” permite trabajar con Git desde el editor Atom. Desde dentro del
mismo editor se puede realizar commits, push, pull …
• “Beautify”. Extensión que permite optimizar el código y hacerlo más legible.
• “Linter”, corrector que verifica tu código en busca de algún error. Es necesario
instalar el paquete específico para el lenguaje a verificar.
• “Vim mode”. Permite incluir el control modal propio del editor Vim en Atom.
• “Minimap”. Extensión que muestra una vista previa del código fuente, permite
verificar el código de manera rápida.
• “Merge Conflicts”. Extensión que permite resolver los conflictos ocasionados
por el comando git merge.
• “File Icons” permite añadir iconos a diferentes formatos de archivo.

10 de 30
2. Editores de texto

• "JavaScript-Snippets". Ayuda a escribir fácilmente código fuente en

JavaScript.

2.4. Sublime Text

Sublime Text es un editor de texto y editor de código fuente desarrollado sobre

C++, utiliza Python para las extensiones. Originalmente se desarrolló como una
extensión de Vim. Hay que señalar que no es software libre ni tampoco de código
abierto, aunque la versión de evaluación es operativa y no caduca.

Se puede descargar y obtener más información desde el portal:

http://www.sublimetext.com/

La vista principal de este navegador es la siguiente:

Figura 5. Vista principal del editor SublimeText mostrando un fichero XML

Algunas extensiones destacadas

• “Emmet”. Extensión que permite añadir el popular conjunto de herramientas

Emmet.

11 de 30
2. Editores de texto

• “SFTP”. Extensión para la transferencia y sincronización de archivos con

servidores remotos.
• “SublimeCodeIntel”. Extensión que mejora la funcionalidad de autocompletar
código y reconoce las funciones personalizadas.
• “LiveReload”. Extensión que posibilita la recarga en tiempo real del navegador
desde el editor.
• “BracketHighlighter”. Extensión que permite resaltar los códigos de apertura
típicos y los que se quieran personalizar.
• “DocBlockr”. Extensión para insertar comentarios de cara a la documentación
del proyecto.
• “SideBarEnhancements”. Extensión que añade muchas funcionalidades a la
barra lateral de navegación.
• “HTML5”. Extensión de cara a trabajar con HTML4.

2.5. Visual Studio Code

Es uno de los editores más potentes y utilizados. Desarrollado por Microsoft, es un

software libre y de código abierto. Ofrece soporte para multitud de lenguajes, es
fácilmente personalizable con gran cantidad de temas.

Las principales características son que dispone de la funcionalidad de detectar y

autocompletar el código que se está escribiendo. La depuración se realiza
directamente desde el propio editor, con puntos de interrupción, consola
interactiva… Otra característica reseñable es que viene ya directamente vinculado
con Git.

La página web oficial del editor es https://code.visualstudio.com/

Algunas extensiones destacadas

En este editor, se pueden instalar extensiones desde un botón dedicado a ello en la

parte izquierda:

12 de 30
2. Editores de texto

Figura 6. Vista detalle del submenú de instalación de extensiones Visual Code

• “Beautify”. Extensión que permite indentar el código para adecuarlo y hacerlo

más legible.
• “BookMarks”. Extensión que permite añadir marcas a nuestro código, y
navegar entre ellas.
• “GitLens”. Extensión para poder ampliar las funcionalidades básicas del editor
al trabajar con repositorios de código fuente.
• “CanIUse”. Permite consultar el soporte de los diferentes navegadores para
nuestro código.
• “Spelling and Grammar Checker” añade un corrector ortográfico y gramatical.
• “Bracket Pair Colorizer” colorea de forma automática determinados caracteres,
útil para ver el nivel de anidamiento.
• “Quokka” proporciona una herramienta de depuración que ofrece información
en tiempo real sobre el código, muestra previews de los resultados de las
funciones y los valores calculados de las variables.
• “Faker” Extensión que permite insertar de una forma rápida y sencilla datos de
ejemplo.
• “Prettier”. Formateador de código, que permite unificar la apariencia del código
para que sea la misma independientemente de quien lo haya escrito.

13 de 30
3. Instalación detallada de Visual Code

En este apartado se verá la instalación detallada de Visual Studio Code, que es el

editor de referencia que se utilizará a lo largo del curso, aunque se podría utilizar
cualquier otro editor.

La configuración de este editor se verá en el próximo tema como parte de los IDEs
(Entornos integrados de desarrollo).

Desde la página principal https://code.visualstudio.com/ podremos descargar el

instalable para el VisualCode. En este ejemplo procederemos a instalarlo bajo
sistema operativo Windows, pero en otro sistema operativo sería similar.
Accederemos al enlace “Download for Windows”.

Figura 7. Vista de la página principal de Visual Code

Posteriormente se mostrará una ventana que nos pregunta si queremos Guardar

el archivo o cancelar, indicaremos “Guardar archivo”.

14 de 30
3. Instalación detallada de Visual Code

En unos minutos estará accesible en fichero descargado:

Ejecutamos el archivo descargado, pulsando Aceptar:

Y luego clic sobre ejecutar:

15 de 30
3. Instalación detallada de Visual Code

Aceptar acuerdo de licencia y pulsar siguiente:

En las siguientes pantallas pulsamos Siguiente, y en la última que se muestra

pulsamos Instalar:

16 de 30
3. Instalación detallada de Visual Code

Se ha realizado la instalación con éxito por lo que solo restaría finalizar:

17 de 30
3. Instalación detallada de Visual Code

Tras instalarlo la pantalla principal de Visual Code es:

Haciendo clic sobre New file se abrirá una nueva ventana donde podremos
comenzar a editar nuestro código. Recomendamos que antes de editar,
guardemos el nuevo fichero con la extensión que necesitemos porque eso hará
que la edición de código se adapte al formato del archivo y sea más amigable.

Visual Code facilita la edición de código para un montón de archivos, que aparecen
a la hora de guardar un archivo. Lo habitual en nuestros ejemplos será trabajar
con extensión js (Javascript) o ts (Typescript).

18 de 30
3. Instalación detallada de Visual Code

Una vez guardado el archivo con la extensión, si escribimos cierto código, se podrá
visualizar de esta forma. Como vemos en el ejemplo aparece código TypeScript en
el que el editor colorea las palabras reservadas y facilita la apertura y cerrado de
llaves y paréntesis.

Figura 8. Vista de la página de edición de código del archivo Typescript Autobus.ts

19 de 30
4. Entorno de desarrollo Eclipse

Eclipse es uno de los entornos de desarrollo más conocidos que existen. Fue
desarrollado originalmente por IBM como el sucesor de su familia de
herramientas, aunque posteriormente fue liberado como licencia de software
libre, denominada Eclipse Public License. Hoy en día se gestiona a través de la
Fundación Eclipse, una organización independiente sin ánimo de lucro que
fomenta una comunidad de código abierto y un conjunto de productos
complementarios, capacidades y servicios.

Eclipse emplea módulos (en inglés plug-ins) para proporcionar todas las
funcionalidades que es capaz de ofrecer, a diferencia de otros entornos
monolíticos donde las funcionalidades están todas incluidas, las necesite el
usuario o no. Este mecanismo de módulos es una plataforma ligera para
componentes de software que permite a Eclipse extenderse usando otros
lenguajes de programación.

Eclipse provee al programador con frameworks muy ricos para el desarrollo de

aplicaciones gráficas, definición y manipulación de modelos de software,
aplicaciones web, etc. Por ejemplo, GEF (Graphic Editing Framework - Framework
para la edición gráfica) es un plugin de Eclipse para el desarrollo de editores
visuales que pueden ir desde procesadores de texto wysiwyg hasta editores de
diagramas UML, interfaces gráficas para el usuario (GUI), etc.

Eclipse es un entorno de desarrollo integrado, de código abierto y

multiplataforma. Mayoritariamente se utiliza para desarrollar lo que se conoce
como Aplicaciones de Cliente Enriquecido (entorno de desarrollo integrado) que
son opuestas a las denominadas aplicaciones Cliente-liviano, que están basadas
en navegadores.

Eclipse dispone de técnicas avanzadas de refactorización y análisis de código para

ayudar a los programadores. Como se ha indicado, mediante diversos plugins,
estas herramientas están también disponibles para otros lenguajes, incluidos
lenguajes de script no tipados como PHP o JavaScript.

20 de 30
5. Instalación detallada de Eclipse para
desarrolladores de JavaScript y TypeScript

Lo primero que hay que hacer es descargarse el paquete Eclipse IDE para
JavaScript y desarrolladores web desde:

https://www.eclipse.org/downloads/packages/

Se descomprime el paquete descargado, denominado Eclipse Installer 2020‑09 R,

que inicia automáticamente y mostrando un listado, solicita escoger el tipo de
entorno para instalar. Hay que seleccionar el Eclipse IDE for Web and JavaScript
Developers:

21 de 30
5. Instalación detallada de Eclipse para
desarrolladores de JavaScript y TypeScript

Y luego habrá que dar al botón Instalar:

22 de 30
5. Instalación detallada de Eclipse para
desarrolladores de JavaScript y TypeScript

Cuando el proceso de instalación finalice al cabo de pocos minutos, podemos

directamente lanzar el entorno haciendo clic sobre el botón verde:

Apareciendo el icono de comienzo de Eclipse:

La primera vez que arrancamos Eclipse, nos pedirá que seleccionemos una
carpeta para utilizarla como almacén de proyectos:

23 de 30
5. Instalación detallada de Eclipse para
desarrolladores de JavaScript y TypeScript

Y ya tendremos Eclipse preparado para poder hacer nuestros propios desarrollos:

Desde el menú de Ayuda | Marketplace podemos comprobar que se ha instalado

uno de los plug-ins específicos, como en este caso, Wild Web Developer para
JavaScript y TypeScript:

24 de 30
5. Instalación detallada de Eclipse para
desarrolladores de JavaScript y TypeScript

Para realizar un primer proyecto con Eclipse habrá que abrir un proyecto
específico, desde el menú File (Archivo) y New (Nuevo) Proyecto JavaScript:

25 de 30
5. Instalación detallada de Eclipse para
desarrolladores de JavaScript y TypeScript

Nos piden poner un nombre al proyecto:

26 de 30
5. Instalación detallada de Eclipse para
desarrolladores de JavaScript y TypeScript
Es importante hacer doble clic en el icono de carpeta MiPrimerProyectoJS para
desplegar su contenido completo.

Para empezar a escribir código en un fichero JS, hay que pinchar en la carpeta
MiPrimerProyectoJS y con el botón derecho mostrar el menú contextual en New
(Nuevo) y JavaScript Source File (Fichero JavaScript):

27 de 30
5. Instalación detallada de Eclipse para
desarrolladores de JavaScript y TypeScript
Hay que seleccionar el directorio padre y añadir un nombre para el fichero, por
ejemplo, Prueba.js:

Y ya podemos empezar a escribir nuestro código JS:

28 de 30
4 de 29