Home

Awesome

Airbnb JavaScript Style Guide() {

Un enfoque altamente razonable para JavaScript

Nota: Esta guía asume que usas Babel, adicionalmente de tener instalado babel-preset-airbnb o su equivalente. También asume que tienes instalado shims/pollyfills en tu aplicación, con airbnb-browser-shims o su equivalente.

Downloads Downloads Gitter

Otras Guías de Estilos

Tabla de Contenido

  1. Tipos
  2. Referencias
  3. Objetos
  4. Arreglos
  5. Destructuring
  6. Cadenas de Texto
  7. Funciones
  8. Notación de Funciones de Flecha
  9. Clases y Constructores
  10. Módulos
  11. Iteradores y Generadores
  12. Propiedades
  13. Variables
  14. Hoisting
  15. Expresiones de comparación e igualdad
  16. Bloques
  17. Comentarios
  18. Espacios en blanco
  19. Comas
  20. Puntos y Comas
  21. Casting de Tipos y Coerción
  22. Convenciones de nomenclatura
  23. Funciones de Acceso
  24. Eventos
  25. jQuery
  26. Compatibilidad con EcmaScript 5
  27. Estilos de EcmaScript6+ (ES2015+)
  28. Pruebas
  29. Desempeño
  30. Recursos
  31. En la cancha
  32. Traducciones
  33. La guía de la Guía de Estilos JavaScript
  34. Charla con nosotros sobre Javascript
  35. Colaboradores
  36. Licencia

Tipos

[⬆ regresar a la Tabla de Contenido]

Referencias

¿Por qué? Esto asegura que no reasignes tus referencias, lo que puede llevar a bugs y dificultad para comprender el código.

// mal
var a = 1;
var b = 2;

// bien
const a = 1;
const b = 2;

¿Por qué? El bloque let es de alcance a nivel de bloque a diferencia del alcance a nivel de función de var.

// mal
var count = 1;
if (true) {
  count += 1;
}

// bien, usa el let
let count = 1;
if (true) {
  count += 1;
}
// const y let solo existen en los bloques donde
// estan definidos
{
  let a = 1;
  const b = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError

Objetos

[⬆ regresar a la Tabla de Contenido]

Arreglos

[⬆ regresar a la Tabla de Contenido]

Destructuring

[⬆ regresar a la Tabla de Contenido]

Cadenas de Texto

Nota: Cuando se usa sin criterio, las cadenas de texto largas pueden impactar en el desempeño. jsPerf & Discusión

// mal
var errorMessage = 'This is a super long error that was thrown because of Batman. When you stop to think about how Batman had anything to do with this, you would get nowhere fast.';

// bien
var errorMessage = 'This is a super long error that was thrown because\
of Batman. When you stop to think about how Batman had anything to do \
with this, you would get nowhere fast.';

// bien
var errorMessage = 'This is a super long error that was thrown because' +
  'of Batman. When you stop to think about how Batman had anything to do ' +
  'with this, you would get nowhere fast.';

¿Por qué? Los template strings te dan mayor legibilidad, sintaxis concisa con nuevas líneas apropiadas y capacidades de interpolación.

// mal
function sayHi(name) {
  return 'How are you, ' + name + '?';
}

// mal
function sayHi(name) {
  return ['How are you, ', name, '?'].join();
}

// bien
function sayHi(name) {
  return `How are you, ${name}?`;
}

[⬆ regresar a la Tabla de Contenido]

Funciones

¿Por qué? Las declaraciones de función son nombradas, por lo que son más sencillas de identificar en las pilas de llamadas. Además todo el contenido de una declaración de función es hoisted, mientras que solo la referencia de una expresión de función es hoisted. Esta regla hace posible que siempre se usen Arrow Functions en vez de las funciones de expresión.

 // mal
 const foo = function () {
 };

 // bien
 function foo() {
 }

Nota: ECMA-262 define un bloque como una lista de sentencias. Una declaración de función no es una sentencia. Lee la nota de ECMA-262 sobre este inconveniente.

// mal
if (currentUser) {
  function test() {
    console.log('Nope.');
  }
}

// bien
let test;
if (currentUser) {
  test = () => {
    console.log('Yup.');
  };
}

[⬆ regresar a la Tabla de Contenido]

Notación de Funciones de Flecha

⬆ regresar a la Tabla de Contenido

Clases y Constructores

[⬆ regresar a la Tabla de Contenido]

Módulos

[⬆ regresar a la Tabla de Contenido]

Propiedades

[⬆ regresar a la Tabla de Contenido]

Variables

// mal
let i, len, dragonball,
    items = getItems(),
    goSportsTeam = true;

// mal
let i;
const items = getItems();
let dragonball;
const goSportsTeam = true;
let len;

// bien
const goSportsTeam = true;
const items = getItems();
let dragonball;
let i;
let length;
// mal - llamada a funcion innecesaria
function checkName(hasName) {
  const name = getName();

  if (hasName === 'test') {
    return false;
  }

  if (name === 'test') {
    this.setName('');
    return false;
  }

  return name;
}

// bien
function checkName(hasName) {
  if (hasName === 'test') {
    return false;
  }

  const name = getName();

  if (name === 'test') {
    this.setName('');
    return false;
  }

  return name;
}

[⬆ regresar a la Tabla de Contenido]

Hoisting

[⬆ regresar a la Tabla de Contenido]

Expresiones de comparación e igualdad

[⬆ regresar a la Tabla de Contenido]

Bloques

[⬆ regresar a la Tabla de Contenido]

Comentarios

[⬆ regresar a la Tabla de Contenido]

Espacios en blanco

[⬆ regresar a la Tabla de Contenido]

Comas

¿Por qué? Esto lleva a diferenciales en git más claros. Además los transpiladores como Babel removerán la coma del final en el código transpilado lo que significa que no te tendrás que preocupar del problema de la coma adicional al final en navegadores antiguos.

// mal - git diff sin coma adicional al final
const hero = {
     firstName: 'Florence',
-    lastName: 'Nightingale'
+    lastName: 'Nightingale',
+    inventorOf: ['coxcomb chart', 'modern nursing']
};

// bien - git diff con coma adicional al final
const hero = {
     firstName: 'Florence',
     lastName: 'Nightingale',
+    inventorOf: ['coxcomb chart', 'modern nursing'],
};

// mal
const hero = {
  firstName: 'Dana',
  lastName: 'Scully'
};

const heroes = [
  'Batman',
  'Superman'
];

// bien
const hero = {
  firstName: 'Dana',
  lastName: 'Scully',
};

const heroes = [
  'Batman',
  'Superman',
];

[⬆ regresar a la Tabla de Contenido]

Puntos y Comas

[⬆ regresar a la Tabla de Contenido]

Casting de Tipos y Coerción

Nota: Ten mucho cuidado al hacer operaciones de Bitshift. En Javascript los números son representados como valores de 64-bit, sin embargo las operaciones de Bitshift siempre retornan un entero de 32-bits (fuente). Bitshift puede presentarnos un comportamiento inesperado para valores enteros mayores a 32 bits. Discusión. El mayor entero con signo de 32 bits es 2,147,483,647:

2147483647 >> 0 //=> 2147483647
2147483648 >> 0 //=> -2147483648
2147483649 >> 0 //=> -2147483647

[⬆ regresar a la Tabla de Contenido]

Convenciones de nomenclatura

¿Por qué? JavaScript no tiene el concepto de privacidad en términos de propiedades o métodos. A pesar que un guión bajo como prefijo es una convención común para indicar que son "privados", la realidad es que estas propiedades son absolutamente públicas, y por ello, parte de tu contrato público de API. La convención del prefijo de guión bajo podría orientar a los desarrolladores a pensar erróneamente que un cambio a aquellos no será de impacto o que los tests no son necesarios.

// mal
this.__firstName__ = 'Panda';
this.firstName_ = 'Panda';
this._firstName = 'Panda';


// bien
this.firstName = 'Panda';
 // contenido archivo 1
 class CheckBox {
   // ...
 }
 export default CheckBox;

 // contenido archivo 2
 export default function fortyTwo() { return 42; }

 // contenido archivo 3
 export default function insideDirectory() {}

 // en algún otro archivo
 // mal
 import CheckBox from './checkBox'; // importacion/exportacion PascalCase, nombre de archivo camelCase
 import FortyTwo from './FortyTwo'; // importacion/nombre de archivo PascalCase, exportacion camelCase
 import InsideDirectory from './InsideDirectory'; // importacion/nombre de archivo PascalCase, exportacion camelCase

 // mal
 import CheckBox from './check_box'; // importacion/exportacion PascalCase, nombre de archivo snake_case
 import forty_two from './forty_two'; // importacion/nombre de archivo snake_case, exportacion camelCase
 import inside_directory from './inside_directory'; // importacion snake_case, exportacion camelCase
 import index from './inside_directory/index'; // requiere el archivo de index explicitamente
 import insideDirectory from './insideDirectory/index'; // requiere el archivo de index explicitamente

 // bien
 import CheckBox from './CheckBox'; // importacion/exportacion/nombre de archivo PascalCase
 import fortyTwo from './fortyTwo'; // importacion/exportacion/nombre de archivo camelCase
 import insideDirectory from './insideDirectory'; // importacion/exportacion/nombre directorio/archivo "index" implícito
 // ^ soporta tanto insideDirectory.js e insideDirectory/index.js

function makeStyleGuide() {
}

export default makeStyleGuide;
const AirbnbStyleGuide = {
  es6: {
  }
};

export default AirbnbStyleGuide;

[⬆ regresar a la Tabla de Contenido]

Funciones de Acceso

[⬆ regresar a la Tabla de Contenido]

Eventos

[⬆ regresar a la Tabla de Contenido]

jQuery

[⬆ regresar a la Tabla de Contenido]

Compatibilidad con ECMAScript 5

[⬆ regresar a la Tabla de Contenido]

Estilos de EcmaScript6+ (ES 2015+)

- A continuación, un conjunto de enlaces hacia los estilos para las nuevas características de ES6:
  1. Notación Funciones de Flecha
  2. Clases
  3. Declaración abreviada para objeto
  4. Declaración de objeto concisa
  5. Propiedades computadas de objeto
  6. Plantillas de texto
  7. Destructuring
  8. Parámetros por defecto
  9. Rest
  10. Spreads de arreglos
  11. Let y Const
  12. Iteradores y Generadores
  13. Módulos
- No uses [las propuestas de TC39](https://github.com/tc39/proposals) puesto que aún no han llegado a la tercera etapa.
  > ¿Por qué? [No están finalizadas](https://tc39.github.io/process-document/), y están sujetas a cambios o reescritas completamente. Vamos a usar JavaScript y las propuestas aún no son JavaScript.

[⬆ regresar a la Tabla de Contenido]

Pruebas

[⬆ regresar a la Tabla de Contenido]

Desempeño

[⬆ regresar a la Tabla de Contenido]

Recursos

Learning ES6

Lee esto

Tools

Code Style Linters

Otras guías de estilo

Otros estilos

Lecturas más profundas

Libros

Blogs

Podcasts

[⬆ regresar a la Tabla de Contenido]

En la cancha

Esta es una lista de las organizaciones que están usando esta guía de estilo. Envíanos un pull request o abre un issue y te agregaremos a la lista.

Traducciones

Esta guía de estilo es también disponible en otros lenguajes:

La guía de la Guía de Estilos de Javascript

Charla con nosotros sobre Javascript

Colaboradores

Licencia

(The MIT License)

Copyright (c) 2014-2016 Airbnb

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

[⬆ regresar a la Tabla de Contenido]

Enmiendas

Te recomendamos hacer fork de esta guía y cambiar las reglas para que se adecúen a la guía de estilos de tu equipo. Abajo podrás encontrar algunas enmiendas a la guía de estilos. Esto te permitirá actualizar periódicamente tu guía de estilos sin tener que lidiar con conflictos al hacer merge.

};