Blog
IDEs y Editores de Texto para JavaScript
- Publicado por: Rafael Fernandez
- Categoría: Nivel Principiante Javascript
Antes de comenzar a escribir código JavaScript, debemos saber donde hacerlo.
Por ello, mostraremos a continuación, aquellas aplicaciones que por sus bondades y características se han convertido en los preferidos de los programadores de experiencia.
También explicaremos la instalación de cada uno de estos programas en el Sistema Operativo “Windows”.
Entornos de desarrollo integrado
Un IDE es un entorno de desarrollo, elaborado con herramientas integradas que facilitan la creación de software.
Estas aplicaciones son muy útiles a la hora de programar, porque poseen un área de trabajo amigable, sencillo de manejar, ideal para quien se está iniciando. Además, son multiplataforma y soportan una gran cantidad de lenguajes.
Los más utilizados son:
· Eclipse para desarrolladores JavaScript
JSDT (JavaScript Developer Tool), es un proyecto de Eclipse que pretende instituir el propio IDE para JavaScript.
Es un complemento que suministra ventajas en la programación con JS; por ejemplo, posee un adecuado resaltado de sintaxis, la posibilidad de utilizar la herramienta de autocompletado, generación de documentos con extensión JSDoc, aplicación de técnicas de refactorización y es capaz de realizar análisis de flujo.
Instalación del programa:
- Accede al siguiente enlace https://eclipse.org/downloads/eclipse-packages/
- Elige la opción “Eclipse IDE para desarrolladores de JavaScript y Web”.
- Puedes optar entre 32 bits o 64 bits, según las características de tu sistema operativo. Para saber cual es la que corresponde a tu computadora, presiona clic derecho en “Mi PC” y mira las propiedades.
- Presiona el botón “Download”.
- Al haberse terminado la descarga, verás un fichero con extensión .zip.
- Descomprímelo, abre la carpeta y ejecuta el instalador.
- Se te aparecerá un cuadro de dialogo para indicar el directorio donde deseas que se guarden tus proyectos. Si activas el checkbox que aparece allí, podrás fijar el directorio para las próximas veces.
Configuración de Eclipse:
- Presiona “Help” del menú superior y presiona abajo donde dice: “Install New Software”
- En la barra “Work With”, agrega el repositorio del complemento a instalar; los cuales se encuentran en el siguiente enlace https://projects.eclipse.org/.
- Das clic en “Add”, le colocas un nombre y presiona “Next”.
- Se te mostrará una lista de complementos, en el cual deberás elegir el que más te interesa o en su defecto añadirlos todos.
- Luego acepta los términos y finaliza presionando el botón “Finish”.
- Es importante resetear el eclipse para establecer los cambios.
Complementos:
- Para cambiar el idioma usa el complemento “Eclipse Babel”. Copia el enlace que le sigue a la frase “Agregue al Repositorio”.
- Y el que sirve para añadir ventanas es windowbuilder. En este caso presiona clic derecho sobre la palabra “Link” de la versión más actual y elige la opción “Copiar Enlace”.
· NetBeans
Es un IDE libre y gratuito que está hecho pensando en la programación Java, pero que a la vez permite la creación de aplicaciones web, incluyendo la creación de código JavaScript.
Instalación del programa:
- Accede al sitio https://www.netbeans.org
- Pulsa el botón “Download”.
- Aparecerá una página con la descripción de los paquetes del programa.
- Elige el idioma y presionamos el botón “Download” que aparece debajo de la lista con encabezado “All”.
- Espera a que termine la descarga y luego ejecuta el instalador.
- Cuando se te indique, presiona el botón “Siguiente”.
- Aceptamos los términos y vuelve a dar clic en “Siguiente”, hasta que llegas al final de la instalación donde presionarás el botón “Terminar”.
Para empezar a escribir código:
- Presiona del menú superior la opción “Proyecto Nuevo” o utiliza la combinación de teclas “Ctrl+Shift+N”.
- Aparecerá un cuadro de diálogo donde aparecerán varias categorías.
- Selecciona HTML 5 y presiona “Siguiente”.
- Procede a colocar el nombre del proyecto y da clic en “Siguiente”.
- Se te aparecerá una pantalla que te pedirá la librería JS, en caso de ser necesario. Como vimos en la lección anterior, la más popular es JQuery, pero hay muchas más.
Editores de texto
Por su parte, los editores de texto permiten visualizar el código de manera distinguida; es decir, modifican el formato de texto haciendo que este muestre las diferencias entre un trozo de código y otro.
Ahora bien, los editores de texto modernos han evolucionado tan rápido que ahora agregan funciones similares a los IDEs. Por ejemplo: Atom y Sublime Text.
· Sublime Text
Lo que hace perfecto a este editor es su rapidez en ejecución, ya que contiene solamente lo necesario para programar. Pero también está provisto por un gran número de paquetes que aportan versatilidad y rendimiento a la hora de escribir el código.
Otra de las ventajas que puede llamar la atención tiene que ver con la posibilidad de personalizar su apariencia con los miles de temas que hay para aplicar.
Instalación del programa:
- Accede al sitio https://www.sublimetext.com/
- Pulsa el botón “Descargar para Windows”. El tiempo de descarga puede variar, dependiendo de la velocidad de conexión.
- Al terminar la descarga, busca el instalador y ejecútalo haciendo doble clic sobre él.
- Se abrirá la pantalla de instalación, donde deberás presionar “Siguiente” consecutivamente y por último “Instalar”.
Instalación del paquete para JavaScript:
- Accede al siguiente enlace https://packagecontrol.io/installation#st3
- Copia el código que se te aparecerá en la página.
- En la interfaz de Sublime Text, abre “View” del el menú superior y luego presiona donde dice “Show Console”.
- Allí pega el código y pulsa “Enter”.
- Luego selecciona la opción “Preferences” del menú superior y luego pulsa en “Package Control”.
- En la ventana emergente, seleccionar “Install Package”, si no lo vemos podemos escribirlo para buscarlo.
- Luego escribimos el nombre del paquete y listo.
Paquetes ideales para trabajar:
- Emmet: permite la creación automática de bloques HTML, usando abreviaciones.
- HTML-CSS-JS Prettify: sirve para maqueta el código.
· Atom
Es un editor de texto muy similar a un IDE por las tantas funciones que trae incorporadas. Por ejemplo, el autocompletado, múltiples paneles de trabajo y complementos y paquetes que facilitan la tarea de programar en JavaScript.
Instalación del programa:
- Accede a la página atom.io
- Pulsa el botón “Descargar”. El tiempo de descarga puede durar unos minutos, dependiendo de la velocidad de conexión.
- Al terminar la descarga, presiona doble clic en el instalador.
- Después de finalizar la instalación, se abrirá la pantalla de inicio, donde podrás cambiar el tema y descargar los paquetes necesarios para trabajar con JavaScript.
Instalación del paquete para JavaScript:
- Selecciona la opción “Instalar un Paquete” en la pantalla principal del programa.
- Busca el nombre del plugin que instalarás.
- Elige de entre la lista, el que necesitas.
- Presiona clic en instalar y listo.
En vista de que queremos habilitarlo para manejar JavaScript, debemos instalar el autocompletado (atom-ternjs) y el controlador de errores (linter-jscs).
Para empezar a escribir código:
- Presiona del menú superior la opción “Archivo”.
- Luego presiona “Nuevo Archivo” o utiliza la combinación de teclas “Ctrl+N”.
[…] hacer es abrir nuestro editor, de seguro ya elegiste cual usar después de haber leído el módulo IDEs y Editores de Texto para JavaScript; si no lo has hecho aún, te recomendamos […]
[…] hacer es abrir nuestro editor, de seguro ya elegiste cual usar después de haber leído el módulo IDEs y Editores de Texto para JavaScript; si no lo has hecho aún, te recomendamos […]