[Entorno de Desarrollo HTML/CSS/JS] Configuración y Extensiones de VSCode para Iniciar en el Desarrollo Web

PASO 1: ¡Prepara VSCode! [Instalación y Paquete de Idioma]

Primero, instalemos en tu ordenador a tu compañero de desarrollo web: VSCode. Es como conseguir un "cuchillo" para cocinar. Es muy fácil, así que terminemos esto rápidamente.

1. Descarga e Instalación de VSCode

Primero, descarga el instalador desde el sitio web oficial de VSCode.

Sitio Web Oficial de Visual Studio Code

Al acceder, verás un gran botón de descarga adaptado a tu sistema operativo (Windows, Mac, etc.). Haz clic para descargar y luego sigue las instrucciones en pantalla para instalar. No hay configuraciones complicadas, generalmente solo tienes que hacer clic en "Siguiente" o "Aceptar".

2. Cambiando el Idioma [Extensión de Paquete de Idioma]

Justo después de la instalación, los menús de VSCode estarán en inglés. Si te sientes cómodo con el inglés, puedes dejarlo así, pero a menudo es más tranquilizador usar tu idioma nativo. Intenté seguir con el inglés al principio, pero me rendí bastante rápido (jaja).

Para este artículo, usaremos el Paquete de Idioma Japonés como ejemplo. Usemos una "extensión", un complemento que potencia VSCode, para cambiar la interfaz a japonés.

1. Haz clic en el ícono de cuadrados en el lado izquierdo de VSCode (la Barra de Actividades).
2. En el cuadro de búsqueda que aparece, escribe "Japanese Language Pack".
3. Haz clic en el botón "Install" de "Japanese Language Pack for Visual Studio Code" que aparece arriba.
4. Después de la instalación, si aparece un mensaje en la esquina inferior derecha pidiéndote que reinicies, haz clic en "Restart".

Cuando VSCode se reinicie, los menús deberían estar en japonés. ¡Con esto, la configuración inicial está completa!

PASO 2: ¡Lanza un Hechizo Mágico! [Extensiones Esenciales y Seleccionadas]

Ahora que VSCode está listo, te presentaré tres "hechizos mágicos" seleccionados, es decir, extensiones que agilizarán drásticamente tu desarrollo web. Hay muchas extensiones, pero como principiante, instalar demasiadas puede ser confuso. Por ahora, estas tres, que sinceramente siento que ya no podría desarrollar sin ellas, son más que suficientes.

🥇 1er Lugar: Live Server - La Magia que Refleja tu Código al Instante

Tienes que instalar esto, sí o sí. "Live Server" es lo primero que te enseñará lo divertido que es el desarrollo web.

Normalmente, después de modificar un archivo HTML o CSS, tienes que volver al navegador y presionar el botón de recargar (como F5) para ver los cambios. Sin embargo, con Live Server, en el momento en que guardas tu código, la vista del navegador se actualiza automáticamente.

Esta experiencia de "escribir y ver el cambio al instante" es realmente increíble. Solo eliminar la molestia de recargar cada vez aumentará tu eficiencia de trabajo exponencialmente.

El método de instalación es el mismo que para el paquete de idioma. Busca "Live Server" desde el ícono de extensiones a la izquierda e instálalo.

🥈 2do Lugar: Prettier - El Mayordomo que Ordena tu Código Automáticamente

Cuando empiezas a escribir código, la sangría puede desordenarse y el uso de los espacios puede volverse inconsistente. "Prettier" es lo que formatea instantáneamente ese código desordenado en un código hermoso cada vez que guardas.

Podrías pensar "¿A quién le importa cómo se ve?", pero la apariencia de tu código es extremadamente importante. Un código ordenado es más fácil de leer y facilita la búsqueda de errores. Con Prettier, no perderás tiempo preocupándote por la apariencia de tu código.

Busca "Prettier - Code formatter" e instálalo.

[Importante] Configuración para Activar Prettier

Prettier no funcionará solo con instalarlo. Agreguemos una configuración simple para que formatee automáticamente al guardar.

1. Haz clic en el ícono del engranaje en la parte inferior izquierda y selecciona "Configuración". (o presiona Ctrl + ,)
2. Haz clic en el ícono del archivo en la esquina superior derecha (Abrir configuración (JSON)).
3. En el archivo settings.json que se abre, agrega las siguientes dos líneas. (Si ya hay algo escrito, agrégalas dentro de {}, separadas por una coma).

"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
            

PASO 3: ¡Creemos tu Primera Página Web! [Copiar y Pegar OK]

¡Gracias por tu paciencia! Finalmente es hora de crear una página web. Usaremos tres lenguajes aquí: HTML, CSS y JavaScript, pero no necesitas entender completamente lo que significa cada uno en este momento. El objetivo es tener una idea de "si escribo esto, sucede esto". Por favor, sigue los pasos a continuación.

1. Crear una Carpeta de Trabajo y Tres Archivos

Primero, crea una nueva carpeta para este proyecto en algún lugar de tu computadora que te guste (como el escritorio). Un nombre como "mi-primer-sitio-web" es fácil de entender.

A continuación, abre VSCode, selecciona "Abrir carpeta..." del menú "Archivo" y abre la carpeta que acabas de crear.

Una vez que la carpeta esté abierta, crea tres nuevos archivos en el explorador de VSCode a la izquierda:

