Una Guía de Estilo de JavaScript

Version en inglés

Reglas Básicas

Termina cada instrucción con punto y coma.

End each statement with a semicolon.

eslint: semi

var x = 5   // ✗ evitar
var x = 5;  // ✓ ok

Usa 2 espacios como indentación.

Use 2 spaces for indentation.

eslint: indent

// ✗ evitar
function hello(name) {
console.log('hi', name);
}

// ✓ ok
function hello(name) {
  console.log('hi', name);
}

Nombres de variables y funciones

Usa nombres descriptivos en Inglés y en el formato camelCase.

Use descriptive names, in English, using camelCase.

eslint: id-length
eslint: camelcase

// ✗ evitar
const OBJEcttsssss = {};
const this_is_my_object = {};`
const miObjecto = {};
function c() {}

// ✓ ok
const thisIsMyObject = {};
function thisIsMyFunction() {}

Uso de espacios en blanco

Donde agregar espacios

Agrega un espacio después de las palabras claves.

Add a space after keywords.

eslint: keyword-spacing

if (condition) { ... }   // ✓ ok
if(condition) { ... }    // ✗ evitar

Agrega espacios a cada lado de los operadores.

Add spaces around operators

Con la excepción de los operadores de incremento y decremento (por ejemplo, i++ o i--).
Except increment and decrement operators (for example, i++ or i--).

eslint: space-infix-ops

// ✗ evitar
var x=2;
var message = 'hello, '+name+'!';

// ✓ ok
var x = 2;
var message = 'hello, ' + name + '!';

Agrega un espacio después de las comas.

Add a space after commas.

Excepto si es el último símbolo en la línea.
Except at the end of the line.

eslint: comma-spacing

// ✓ ok
var list = [1, 2, 3, 4];
function greet(name, options) { ... }

// ✗ evitar
var list = [1,2,3,4];
function greet(name,options) { ... }

Agrega un espacio antes de los bloques.

Add a space before blocks.

eslint: space-before-blocks

if (admin){...}     // ✗ evitar
if (admin) {...}    // ✓ ok

Usar espacios dentro de comentarios.

***Add spaces inside comments.***

eslint: spaced-comment

//comment           // ✗ evitar
// comment          // ✓ ok

/*comment*/         // ✗ evitar
/* comment */       // ✓ ok

Agregar un espacio entre dos puntos y pares clave valor.

Add a space between colon and value in key value pairs.

eslint: key-spacing

var obj = { 'key' : 'value' };    // ✗ evitar
var obj = { 'key' :'value' };     // ✗ evitar
var obj = { 'key':'value' };      // ✗ evitar

var obj = { 'key': 'value' };     // ✓ ok

Donde no agregar espacios

Evita el uso de espacios en blanco múltiples a excepción de indentación.

Do not use multiple spaces except for indentation.

eslint: no-multi-spaces

const id =    1234;    // ✗ evitar

const id = 1234;       // ✓ ok

Evita espacios en blanco entre paréntesis.

Do not use spaces inside parentheses.

eslint: space-in-parens

getName( name )     // ✗ evitar

getName(name)       // ✓ ok

Evita uso de espacios antes de los paréntesis de la función declarada.

Do not add a space before a function declaration's parentheses.

eslint: space-before-function-paren

function name (arg) { ... }   // ✗ evitar
function name(arg) { ... }    // ✓ ok

run(function () { ... })      // ✗ evitar
run(function() { ... })       // ✓ ok

Evita uso de espacios entre el identificador de la función y su invocación.

Do not add a space between function identifiers and their invocations.

eslint: func-call-spacing

console.log ('hello'); // ✗ evitar

console.log('hello');  // ✓ ok

Cómo usar líneas en blanco

No usa múltiples líneas en blanco.

Do not use multiple blank lines.

eslint: no-multiple-empty-lines

// ✗ evitar 
var value = 'hello world';


console.log(value);

// ✓ ok

var value = 'hello world';
console.log(value);

No usa líneas en blanco de relleno entre bloques.

Do not pad within blocks.

eslint: padded-blocks

if (user) {
                           // ✗ evitar
  const name = getName();

}

if (user) {
  const name = getName();    // ✓ ok
}

Otros consejos de formato

Usar comillas simples en cadenas de texto.

Use single quotes for strings.

Con la excepción para evitar escapado de texto.
Except when you need to use single quotes in your string.

eslint: quotes

var str = "hi";   // ✗ evitar

var str = 'hi';   // ✓ ok

Evitar puntos decimales flotantes.

Do not use floating decimals.

eslint: no-floating-decimal

const discount = .5;      // ✗ evitar

const discount = 0.5;     // ✓ ok

Mantener consistencia de declarar propiedades de un objeto por línea.

Put each object property on a new line.

eslint: object-property-newline

const user = {
  name: 'Jane Doe', age: 30,
  username: 'jdoe86'            // ✗ evitar
};

const user = { name: 'Jane Doe', age: 30, username: 'jdoe86' };    // ✗ evitar

const user = {
  name: 'Jane Doe',  
  age: 30,
  username: 'jdoe86' // ✓ ok
};

Mantener la declaración else en la misma línea que sus llaves.

Keep else statements on the same line as their curly braces.

eslint: brace-style

// ✗ evitar
if (condition) {
 // ...
}
else {
 // ...
}

// ✓ ok
if (condition) {
 // ...
} else {
 // ...
}

Buenas prácticas

Usa siempre === en vez de ==.

Always use === instead of ==.

Con la excepción de obj == null para verificar si el objeto sea null || undefined.
Exception: obj == null is allowed to check for null || undefined.

eslint: eqeqeq

if (name == 'John')    // ✗ evitar
if (name === 'John')   // ✓ ok

if (name != 'John')    // ✗ evitar
if (name !== 'John')   // ✓ ok

Usa array literales en vez de array constructors.

Use array literals instead of array constructors.

eslint: no-array-constructor

var nums = new Array(1, 2, 3);   // ✗ evitar

var nums = [1, 2, 3];            // ✓ ok