Capítulo 4: Herramientas y Entorno de Desarrollo

Un carpintero con herramientas deficientes produce trabajos deficientes, sin importar cuál sea su habilidad. Del mismo modo, un desarrollador web con un entorno de desarrollo inadecuado será menos productivo, cometerá más errores y tendrá una experiencia frustante. Este capítulo te guía a través de la configuración de un entorno profesional de desarrollo JavaScript, desde la selección del editor hasta la comprensión del ecosistema de Node.js y npm.

4.1. Editores de código recomendados

Visual Studio Code (VSCode) - RECOMENDADO

Visual Studio Code es la opción estándar en la industria para desarrollo JavaScript. Es gratuito, ligero, rápido y altamente extensible.

Por qué elegir VSCode:

• Gratuito y de código abierto

• Rendimiento excelente: Abre en menos de un segundo

• Ecosistema de extensiones masivo: Miles de extensiones disponibles

• Integración Git nativa: Control de versiones incorporado

• Terminal integrada: No necesitas cambiar de ventana

• IntelliSense potente: Autocompletado inteligente

• Debugging integrado: Breakpoints, stepping, watchers

Instalación:

1. Descarga desde https://code.visualstudio.com/

2. Instala siguiendo el asistente

3. Abre y listo para usar

Alternativas respetables

WebStorm (JetBrains)

• Más completo que VSCode

• De Pago (~$200/año)

• Ideal para proyectos empresariales grandes

• Mejor autocompletado de JavaScript

Sublime Text

• Muy ligero y rápido

• De Pago (~$80 única compra)

• Excelente para edición rápida

• Menos comunidad que VSCode

Vim/Neovim

• Curva de aprendizaje pronunciada

• Gratuito y ultra-ligero

• Para desarrolladores experimentados

• Productividad máxima una vez dominado

---

4.2. Extensiones esenciales para JavaScript

Extensiones que TODO desarrollador JavaScript debe instalar:

ESLint

Detecta errores y malas prácticas automáticamente:

// ESLint detecta:
var x = 5;  // ⚠️ 'var' es problemático, usar 'let' o 'const'
f( )        // ⚠️ Espacios innecesarios
if(x) {}    // ⚠️ Falta espacio después de 'if'

Instalación:

Extensiones → Buscar "ESLint" → Instalar

Prettier

Formatea el código automáticamente siguiendo estándares:

// Antes (desordenado):
function foo(a,b,c){return a+b+c;}

// Después (formateado por Prettier):
function foo(a, b, c) {
    return a + b + c;
}

Instalación:

Extensiones → Buscar "Prettier" → Instalar

Live Server

Actualiza automáticamente la página cuando cambias el código:

Click derecho en archivo HTML → Open with Live Server

Esto es extraordinario para desarrollo frontend: cambias el código, la página se actualiza automáticamente sin presionar F5.

Thunder Client / REST Client

Para probar APIs sin abandonar VSCode:

// Rest Client example
@baseUrl = https://api.github.com

GET @baseUrl/users/github

Better Comments

Hace comentarios más legibles y categorizados:

// ! Esto es importante
// ? Esto es una pregunta
// * Esto es un punto clave
// TODO: Esto hay que hacerlo
// HACK: Solución temporal

Extensiones recomendadas adicionales

Extensión	Propósito
Path Intellisense	Autocompletado de rutas de archivos
Code Spell Checker	Verifica ortografía en código y comentarios
GitLens	Ver historia de cambios en Git
Thunder Client	Cliente HTTP para probar APIs
Dark+ Material	Tema profesional y cómodo para la vista

---

4.3. Node.js y npm: El ecosistema de JavaScript

¿Qué es Node.js?

Node.js es un entorno de ejecución que permite ejecutar JavaScript fuera del navegador, en el servidor:

JavaScript en navegador:  ← El usuario interactúa
JavaScript en Node.js:    ← El servidor procesa

Esto es revolucionario porque permite usar el mismo lenguaje en frontend y backend.