1. index.html (El archivo para la estructura de la página web)
2. style.css (El archivo para el estilo de la apariencia de la página web)
3. script.js (El archivo para agregar interactividad a la página web)

2. Escribir el HTML (index.html)

Abre el archivo index.html y copia y pega el siguiente código tal cual.

Consejo para ahorrar tiempo: De hecho, si solo escribes ! (un signo de exclamación de un solo byte) en index.html y presionas la tecla Tab, se generará una plantilla básica en un instante. Esta es una característica estándar de VSCode llamada "Emmet", y es muy útil recordarla.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Primer Sitio Web</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <h1>¡Hola, Bienvenido al Mundo de VSCode!</h1>
    <p id="message">Aquí se mostrará un mensaje.</p>
    <button id="changeTextBtn">¡Haz clic aquí!</button>

    <script src="script.js"></script>
</body>
</html>

En pocas palabras, <h1> es un encabezado principal, <p> es un párrafo y <button> es un botón. Luego, <link rel="stylesheet" href="style.css"> carga el archivo CSS, y <script src="script.js"></script> carga el archivo JavaScript.

Punto de tropiezo: Si te equivocas con los nombres de archivo aquí, como en href="style.css" o src="script.js", el CSS o JS no se cargarán correctamente, lo que puede hacer que el diseño se rompa o la interactividad falle. Lo he hecho muchas veces... Asegúrate de verificar que los nombres de los archivos sean correctos.

3. Escribir el CSS (style.css)

A continuación, abre el archivo style.css y copia y pega el código a continuación. Este código es para dar estilo a la apariencia del HTML que acabamos de crear.

body {
    font-family: sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    text-align: center;
}

h1 {
    font-size: 2.5rem;
}

p {
    font-size: 1.2rem;
    margin: 1rem 0;
}

button {
    padding: 10px 20px;
    font-size: 1rem;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 5px;
}

Aquí, estamos centrando el texto en toda la página, ajustando los tamaños de fuente y cambiando ligeramente el diseño del botón.

4. Escribir el JavaScript (script.js)

Finalmente, abre el archivo script.js y copia y pega el siguiente código. Este es el código mágico que le da "interactividad" a nuestra página web.

// Obtener los elementos HTML
const messageElement = document.getElementById('message');
const changeTextBtn = document.getElementById('changeTextBtn');

// Procesar cuando se hace clic en el botón
changeTextBtn.addEventListener('click', function() {
  messageElement.textContent = '¡Genial! ¡JavaScript está funcionando!';
});

Aquí, estamos escribiendo un comando que dice: "Cuando se haga clic en el botón con el ID changeTextBtn, cambia el texto dentro de la etiqueta p con el ID message".

PASO 4: ¡El Momento de la Verdad! Experimenta una Página "Funcional" con Live Server

¡Muy bien, todo está listo! Finalmente es hora de ver la página web que acabamos de crear en un navegador.

Con el archivo index.html abierto en VSCode, haz clic en el botón "Go Live" en la esquina inferior derecha.

¡Un navegador debería iniciarse automáticamente y mostrar la página que creaste!

Ahora, intenta hacer clic en el botón "¡Haz clic aquí!" en la página. Si el mensaje cambia a "¡Genial! ¡JavaScript está funcionando!", ¡lo has logrado!

Además, vuelve a VSCode y cambia el texto del <h1> en index.html a algo como "¡Bienvenido al mundo del desarrollo web!" y guarda (Ctrl + S). Cuando vuelvas al navegador, deberías ver que la pantalla ha cambiado instantáneamente sin que tengas que recargar. Este es el poder de Live Server. ¿No es asombroso?

Punto de tropiezo: La página no se muestra cuando presionas "Go Live", el CSS no funciona, no pasa nada cuando presionas el botón... como principiante, definitivamente te encontrarás con algún tipo de error. Cuando eso suceda, primero verifica los siguientes puntos:

• ¿Es correcta la ruta en el enlace a los archivos CSS/JS en el archivo HTML (href o src)?
• ¿Es correcto el nombre del archivo? (p. ej., styles.css en lugar de style.css)
• ¿Copiaste y pegaste el código correctamente?

Si aún no puedes resolverlo, te recomiendo que le preguntes a una IA sobre el error. Si haces una pregunta pegando la situación y tu código, como "Mi CSS no se aplica en el Live Server de VSCode. Aquí está mi código", te dará respuestas sorprendentemente precisas. La razón por la que pude construir mi sitio es porque tenía este "profesor de IA".

Conclusión: Tu Carrera en el Desarrollo Web Comienza Aquí

¡Buen trabajo! ¿Pudiste seguir los pasos de este artículo y hacer que tu propia página web funcionara?

Lo que hicimos esta vez fue:

1. Preparamos la herramienta de desarrollo web multipropósito "VSCode"
2. Potenciamos nuestro entorno de desarrollo con extensiones como Live Server
3. Escribimos HTML, CSS y JavaScript para crear una página web real y funcional

Este es el primer paso absoluto, básico y más importante para cualquier desarrollador web. Por favor, no olvides esta sensación de "mi propio código funcionando de forma visible". Ese sentimiento será una gran motivación para tu futuro aprendizaje.

La pequeña página que hiciste hoy puede convertirse en un sitio web como los que he hecho aprendiendo más HTML y CSS y agregando varias funciones con JavaScript. Tu carrera en el desarrollo web realmente ha comenzado aquí y ahora.

¡Sigamos aprendiendo juntos!