93 163 53 53
info@espai.es

Síguenos en las redes

Código limpio y organizado para HTML CSS y Javascript

Código limpio y organizado
Diseño Web

Código limpio y organizado para HTML CSS y Javascript

por
Compartir:

Código limpio y organizado para HTML CSS y Javascript

Introducción

 

Mantener el código limpio, legible y bien estructurado no es una manía, es una necesidad profesional. Un código organizado reduce errores, acelera el mantenimiento y facilita el trabajo en equipo. En este artículo aprenderás en la práctica cómo usar VS Code, extensiones específicas y comentarios estratégicos para transformar tus proyectos (HTML, CSS y JavaScript) en ejemplos de claridad.

 

1. Extensiones de VS Code que organizan el código automáticamente

Prettier – Formateador universal

Prettier reformatea tu código con un clic, aplicando indentación consistente, saltos de línea y espaciado.

Cómo usarlo:

  • Instala la extensión «Prettier – Code formatter»
  • Configura en VS Code: Ctrl + Shift + P → «Format Document With…» → Prettier
  • Activa «Format on Save»: Settings → «editor.formatOnSave»: true

Antes de Prettier:

// Antes de Prettier
function suma(a,b){return a+b} let nombres=["Ana","Juan","María"]

Después de Prettier:

// Después de Prettier
function suma(a, b) {
return a + b;
}
let nombres = ["Ana", "Juan", "María"];

 

ESLint – Estandarización inteligente para JavaScript

ESLint señala errores de sintaxis, variables no usadas y ruptura de patrones. Instala «ESLint» y crea un archivo .eslintrc.json en la raíz del proyecto.

 

Better Comments – Resaltado visual para comentarios

Permite colorear comentarios como TODO:, FIXME: y ! IMPORTANTE.

// TODO: validar entrada del usuario

// FIXME: corregir bucle infinito cuando array está vacío

// ! IMPORTANTE: esta función depende de la API v2

 

2. Comandos nativos de VS Code que todo desarrollador debe conocer

Tabla 1

Consejo profesional:

Usa Ctrl + D para renombrar rápidamente clases CSS en todo el HTML sin búsqueda y reemplazo manual.

 

3. Comentarios útiles en HTML, CSS y JavaScript

Comentar no es llenar el código de texto, es explicar el porqué, no el qué.

En HTML – organizando secciones

<!-- ========== CABECERA PRINCIPAL ========== -->
<header>
  <h1>Blog de ESPAI</h1>

  <nav>
    
...

  </nav>
</header>

<!-- ========== CONTENIDO PRINCIPAL ========== -->
<main>

  <!-- ARTÍCULO DESTACADO -->
  <article class="destacado">
    <h2>Código limpio en VS Code</h2>
    <p>...</p>
  </article>

</main>

<!-- ========== PIE DE PÁGINA ========== -->
<footer>
  <p>ESPAI Barcelona - 2026</p>
</footer>

En CSS – bloques lógicos y avisos

/* ===== RESET Y VARIABLES ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --color-primaria: #2c3e50;
  --color-secundaria: #e67e22;
}

/* ===== LAYOUT PRINCIPAL ===== */
.container {
  max-width: 1200px;
  margin: 0 auto;
}

/* ===== COMPONENTES ===== */

/* Botón primario - usado en formularios y CTAs */
.btn-primary {
  background-color: var(--color-secundaria);
}

/* TODO: añadir efecto hover */
.btn-primary:hover {
  opacity: 0.9;
}

En JavaScript – funciones, lógica compleja y Todos

// ============================================
// FUNCIÓN: calcular precio con descuento progresivo
// PARÁMETROS: precioOriginal (number), cupon (string)
// RETORNO: objeto con precioFinal y descuentoAplicado
// ============================================
function calcularDescuento(precioOriginal, cupon) {
  const descuentos = {
    'ESPECIAL10': 0.10,
    'ESPECIAL20': 0.20
  };
  if (descuentos[cupon]) {
    const precioFinal = precioOriginal * (1 - descuentos[cupon]);
    // ! IMPORTANTE: redondear a 2 decimales (moneda)
    return {
      precioFinal: precioFinal.toFixed(2),
      descuentoAplicado: `${descuentos[cupon] * 100}%`
    };
  }

  // FIXME: tratar cupones inválidos con mensaje amigable
  return { precioFinal: precioOriginal.toFixed(2), descuentoAplicado: '0%' };
}

4. Ejemplo completo para probar en VS Code

Copia este código en un archivo ejemplo-practico.html y observa cómo los comentarios, la indentación y la organización quedan claros.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ejemplo de Código Limpio</title>

  <style>
    /* ===== VARIABLES Y RESET ===== */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
    }

    /* ===== LAYOUT ===== */
    .container {
      max-width: 1100px;
      margin: 0 auto;
      padding: 20px;
    }

    /* ===== TARJETAS ===== */
    .card {
      background: #f4f4f4;
      border-radius: 10px;
      padding: 20px;
    }
  </style>
</head>

<body>

  <div class="container">

    <!-- TARJETA EJEMPLO -->
    <div class="card">

      <h2>Prueba de Código Limpio</h2>
      <p id="mensaje">Haz clic en el botón para ver el mensaje.</p>
      <button id="btn-clic">Haz clic aquí</button>

    </div>

  </div>

  <script>
    // ===== ELEMENTOS DEL DOM =====
    const boton = document.getElementById('btn-clic');
    const parrafo = document.getElementById('mensaje');

    // ===== FUNCIÓN PRINCIPAL =====
    // TODO: añadir feedback visual al hacer clic
    boton.addEventListener('click', () => {
      parrafo.textContent = '✅ ¡Código organizado!';
    });
  </script>

</body>
</html>

Conclusión

El código limpio no es un don, es una disciplina. Con las extensiones adecuadas, los comandos de VS Code y una estrategia de comentarios bien aplicada, cualquier persona puede elevar la calidad de sus proyectos.

Empieza aplicando estas 3 cosas hoy:

  • Instala Prettier y activa «Format on Save»
  • Usa Shift + Alt + F antes de cada commit
  • Escribe al menos un comentario // TODO: en cada archivo nuevo
Compartir:
0
Etiquetas:

Escribe un comentario