Instalación de Node.js:

1. Descarga desde https://nodejs.org/

2. Descarga la versión LTS (Long Term Support)

3. Instala siguiendo el asistente

4. Verifica en terminal:

node --version    # v18.17.0
npm --version     # 9.8.1

¿Qué es npm?

npm (Node Package Manager) es el gestor de paquetes de JavaScript. Es como un "App Store" para código reutilizable:

┌─────────────────────────────────────────┐
│          npm Registry                   │
│  (Repositorio central de 2M paquetes)   │
└──────────────────┬──────────────────────┘
                   │
            npm install paquete
                   │
                   ▼
         Descarga e instala
                   │
                   ▼
         proyecto/node_modules/

Primeras órdenes npm

Crear un proyecto:

mkdir mi-proyecto
cd mi-proyecto
npm init

Esto crea un archivo package.json:

{
  "name": "mi-proyecto",
  "version": "1.0.0",
  "description": "Mi primer proyecto",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "keywords": [],
  "author": "Tu nombre",
  "license": "ISC"
}

Instalar paquetes:

# Instalar un paquete
npm install lodash

# El paquete se descarga en node_modules/
# Y se registra en package.json

{
  "dependencies": {
    "lodash": "^4.17.21"
  }
}

Usar el paquete:

// index.js
const _ = require('lodash');

const números = [3, 1, 4, 1, 5, 9, 2, 6];
console.log(_.uniq(números));  // [3, 1, 4, 5, 9, 2, 6]

Ejecutar scripts:

# Ejecutar el script definido en package.json
npm start

# O ejecutar un script personalizado
npm run miScript

{
  "scripts": {
    "start": "node index.js",
    "dev": "node --watch index.js",
    "test": "jest"
  }
}

npm run dev      # Ejecuta node con --watch (recarga automática)

---

4.4. Iniciando tu primer proyecto

Estructura típica de un proyecto JavaScript

mi-proyecto/
├── src/                    # Código fuente
│   ├── index.js           # Archivo principal
│   ├── utils.js           # Funciones reutilizables
│   └── components/        # Componentes reutilizables
├── public/                # Archivos estáticos
│   ├── index.html
│   └── style.css
├── node_modules/          # Paquetes instalados (no versionable)
├── package.json           # Información del proyecto
├── package-lock.json      # Lock de versiones exactas
├── .gitignore            # Archivos a ignorar en Git
└── README.md             # Documentación del proyecto

Paso a paso: Crear un proyecto desde cero

1. Crear carpeta del proyecto:

mkdir contador-app
cd contador-app

2. Inicializar npm:

npm init -y  # -y usa valores por defecto

3. Crear estructura:

mkdir src public
touch src/index.js public/index.html public/style.css

4. Crear .gitignore:

node_modules/
.DS_Store
.env
dist/
build/

5. Editar package.json:

{
  "name": "contador-app",
  "version": "1.0.0",
  "description": "Una aplicación contador simple",
  "main": "src/index.js",
  "scripts": {
    "start": "node src/index.js",
    "dev": "node --watch src/index.js"
  },
  "author": "Tu nombre",
  "license": "MIT"
}

6. Crear index.html:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contador App</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Contador Interactivo</h1>
        <div class="contador" id="contador">0</div>
        <button id="decrementar">-</button>
        <button id="incrementar">+</button>
        <button id="reiniciar">Reiniciar</button>
    </div>
    <script src="../src/index.js"></script>
</body>
</html>

7. Crear style.css:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container {
    background: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    text-align: center;
}

h1 {
    color: #333;
    margin-bottom: 30px;
}

.contador {
    font-size: 64px;
    font-weight: bold;
    color: #667eea;
    margin: 30px 0;
}

button {
    padding: 12px 24px;
    margin: 5px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: bold;
}

button:hover {
    transform: scale(1.05);
}

#decrementar, #incrementar {
    background: #e74c3c;
    color: white;
}

