Configurar el Entorno de trabajo para Javascript

Introducción

El propósito principal de este documento es proporcionar una visión clara y detallada sobre las herramientas necesarias para desarrollar, depurar y mantener código en JavaScript. Para ello, se explorarán los editores de código más utilizados, entornos de ejecución, gestores de paquetes, depuradores y otras herramientas que facilitan el desarrollo eficiente y estructurado de aplicaciones en este lenguaje.

Se abordarán aspectos clave como la instalación y configuración de un entorno de desarrollo adecuado, la elección de un editor de código óptimo, la integración con control de versiones y la automatización de tareas para mejorar la productividad en proyectos JavaScript.

Navegadores (Browsers)

Primero se necesita de un navegador moderno, a continuación se muestra un listado de los navegadores modernos más utilizados en la actualidad:

Mozilla Firefox
Brave
Opera
Apple Safari
Google Chrome
Microsoft Edge

Instalación de un Navegador

Para instalar cualquiera de estos navegadores, primero es necesario descargar el archivo instalador desde el sitio web oficial del navegador elegido. Este archivo suele tener una extensión .exe en Windows y .dmg en macOS.

Una vez descargado el archivo, el proceso de instalación es sencillo:

Hacer doble clic sobre el archivo instalador.
Seguir las instrucciones del asistente de instalación, que generalmente consiste en hacer clic en "Siguiente" varias veces.
Finalmente, hacer clic en "Instalar" y esperar a que el proceso finalice.

En algunos casos, como en Linux, los navegadores pueden instalarse a través del gestor de paquetes del sistema, utilizando comandos en la terminal. Por ejemplo, en Ubuntu se puede instalar Firefox con el siguiente comando:

                    
                      sudo apt install firefox

Una vez instalado, el navegador estará listo para su uso.

Editores de Código

Un editor de código es una herramienta de software diseñada específicamente para escribir y editar código fuente de programas informáticos. Los editores de código proporcionan un entorno optimizado para los desarrolladores, ofreciendo características que facilitan la escritura, lectura y organización del código. Se utilizan principalmente para el desarrollo de software, desde aplicaciones web y móviles hasta sistemas complejos.

Características Principales de un Editor de Código

Resaltado de Sintaxis: Muestra el código en diferentes colores y estilos según la sintaxis del lenguaje, lo que facilita la lectura y comprensión.
Autocompletado: Sugerencias automáticas mientras se escribe, que ahorran tiempo y reducen errores tipográficos.
IntelliSense: Proporciona sugerencias inteligentes basadas en el contexto del código, incluyendo nombres de variables, funciones y parámetros.
Depuración: Herramientas integradas para ejecutar y probar el código, permitiendo establecer puntos de interrupción, inspeccionar variables y seguir el flujo del programa.
Integración con Control de Versiones: Soporte para sistemas de control de versiones como Git, que permite realizar commits, ver diferencias y gestionar ramas directamente desde el editor.
Terminal Integrado: Un terminal insertado que permite ejecutar comandos sin salir del editor.
Extensiones y Plugins: Posibilidad de añadir funcionalidades adicionales mediante extensiones o plugins desarrollados por la comunidad o terceros.
Multilenguaje: Soporte para múltiples lenguajes de programación, facilitando el trabajo en proyectos que usan más de un lenguaje.

Ejemplos de Editores de Código Populares

Visual Studio Code (VS Code): Este es editor de código más popular, para windows es recomendable descargar el System Installer por ser la mejor opción.
Sublime Text 4: Sigue siendo un editor de código relevante y eficaz en el panorama actual del desarrollo de software, también dispone de una versión portable.
WebStorm: Este editor sigue siendo uno de los entornos de desarrollo integrados (IDE) más avanzados y populares para el desarrollo en JavaScript, TypeScript y tecnologías relacionadas. Desarrollado por JetBrains, WebStorm es altamente valorado por su conjunto de características avanzadas, rendimiento robusto y capacidad para mejorar la productividad del desarrollador. Ese IDE tiene un costo de US $69.00 el primer año, sin embargo tiene una licencia gratuita para estudiantes.
Brackets: Este editor fue desarrollado por Adobe, pero en el 2021 lo abandona y se convierte en un proyecto de código abierto bajo la licencia MIT.
Notepad++
Github Atom
Vim

Visual Studio Code (VSC)

Este es el editor de código más utilizado por la comunidad, de este se mostrará los temas y extensiones que más se usan en el desarrollo web.

Temas

Se recomienda elegir un tema de tono oscuro para cuidar la salud visual del programador.

Material Icon Theme: Esta extensión reemplaza los iconos predeterminados de VSC con iconos que son más distintivos y visualmente atractivos, lo que facilita la identificación rápida de los tipos de archivos y carpetas en tu proyecto.
Drácula Official: Un tema oscuro con colores vibrantes y alto contraste que es fácil para los ojos durante largas sesiones de codificación. Material Theme: Inspirado en Material Design de Google, este tema ofrece una apariencia limpia y moderna con colores atractivos y una paleta bien equilibrada.
One Dark Pro: Basado en el tema por defecto de Atom, este tema oscuro es popular por su estilo elegante y su legibilidad.
Monokai: Un tema clásico que ha sido popular durante mucho tiempo, conocido por su combinación distintiva de colores brillantes y oscuros.
Night Owl: Diseñado para minimizar la fatiga visual, este tema oscuro ofrece colores suaves y contrastes cuidadosamente ajustados.
Cobalt2 Theme Official: Desarrollado por el diseñador Wes Bos, este tema tiene colores llamativos y un estilo moderno y limpio.
City Lights Theme: Con un diseño minimalista y una paleta de colores suaves, este tema es popular entre aquellos que prefieren un aspecto discreto pero elegante.
Tokyo Night Theme: Inspirado en la vida nocturna de Tokio, este tema oscuro presenta colores atrevidos y vibrantes que se destacan en la oscuridad. GitHub Theme: Basado en los colores utilizados en GitHub, este tema es simple y limpio, ideal para aquellos que desean una experiencia de codificación familiar.
Nord Theme: Con una combinación de tonos fríos y cálidos, este tema ofrece un aspecto único y atractivo que es popular entre muchos usuarios de VSC.

