JavaScript Style Guide

readme.md

JavaScript Style Guide

Establecer las mejores prácticas para mantener un código JavaScript.

1. Nombramiento de variables y funciones
2. Espaciado
3. Comentarios
4. Comillas
5. Archivos

Nombramiento de variables y funciones

Todos los nombres de todas las variables deben ser tan descriptivos y tan cortos como sea posible.

Las variables, funciones y métodos deben iniciar siempre con minúscula y ser escritos de la forma "camelCase" lo que si el nombre se compone de dos o más palabras el nombre de todas las palabras a excepción de la primera deberá iniciar con mayúscula.

    variable
    segundaVariable

Los nombres de clases deben seguir la misma forma "camelCase" pero iniciando siempre con mayúscula para que puedan diferenciarse.

    SoyUnaClase

En el caso de las variables constantes deben nombrarse con mayúscula y si están formadas por dos o más palabras éstas deberán separarse con un guión bajo.

    VALOR_CONSTANTE

Espaciado

• Hacer indentaciones con tabs
• Evitar los espacios en blanco al final de las líneas o de las líneas en blanco
• Las funciones if/else/for/while/try siempre deben de tener llaves e ir en múltiples líneas

   // Incorrecto
   if(variable) llamarFuncion();
   
   // Correcto
   if(variable) {
   	llamarFuncion();
   } else {
   	llamarOtraFuncion();
   }

• Poner un espacio en blanco despúes de los operadores = + / * y de las comas
• Evitar los espacios interiores en constructores vacíos {}, [], fn()
• Objetos y arreglos pueden escribirse en una sola línea si son cortos sino deben escribirse en diferentes líneas con sólo un elemento por línea con llaves de apertura y cierre.

   var person = {
       firstName: "John",
       lastName: "Doe",
       age: 50,
       eyeColor: "blue"
   };
   
   var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

• Si una operación es muy larga para caber en una línea, el salto de línea deberá ser después de algún operador lógico y no antes.

   var html = "<p>La suma de" + a + " el valor de " + b + "valor de " + c + 
   " es el total.</p>";

Comentarios

• Se pueden usar ambos tipos de comentarios /* */ o //lo importante es ser consistente a lo largo de los archivos.

	// Variable para guardar una cadena html
   // que servirá para después
   // mostrar cosas lindas en la pantalla
   var html = "<p></p>";
   
	/* Variable para guardar una cadena html 
     * que servirá para después
     * mostrar cosas lindas en la pantalla
   */
   var html = "<p></p>";

Comillas

• Las cadenas de texto deben ser declaradas con doble comilla.

   var html = "Soy una cadena simple";

• Las cadenas de texto con comillas internas deben tener doble comilla al exterior y comilla simple al interior.

   var html = "<p class='cadena-compuesta'>Soy una cadena con comillas internas</p>";

Archivos

Los archivos .js deben ser descriptivos y nombrarse sólo en letras minúsculas sin espacios ni guiones.

soyunarchivojavascript.js

Referencias

• Referencia 1:
  • w3schools
• Referencia 2:
  • JQuery
• Referencia 3:
  • Google styleguide

Créditos y autor

• Autor del snippet: Geny Miranda @geny_geny
• Los snippets pertenecen a KamikazeLab