English • Español (Latinoamérica) • Français • Bahasa Indonesia • Italiano (Italian) • 日本語 (Japanese) • 한국어 (Korean) • Português (Brasil) • 简体中文 (Simplified Chinese) • 繁體中文 (Taiwanese Mandarin)
Esto es un TL;DR (muy largo, no lo leí) de reglas JavaScript standard.
La mejor manera de aprender acerca de standard es instalarlo darle una prueba en tu código.
Usar 2 espacios como sangría.
eslint: indent
function hello (name) {
console.log('hi', name)
}
Usar comillas simples en cadenas de texto con la excepción para evitar escapado de texto.
eslint: quotes
console.log('hello there') // comillas simples
$("<div class='box'>") // escapado de texto
No dejar variables sin usar.
eslint: no-unused-vars
function myFunction () {
var result = something() // ✗ evitar
}
Espacio después de las palabras claves.
eslint: keyword-spacing
if (condition) { ... } // ✓ ok
if(condition) { ... } // ✗ evitar
Agregar un espacio antes de los paréntesis de la función declarada.
eslint: space-before-function-paren
function name (arg) { ... } // ✓ ok
function name(arg) { ... } // ✗ evitar
run(function () { ... }) // ✓ ok
run(function() { ... }) // ✗ evitar
Usar siempre === en vez de ==.
Excepción: obj == null permite comprobar si null || undefined.
eslint: eqeqeq
if (name === 'John') // ✓ ok
if (name == 'John') // ✗ evitar
if (name !== 'John') // ✓ ok
if (name != 'John') // ✗ evitar
Operadores infijos deben ser espaciados.
eslint: space-infix-ops
// ✓ ok
var x = 2
var message = 'hello, ' + name + '!'
// ✗ evitar
var x=2
var message = 'hello, '+name+'!'
Comas deben tener un espacio después de ellas.
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) { ... }
Mantener declaración else en la misma línea que sus llaves.
eslint: brace-style
// ✓ ok
if (condition) {
// ...
} else {
// ...
}
// ✗ evitar
if (condition) {
// ...
}
else {
// ...
}
Para declaraciones if multi-línea debe usar llaves.
eslint: curly
// ✓ ok
if (options.quiet !== true) console.log('done')
// ✓ ok
if (options.quiet !== true) {
console.log('done')
}
// ✗ evitar
if (options.quiet !== true)
console.log('done')
Siempre gestionar el parámetro err en las funciones.
eslint: handle-callback-err
// ✓ ok
run(function (err) {
if (err) throw err
window.alert('done')
})
// ✗ evitar
run(function (err) {
window.alert('done')
})
En las variables globales usar el sufijo window..
Con la excepción de: document, console y navigator.
eslint: no-undef
window.alert('hi') // ✓ ok
Múltiples líneas en blanco no está permitido.
eslint: no-multiple-empty-lines
// ✓ ok
var value = 'hello world'
console.log(value)
// ✗ evitar
var value = 'hello world'
console.log(value)
* **Para el operador ternario** en multi-línea, colocar el `?` y `:` en su propia nueva línea.
eslint: [`operator-linebreak`](http://eslint.org/docs/rules/operator-linebreak)
```js
// ✓ ok
var location = env.development ? 'localhost' : 'www.api.com'
// ✓ ok
var location = env.development
? 'localhost'
: 'www.api.com'
// ✗ evitar
var location = env.development ?
'localhost' :
'www.api.com'
Para declaraciones var, escribir solo una asignación en cada declaración.
eslint: one-var
// ✓ ok
var silent = true
var verbose = true
// ✗ evitar
var silent = true, verbose = true
// ✗ evitar
var silent = true,
verbose = true
Envolver asignaciones condicionales con paréntesis adicionales. Esto hace claro que la intención de la expresión es una asignación y no un error de igualdad (===).
eslint: no-cond-assign
// ✓ ok
while ((m = text.match(expr))) {
// ...
}
// ✗ evitar
while (m = text.match(expr)) {
// ...
}
Agregar espacios dentro de bloques de una sola línea.
eslint: block-spacing
function foo () {return true} // ✗ evitar
function foo () { return true } // ✓ ok
Usar camelcase al nombre variables y funciones.
eslint: camelcase
function my_function () { } // ✗ avoid
function myFunction () { } // ✓ ok
var my_var = 'hello' // ✗ avoid
var myVar = 'hello' // ✓ ok
Comas adicionales no está permitido.
eslint: comma-dangle
var obj = {
message: 'hello', // ✗ avoid
}
Comas deben colocarse al final de la línea actual.
eslint: comma-style
var obj = {
foo: 'foo'
,bar: 'bar' // ✗ avoid
}
var obj = {
foo: 'foo',
bar: 'bar' // ✓ ok
}
El Punto debe ir en la misma línea que la propiedad.
eslint: dot-location
console.
log('hello') // ✗ avoid
console
.log('hello') // ✓ ok
Archivos deben terminar con una nueva línea.
elint: eol-last
Sin espacios entre el identificador de la función y su invocación.
eslint: func-call-spacing
console.log ('hello') // ✗ avoid
console.log('hello') // ✓ ok
Agregar espacio entre dos puntos (colon) y pares clave valor.
eslint: key-spacing
var obj = { 'key' : 'value' } // ✗ avoid
var obj = { 'key' :'value' } // ✗ avoid
var obj = { 'key':'value' } // ✗ avoid
var obj = { 'key': 'value' } // ✓ ok
Nombres de Constructor deben empezar con letra Mayúscula.
eslint: new-cap
function animal () {}
var dog = new animal() // ✗ avoid
function Animal () {}
var dog = new Animal() // ✓ ok
Constructor sin argumentos debe ser invocado con paréntesis.
eslint: new-parens
function Animal () {}
var dog = new Animal // ✗ avoid
var dog = new Animal() // ✓ ok
Objetos deben contener un getter cuando se ha definido un setter.
eslint: accessor-pairs
var person = {
set name (value) { // ✗ avoid
this._name = value
}
}
var person = {
set name (value) {
this._name = value
},
get name () { // ✓ ok
return this._name
}
}
Constructores de clases derivadas deben llamar super.
eslint: constructor-super
class Dog {
constructor () {
super() // ✗ avoid
}
}
class Dog extends Mammal {
constructor () {
super() // ✓ ok
}
}
Usar array literales en vez de array constructor.
eslint: no-array-constructor
var nums = new Array(1, 2, 3) // ✗ avoid
var nums = [1, 2, 3] // ✓ ok
Evitar usar arguments.calle y arguments.caller.
eslint: no-caller
function foo (n) {
if (n <= 0) return
arguments.callee(n - 1) // ✗ avoid
}
function foo (n) {
if (n <= 0) return
foo(n - 1)
}
Evitar modificar variables que fueron declaradas como clase.
eslint: no-class-assign
class Dog {}
Dog = 'Fido' // ✗ avoid
Evitar modifidicar variables declaracas usando const.
eslint: no-const-assign
const score = 100
score = 125 // ✗ avoid
Evitar usar expresiones constantes en condicionales (a excepción de bucles).
eslint: no-constant-condition
if (false) { // ✗ avoid
// ...
}
if (x === 0) { // ✓ ok
// ...
}
while (true) { // ✓ ok
// ...
}
Evitar caracteres de control de expresiones regulares.
eslint: no-control-regex
var pattern = /\x1f/ // ✗ avoid
var pattern = /\x20/ // ✓ ok
Evitar sentencias debugger.
eslint: no-debugger
function sum (a, b) {
debugger // ✗ avoid
return a + b
}
Evitar operador delete en variables.
eslint: no-delete-var
var name
delete name // ✗ avoid
Evitar argumentos duplicados en definición de funciones.
eslint: no-dupe-args
function sum (a, b, a) { // ✗ avoid
// ...
}
function sum (a, b, c) { // ✓ ok
// ...
}
Evitar duplicados en miembros de clase.
eslint: no-dupe-class-members
class Dog {
bark () {}
bark () {} // ✗ avoid
}
Evitar duplicado de claves en objetos literales.
eslint: no-dupe-keys
var user = {
name: 'Jane Doe',
name: 'John Doe' // ✗ avoid
}
Evitar dublicados de etiqueta case en sentencias switch.
eslint: no-duplicate-case
switch (id) {
case 1:
// ...
case 1: // ✗ avoid
}
Usar una unica sentencia import por módulo.
eslint: no-duplicate-imports
import { myFunc1 } from 'module'
import { myFunc2 } from 'module' // ✗ avoid
import { myFunc1, myFunc2 } from 'module' // ✓ ok
Evitar classes de carácteres vacia en expresiones regulares.
eslint: no-empty-character-class
const myRegex = /^abc[]/ // ✗ avoid
const myRegex = /^abc[a-z]/ // ✓ ok
Evitar patrones de destructuración vacíos.
eslint: no-empty-pattern
const { a: {} } = foo // ✗ avoid
const { a: { b } } = foo // ✓ ok
Evitar uso de eval().
eslint: no-eval
eval( "var result = user." + propName ) // ✗ avoid
var result = user[propName] // ✓ ok
Evitar reasignar excepciones en cláusulas catch.
eslint: no-ex-assign
try {
// ...
} catch (e) {
e = 'new value' // ✗ avoid
}
try {
// ...
} catch (e) {
const newVal = 'new value' // ✓ ok
}
Evitar extender objetos nativos.
eslint: no-extend-native
Object.prototype.age = 21 // ✗ avoid
Evitar uso innecesario de bind en funciones.
eslint: no-extra-bind
const name = function () {
getName()
}.bind(user) // ✗ avoid
const name = function () {
this.getName()
}.bind(user) // ✓ ok
Evitar hacer cast a booleanos.
eslint: no-extra-boolean-cast
const result = true
if (!!result) { // ✗ avoid
// ...
}
const result = true
if (result) { // ✓ ok
// ...
}
Evitar paréntesis innecesario alrededor de expresión de funciones.
eslint: no-extra-parens
const myFunc = (function () { }) // ✗ avoid
const myFunc = function () { } // ✓ ok
Usar break para evitar pasar de largo fallthrough en casos switch.
eslint: no-fallthrough
switch (filter) {
case 1:
doSomething() // ✗ avoid
case 2:
doSomethingElse()
}
switch (filter) {
case 1:
doSomething()
break // ✓ ok
case 2:
doSomethingElse()
}
switch (filter) {
case 1:
doSomething()
// fallthrough // ✓ ok
case 2:
doSomethingElse()
}
Evitar decimales flotantes.
eslint: no-floating-decimal
const discount = .5 // ✗ avoid
const discount = 0.5 // ✓ ok
Evitar reasignación de declaraciones de funciones.
eslint: no-func-assign
function myFunc () { }
myFunc = myOtherFunc // ✗ avoid
Evitar reasignación de variables globales de solo-lectura.
eslint: no-global-assign
window = {} // ✗ avoid
Evitar usar eval() implícito.
eslint: no-implied-eval
setTimeout("alert('Hello world')") // ✗ avoid
setTimeout(function () { alert('Hello world') }) // ✓ ok
Evitar declaración de funciones en bloques anidados.
eslint: no-inner-declarations
if (authenticated) {
function setAuthUser () {} // ✗ avoid
}
Evitar cadenas de texto expresiones regulares invalidas en constructores RegExp.
eslint: no-invalid-regexp
RegExp('[a-z') // ✗ avoid
RegExp('[a-z]') // ✓ ok
Evitar espacios en blanco irregulares.
eslint: no-irregular-whitespace
function myFunc () /*<NBSP>*/{} // ✗ avoid
Evitar uso de __iterator__.
eslint: no-iterator
Foo.prototype.__iterator__ = function () {} // ✗ avoid
Evitar etiquetas que comparten el nombre de una variable en scope.
eslint: no-label-var
var score = 100
function game () {
score: while (true) { // ✗ avoid
score -= 10
if (score> 0) continue score
break
}
}
Evitar sentencias etiquetadas.
eslint: no-labels
label:
while (true) {
break label // ✗ avoid
}
Evitar bloques anidados innecesarios.
eslint: no-lone-blocks
function myFunc () {
{ // ✗ avoid
myOtherFunc()
}
}
function myFunc () {
myOtherFunc() // ✓ ok
}
Evitar mezclar espacios y tabulaciones para sangría.
eslint: no-mixed-spaces-and-tabs
Evitar uso de espacios en blanco múltiples a excepción de sangría.
eslint: no-multi-spaces
const id = 1234 // ✗ avoid
const id = 1234 // ✓ ok
Evitar cadenas de texto multi-línea.
eslint: no-multi-str
const message = 'Hello \
world' // ✗ avoid
Evitar usar new sin asignar al objeto a una variable.
eslint: no-new
new Character() // ✗ avoid
const character = new Character() // ✓ ok
Evitar uso de constructor Function.
eslint: no-new-func
var sum = new Function('a', 'b', 'return a + b') // ✗ avoid
Evitar uso de constructor Object.
eslint: no-new-object
let config = new Object() // ✗ avoid
Evitar uso de new require.
eslint: no-new-require
const myModule = new require('my-module') // ✗ avoid
Evitar uso de constructor Symbol.
eslint: no-new-symbol
const foo = new Symbol('foo') // ✗ avoid
Evitar envolturas de instancias primitivas.
eslint: no-new-wrappers
const message = new String('hello') // ✗ avoid
Evitar llamar propiedades de objetos globles como funciones.
eslint: no-obj-calls
const math = Math() // ✗ avoid
Evitar uso de octal literal.
eslint: no-octal
const octal = 042 // ✗ avoid
const decimal = 34 // ✓ ok
const octalString = '042' // ✓ ok
Evitar escapado de secuencia octal en cadena de texto literal.
eslint: no-octal-escape
const copyright = 'Copyright 251円' // ✗ avoid
Evitar concatenacion de cadena de texto para __dirname y __filename.
eslint: no-path-concat
const pathToFile = __dirname + '/app.js' // ✗ avoid
const pathToFile = path.join(__dirname, 'app.js') // ✓ ok
Evitar uso de __proto__. Use getPrototypeOf en su lugar.
eslint: no-proto
const foo = obj.__proto__ // ✗ avoid
const foo = Object.getPrototypeOf(obj) // ✓ ok
Evitar re-reclaración de variables.
eslint: no-redeclare
let name = 'John'
let name = 'Jane' // ✗ avoid
let name = 'John'
name = 'Jane' // ✓ ok
Evitar múltiples espacios en expresiones regulares.
eslint: no-regex-spaces
const regexp = /test value/ // ✗ avoid
const regexp = /test {3}value/ // ✓ ok
const regexp = /test value/ // ✓ ok
Asignación de variables en el retorno de funciones debe estar rodeado de paréntesis.
eslint: no-return-assign
function sum (a, b) {
return result = a + b // ✗ avoid
}
function sum (a, b) {
return (result = a + b) // ✓ ok
}
Evitar asignar una variable a sí misma.
eslint: no-self-assign
name = name // ✗ avoid
Evitar comparar una variable consigo misma.
esint: no-self-compare
if (score === score) {} // ✗ avoid
Evitar uso de secuencia separado por coma.
eslint: no-sequences
if (doSomething(), !!test) {} // ✗ avoid
Nombres restringidos no deben ser cambiados (shadowed).
eslint: no-shadow-restricted-names
let undefined = 'value' // ✗ avoid
Array dispersos no están permitidos.
eslint: no-sparse-arrays
let fruits = ['apple',, 'orange'] // ✗ avoid
No se deben usar Tabulaciones.
eslint: [no-tabs](http://eslint.org/docs/rule
Cadenas de textos regulares no deben contener placeholders de plantillas literales.
eslint: no-template-curly-in-string
const message = 'Hello ${name}' // ✗ avoid
const message = `Hello ${name}` // ✓ ok
super() debe ser llamado inmediatamente antes de usar this.
eslint: no-this-before-super
class Dog extends Animal {
constructor () {
this.legs = 4 // ✗ avoid
super()
}
}
Solo se puede lanzar (throw) un objeto Error.
eslint: no-throw-literal
throw 'error' // ✗ avoid
throw new Error('error') // ✓ ok
Espacios en blanco después del final línea no están permitidos .
eslint: no-trailing-spaces
Inicializar una variable con undefined no está permitido.
eslint: no-undef-init
let name = undefined // ✗ avoid
let name
name = 'value' // ✓ ok
Bucles no modificados no están permitidos.
eslint: no-unmodified-loop-condition
for (let i = 0; i < items.length; j++) {...} // ✗ avoid
for (let i = 0; i < items.length; i++) {...} // ✓ ok
Evitar usar operador ternario cuando existe una alternative más simple.
eslint: no-unneeded-ternary
let score = val ? val : 0 // ✗ avoid
let score = val || 0 // ✓ ok
Evitar dejar código inalcanzable después de sentencias return, throw, continue, y break.
eslint: no-unreachable
function doSomething () {
return true
console.log('never called') // ✗ avoid
}
Evitar sentencias de control de flujo en bloques finally.
eslint: no-unsafe-finally
try {
// ...
} catch (e) {
// ...
} finally {
return 42 // ✗ avoid
}
El operando izquierdo en operaciones relacionales no debe ser negado.
eslint: no-unsafe-negation
if (!key in obj) {} // ✗ avoid
Evitar uso innecesario de .call() y .apply().
eslint: no-useless-call
sum.call(null, 1, 2, 3) // ✗ avoid
Evitar usar constructores innecesarios.
eslint: no-useless-computed-key
const user = { ['name']: 'John Doe' } // ✗ avoid
const user = { name: 'John Doe' } // ✓ ok
Evitar uso innecesario de escapado de text.
eslint: no-useless-escape
let message = 'Hell\o' // ✗ avoid
Renombrar import, export o destructuración con el mismo nombre no está permitido.
eslint: no-useless-rename
import { config as config } from './config' // ✗ avoid
import { config } from './config' // ✓ ok
Evitar espacios en blanco antes de una propiedad.
eslint: no-whitespace-before-property
user .name // ✗ avoid
user.name // ✓ ok
Evitar uso de sentencia with.
eslint: no-with
with (val) {...} // ✗ avoid
Mantener consistencia de nuevas líneas entre las propiedades de un objeto.
eslint: object-property-newline
const user = {
name: 'Jane Doe', age: 30,
username: 'jdoe86' // ✗ avoid
}
const user = { name: 'Jane Doe', age: 30, username: 'jdoe86' } // ✓ ok
const user = {
name: 'Jane Doe',
age: 30,
username: 'jdoe86'
} // ✓ ok
Evitar espacios de relleno entre bloques.
eslint: padded-blocks
if (user) {
// ✗ avoid
const name = getName()
}
if (user) {
const name = getName() // ✓ ok
}
Evitar espacios en blanco entre el operador de propagación y la expresión.
eslint: rest-spread-spacing
fn(... args) // ✗ avoid
fn(...args) // ✓ ok
Punto y coma (semicolon) debe tener un espacio en blanco después y no antes.
eslint: semi-spacing
for (let i = 0 ;i < items.length ;i++) {...} // ✗ avoid
for (let i = 0; i < items.length; i++) {...} // ✓ ok
Mantener espacio después de los bloques.
eslint: space-before-blocks
if (admin){...} // ✗ avoid
if (admin) {...} // ✓ ok
Evitar espacios en blanco entre paréntesis.
eslint: space-in-parens
getName( name ) // ✗ avoid
getName(name) // ✓ ok
Operador unario debe tener espacio en blanco después.
eslint: space-unary-ops
typeof!admin // ✗ avoid
typeof !admin // ✓ ok
Usar espacios dentro de comentarios.
eslint: spaced-comment
//comment // ✗ avoid
// comment // ✓ ok
/*comment*/ // ✗ avoid
/* comment */ // ✓ ok
Evitar espacios en blanco dentro de placeholders de plantillas literales.
eslint: template-curly-spacing
const message = `Hello, ${ name }` // ✗ avoid
const message = `Hello, ${name}` // ✓ ok
Usar isNaN() cuando se desea chequear NaN.
eslint: use-isnan
if (price === NaN) { } // ✗ avoid
if (isNaN(price)) { } // ✓ ok
typeof debe ser comparado con una cadena de texto valida.
eslint: valid-typeof
typeof name === 'undefimed' // ✗ avoid
typeof name === 'undefined' // ✓ ok
Expressiones Funciones inmediatamente invocadas (IIFEs) deben ser envueltas en paréntesis.
eslint: wrap-iife
const getName = function () { }() // ✗ avoid
const getName = (function () { }()) // ✓ ok
const getName = (function () { })() // ✓ ok
El * en expresiones yield* deben tener un espacio en blanco antes y después.
eslint: yield-star-spacing
yield* increment() // ✗ avoid
yield * increment() // ✓ ok
Evitar condiciones Yoda.
eslint: yoda
if (42 === age) { } // ✗ avoid
if (age === 42) { } // ✓ ok
Sin puntos y comas. (ver: 1, 2, 3)
eslint: semi
window.alert('hi') // ✓ ok
window.alert('hi'); // ✗ evitar
Nunca empezar una línea con (, [, o `. Este es el único problema cuando se omiten los puntos y comas, y standard te protege de problemas potenciales
eslint: no-unexpected-multiline
// ✓ ok
;(function () {
window.alert('ok')
}())
// ✗ evitar
(function () {
window.alert('ok')
}())
// ✓ ok
;[1, 2, 3].forEach(bar)
// ✗ evitar
[1, 2, 3].forEach(bar)
// ✓ ok
;`hello`.indexOf('o')
// ✗ evitar
`hello`.indexOf('o')
Nota: si te encuentras a menudo escribiendo código de esta manera, quizás estás tratando de ser muy listo.
Esta taquigrafía es rechazada, en favor a expresiones claras y legibles, cuando sea posible.
En vez de esto:
;[1, 2, 3].forEach(bar)
Se prefiere esto:
var nums = [1, 2, 3]
nums.forEach(bar)
Los minificadores de código populares hoy en día están basados en AST (Árbol abstracto de sintaxis), de manera que pueden gestionar JavaScript sin puntos y comas sin problemas (puntos y comas no son requeridos en JavaScript).
[Depender de ASI (Inserción automática de puntos y comas)] es bastante seguro, y perfectamente válido que cualquier navegador web entiende, Compilador Closure, yuicompressor, packer y jsmin todos pueden perfectamente minificarlo. No existe impacto en la performance.
Lamento que, en vez de educarlos, sus líderes en este lenguaje les han dado mentiras y miedos. Que sinvergüenza. Yo te recomiendo aprender como las declaraciones realmente terminan en JavaScript (y en cuales casos no terminan), de esta manera tú puedes escribir código que encuentres hermoso.
En general, \n termina una declaración a menos que
La declaración tiene sin cerrar un paréntesis, array literal, u objeto literal o termina de una manera no válida (por instancia, terminar con . o ,)
La línea es -- o ++ (en este caso esto decrementa/incrementa el proximo token)
Es un for(), while(), do, if(), o else, no exista una llave {
La próxima línea empieza con [, (, +, *, /, -, ,, . o algún operador binario que solo se encuentra entre dos tokens en una sola expresión
El primero es bastante obvio. Incluso JSLint no tiene problemas con caracteres \n en JSON y constructores entre paréntesis, y con declaraciones var que lapsan múltiples líneas terminando con ,.
El segundo es super raro. Yo nunca he visto un caso (fuera de este tipo de conversaciones) donde quisieras escribir i\n++\nj, pero, de hecho eso es analizado como i; ++j;y no j++; j.
El tercero es bien entendido, es generalmente despreciado. if (x)\ny() es equivalente a if (x) { y() }. El constructor no termina hasta que alcanza un bloque o una declaración.
; es una declaración JavaScript válida, entonces if(x); es el equivalente a if(x){} o "Sí x, hacer nada" Esto es más comúnmente aplicado a bucles donde el bucle también chequea si la función actualiza, No es usual, pero existe.
El cuarto es generalmente el caso inducido "Oh no, necesitas puntos y comas". Pero pasa que es bastante simple darle el prefijo a esas linas con puntos y comas, si no quieres que sean la continuación de la línea previa. Por ejemplo, en vez de esto:
foo();
[1,2,3].forEach(bar);
Podrías hacer esto:
foo()
;[1,2,3].forEach(bar)
La ventaja es que los prefijos son fáciles de notar, una vez te acostumbras a ver líneas que no empiecen con ( o [ sin puntos y comas.
Fin de la cita de "An Open Letter to JavaScript Leaders Regarding Semicolons".