Extensiones

Las más utilizadas son:

ESLint: Ayuda a identificar y corregir errores de estilo y sintaxis en tu código JavaScript, siguiendo las reglas definidas en el archivo de configuración ESLint.
Prettier: Formatea automáticamente el código JavaScript según las reglas predefinidas, lo que ayuda a mantener un estilo de código consistente en todo el proyecto.
npm: Proporciona soporte para trabajar con el gestor de paquetes npm dentro de VSC, lo que facilita la instalación, actualización y eliminación de dependencias en el proyecto.
Path Intellisense: Proporciona autocompletado de rutas de archivos y directorios en tu código JavaScript, lo que facilita la navegación dentro del proyecto.
Code Runner: Permite ejecutar rápidamente porciones de código JavaScript seleccionadas o el archivo completo desde Visual Studio Code, sin necesidad de salir del editor.
JavaScript (ES6) code snippets: Ofrece una colección de snippets (fragmentos de código) para JavaScript ES6, lo que acelera la escritura de código al proporcionar atajos para estructuras de código comunes.
Live Server: Permite iniciar un servidor web local para proyectos de desarrollo en JavaScript y proporciona actualizaciones en tiempo real del navegador mientras se realizan cambios en el código.
Bracket Pair Colorizer: Colorea los pares de corchetes y paréntesis en tu código JavaScript para facilitar la identificación de bloques de código anidados.
GitLens: Ofrece una integración avanzada con Git dentro de Visual Studio Code, lo que permite ver información detallada sobre los cambios, autores y líneas de código modificadas en el repositorio Git.

Node.js

Node.js es un entorno de ejecución basado en JavaScript que permite ejecutar código en el lado del servidor. Utiliza el motor V8 de Google Chrome para interpretar y ejecutar JavaScript de manera eficiente. Su arquitectura orientada a eventos y su modelo de entrada/salida asíncrono lo hacen ideal para desarrollar aplicaciones escalables y de alto rendimiento, como servidores web, APIs y aplicaciones en tiempo real. Node.js es un para JavaScript en el lado del servidor.

A continuación, se presentan los pasos para instalar y configurar Node.js correctamente:

Instalación y Configuración de Node.js

Instalar Node.js

Descargar el instalador desde la página oficial de Node.js. Se recomienda instalar la versión LTS (Long-Term Support), ya que es más estable y adecuada para la mayoría de proyectos.
Seguir las instrucciones del instalador según el sistema operativo (Windows, macOS o Linux).

Verificar la Instalación

Abrir una terminal o línea de comandos y ejecutar: Esto mostrará la versión instalada de Node.js.

                          
                            node -v

Verificar también la versión de npm (Node Package Manager), que se instala junto con Node.js:

                          
                            npm -v

Crear un Nuevo Proyecto en Node.js

Abrir una terminal y navegar hasta la ubicación donde se creará el proyecto.

Crear una carpeta para el proyecto y acceder a ella:

                          
                            mkdir mi_proyecto
                            cd mi_proyecto

Inicializar el proyecto con el siguiente comando:

                          
                            npm init -y

Instalar Dependencias y Paquetes

Si se va a utilizar un framework como Express para crear un servidor, se instala con:

                          
                            npm install express

Otras dependencias comunes incluyen:
- dotenv: para gestionar variables de entorno (npm install dotenv)
- nodemon: para recargar automáticamente el servidor en desarrollo (npm install --save-dev nodemon )

Crear y Ejecutar un Servidor con Express

Crear un archivo server.js en la carpeta del proyecto y agregar el siguiente código básico:

                          
                            const express = require('express');
                            const app = express();
                            const port = 3000;

                            app.get('/', (req, res) => {
                                res.send('¡Hola, mundo desde Node.js y Express!');
                            });

                            app.listen(port, () => {
                                console.log(`Servidor en ejecución en http://localhost:${port}`);
                            });

Ejecutar el servidor con:

                          
                            node server.js

O, si se usa nodemon para desarrollo:

                          
                            npx nodemon server.js

Configuración de Git (Opcional)

Si se planea trabajar con control de versiones, configurar Git en el entorno:

Instala Git desde git-scm.com

Configurar Git con la información del programador, en la terminal ejecutar el siguiente código:

                      
                        git config --global user.name "Nombre"
                        git config --global user.email "email@example.com"

Para crear un nuevo repositorio de Git, navega a la carpeta de del proyecto y ejecute el siguiente comando:

                      
                        git init

Un repo es la base de datos donde Git almacena todos los commits y la historia del proyecto.

COMENTARIOS

Si tiene alguna inquietud, duda o ha encontrado algún error, por favor infórmelo a través del formulario disponible para este propósito.