#incrementar {
    background: #2ecc71;
}

#reiniciar {
    background: #95a5a6;
    color: white;
    display: block;
    width: 100%;
    margin-top: 20px;
}

8. Crear index.js:

// src/index.js
let contador = 0;

const elementoContador = document.getElementById('contador');
const btnDecrementar = document.getElementById('decrementar');
const btnIncrementar = document.getElementById('incrementar');
const btnReiniciar = document.getElementById('reiniciar');

function actualizar() {
    elementoContador.textContent = contador;
}

btnDecrementar.addEventListener('click', () => {
    contador--;
    actualizar();
});

btnIncrementar.addEventListener('click', () => {
    contador++;
    actualizar();
});

btnReiniciar.addEventListener('click', () => {
    contador = 0;
    actualizar();
});

actualizar();

9. Ejecutar el proyecto:

# Instalar Live Server para desarrollo
npm install --save-dev live-server

# O simplemente abrir index.html en el navegador

---

4.5. Control de versiones con Git

¿Por qué usar Git?

Git es un sistema de control de versiones esencial para:

• Histórico de cambios: Revertir a versiones anteriores

• Colaboración: Trabajar con otros desarrolladores

• Branches: Desarrollar features sin afectar el código principal

• Backup remoto: Guardar código en la nube (GitHub, GitLab)

Configuración inicial de Git

# Instalar Git desde https://git-scm.com/

# Configurar identidad
git config --global user.name "Tu nombre"
git config --global user.email "[email protected]"

# Verificar configuración
git config --global --list

Órdenes Git básicas

# Inicializar un repositorio
git init

# Ver estado
git status

# Agregar cambios al staging area
git add .                 # Agregar todos
git add archivo.js        # Agregar archivo específico

# Hacer commit
git commit -m "Descripción del cambio"

# Ver histórico
git log

# Ver cambios
git diff

# Crear rama
git branch mi-feature

# Cambiar de rama
git checkout mi-feature
git switch mi-feature     # Forma moderna

# Fusionar rama
git merge mi-feature

Ejemplo completo: Tu primer commit

# 1. Inicializar repositorio
cd mi-proyecto
git init

# 2. Agregar archivo .gitignore (creado previamente)
git add .gitignore

# 3. Primer commit
git commit -m "Initial commit: proyecto configurado"

# 4. Ver el registro
git log

Conectar a GitHub

# Crear repositorio vacío en GitHub web

# Agregar origen remoto
git remote add origin https://github.com/usuario/mi-proyecto.git

# Renombrar rama principal (si es necesario)
git branch -M main

# Subir código
git push -u origin main

---

Resumen del Capítulo

Un entorno de desarrollo profesional es la base para escribir código profesional. Desde la selección de un buen editor de código hasta la comprensión del ecosistema de Node.js y npm, cada decisión impacta tu productividad y la calidad de tu trabajo.

💡 Conceptos Clave:

• VSCode: El editor estándar de la industria para JavaScript

• Extensiones críticas: ESLint, Prettier, Live Server

• Node.js: Permite ejecutar JavaScript fuera del navegador

• npm: Gestor de paquetes con acceso a 2M+ librerías reutilizables

• package.json: Define el proyecto y sus dependencias

• Estructura de proyecto: Organización lógica para escalabilidad

• Git: Control de versiones esencial para desarrollo profesional

• .gitignore: Evita versionear archivos innecesarios

🤔 Preguntas de Reflexión:

1. ¿Por qué es importante usar ESLint y Prettier en un equipo de desarrollo?

2. ¿Cuál es la diferencia entre npm install y npm install --save-dev?

3. ¿Por qué no debemos versionear la carpeta node_modules/ en Git?

4. ¿Cómo podrías colaborar con otro desarrollador en el mismo proyecto?

5. ¿Qué es package-lock.json y por qué es importante?

6. ¿Cómo crearías un script npm personalizado que ejecute múltiples tareas?

---