Guía de Estilos en JavaScript para tener código limpio y consistente

Uno de problemas del trabajo en equipo es que cada programador tiene su manera de trabajar y de escribir su código, si no definimos lineamientos de cómo escribir código va a ser muy difícil el mantenimiento del código.

Guías de estilos

Una Guía de estilos es un conjunto de reglas para escribir código de forma coherente y estandarizada.

Ya sea que trabajes sólo o en equipo, seguir una guía de estilos te permitirá ahorrar tiempo en el mantenimiento de tu proyecto. Estas reglas nos dan los siguientes beneficios:

Consistencia: Asegura que todo el código sigue las mismas reglas, facilitando la colaboración entre varios desarrolladores.
Legibilidad: Un código bien formateado es más fácil de leer y entender.
Mantenibilidad: Reduce la posibilidad de errores y facilita la actualización y mejora del código.
Mejores prácticas: Promueve el uso de técnicas y patrones probados que mejoran la calidad del código.

Principales Recomendaciones

1. Espaciado y Sangrado

Usa sangría de 4 espacios en blanco, evita usar tabs.
Usa línea en blanco para separar bloques de código.
El código dentro de {} debe tener una sangría respecto al código precedente.
Los parámetros y los operadores debene separarse por un espacio en blanco.


// Malo
if (isValid){
let user='John';console.log(user);}

// Bueno
if (isValid) {
    let user = 'John';
    console.log(user);
}

2. Declaración de variables

Utiliza let y const para declarar variables y constantes.
Las variables deben declararse al inicio del script o función.
Los nombres deben ser descriptivos y que expliquen su propósito.
Las variables se deben nombrar en minúsculas y en formato camelCase.
Las constantes se deben nombrar en mayúsculas y separados por _.


var USERS = 100;             // Mal: Se usa var y no se sabe que contiene la variable
let x = 0;                   // Mal: No se sabe que contiene x

const MAX_USERS = 100;       // Bien: Constante con el nombre correcto
let userCount = 0;           // Bien: Variable que indica su propósito

3. Declaración de funciones

Usa nombres concisos y descriptivos en minúsculas y formato camelCase.
Trata de declarar las funciones antes de usarlas.
Utiza arrow functions (=>) son una forma más concisa de declarar funciones.
El contenido de la función debe tener in nivel de sangría adicional.


function sayHello() {
    console.log("Hello!");
}

const add = (a, b) => a + b;

4. Cadenas de texto

Puedes usar comillas simples 'string' o dobles "string", pero usa sólo una de ellas.
Usa plantillas literales (template literals) para concatenar cadenas de texto. Son más legibles y permiten interpolar variables fácilmente.


// Malo
let message = 'Hola, ' + name + '!';

// Bueno
let message = `Hola, ${name}!`;

5. Comentarios

Comenta el código cuando sea necesario, pero evita comentarios redundantes.
Los comentarios deben explicar el «por qué«, no el «qué» o «cómo«.
Usa comentarios en línea (//), evita usar bloque de comentarios (/* */)
No comentes el código que no se use, elimínalo pues dejar esto puede generar confusión.


// Incrementa el contador en 1 (Malo: no explicar el por que?)
counter = counter + 1;

// Actualizar cantidad de usuarios conectados (Bien: explica la razón del incremento)
counter++;

6. Uso de Linter y Formateadores

Utiliza herramientas como ESLint y Prettier para automatizar la verificación de estilo y formateo del código. Estas herramientas ayudan a identificar y corregir problemas de estilo de manera consistente.

Conclusiones

Escribir código legible y mantenible implica definir una serie de reglas sencillas. Estas reglas deben ser comunicadas y documentadas para que el equipo de desarrollo pueda trabajar de manera consistente, esto lo podemos complementar con una herramienta como ESList.