Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/midudev/jscamp/llms.txt

Use this file to discover all available pages before exploring further.

Visual Studio Code es el editor recomendado para JSCamp. Está disponible de forma gratuita en todos los sistemas operativos y cuenta con un ecosistema de extensiones que cubre todo lo que necesitarás a lo largo del bootcamp, desde la maquetación HTML del módulo 00 hasta la gestión de contenedores Docker en el módulo 10.

​
Extensiones Esenciales

Instala las siguientes extensiones para tener el entorno completamente preparado:

Live Preview

ms-vscode.live-serverPermite ver archivos HTML/CSS en tiempo real dentro del propio editor, sin necesidad de un servidor externo. Imprescindible para los módulos 00-html-css y 01-javascript.

ESLint

dbaeumer.vscode-eslintIntegra ESLint directamente en el editor y muestra los errores de linting de JavaScript y TypeScript en tiempo real mientras escribes código.

Prettier

esbenp.prettier-vscodeFormatea el código automáticamente al guardar. Garantiza un estilo consistente en todos los módulos del bootcamp.

ES7+ React/Redux Snippets

dsznajder.es7-react-js-snippetsProporciona snippets rápidos para React (rafce, useState, useEffect, etc.) que aceleran el desarrollo en los módulos 02-react y 03-router-and-zustand.

TypeScript Language Features

Incluido en VS CodeEl soporte de TypeScript viene integrado en VS Code. Asegúrate de tener la versión más reciente del editor para aprovechar todas las mejoras del módulo 06-typescript.

Docker

ms-azuretools.vscode-dockerOfrece una interfaz visual para gestionar imágenes, contenedores y archivos docker-compose.yml directamente desde VS Code. Muy útil en el módulo 10-docker.

​
Instalar Extensiones desde la Terminal

Si prefieres instalar las extensiones de una sola vez sin abrir el Marketplace, ejecuta los siguientes comandos: 
code --install-extension ms-vscode.live-server
code --install-extension dbaeumer.vscode-eslint
code --install-extension esbenp.prettier-vscode
code --install-extension dsznajder.es7-react-js-snippets
code --install-extension ms-azuretools.vscode-docker
Usa el terminal integrado de VS Code con el atajo Ctrl + ** (o **Cmd + en macOS) para ejecutar todos los comandos npm del bootcamp sin salir del editor. Puedes abrir múltiples terminales en pestañas y tener, por ejemplo, el servidor de desarrollo y el linter corriendo al mismo tiempo.

​
Configuración Recomendada de settings.json

Añade la siguiente configuración a tu archivo settings.json de VS Code para tener el formateo automático y las opciones de Emmet correctamente configuradas para React:
1

Abrir settings.json

Pulsa Ctrl + Shift + P (o Cmd + Shift + P en macOS) y busca Preferences: Open User Settings (JSON).
2

Copiar la configuración

Pega las siguientes claves dentro del objeto raíz del archivo:
settings.json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2,
  "emmet.includeLanguages": { "javascript": "javascriptreact" }
}
3

Guardar y verificar

Guarda el archivo. A partir de ahora, cada vez que guardes cualquier archivo JavaScript, TypeScript o JSX, Prettier lo formateará automáticamente.

​
Live Preview para Módulos HTML

Los módulos 00-html-css y 01-javascript no requieren ningún paso de compilación: son archivos HTML, CSS y JavaScript puros. La extensión Live Preview te permite visualizarlos directamente en VS Code:
  1. Abre cualquier archivo index.html del módulo.
  2. Haz clic derecho sobre el archivo en el explorador de archivos y selecciona Show Preview.
  3. Se abrirá un panel con el resultado visual en tiempo real. Cada vez que guardes un cambio, la vista previa se actualizará automáticamente sin necesidad de recargar el navegador.
Esta forma de trabajo es equivalente a usar una extensión como Live Server, pero sin abrir una ventana del navegador aparte, lo que mantiene todo el flujo de desarrollo dentro del editor.

Build docs developers (and LLMs) love

Get started for freeTalk to us