English • Español (Latinoamérica) • Français • 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:
indentfunction hello (name) { console.log('hi', name) }
-
Usar comillas simples en cadenas de texto con la excepcion para evitar escapado de texto
eslint:
quotesconsole.log('hello there') // comillas simples $("<div class='box'>") // escapado de texto
-
No dejar variables sin usar.
eslint:
no-unused-varsfunction myFunction () { var result = something() // ✗ evitar }
-
Espacio después de las palabras claves.
eslint:
keyword-spacingif (condition) { ... } // ✓ ok if(condition) { ... } // ✗ evitar
-
Agregar un espacio antes de los paréntesis de la función declarada
eslint:
space-before-function-parenfunction name (arg) { ... } // ✓ ok function name(arg) { ... } // ✗ evitar run(function () { ... }) // ✓ ok run(function() { ... }) // ✗ evitar
-
Usar siempre
===en vez de==.
Exception:obj == nullis allowed to check fornull || undefined.eslint:
eqeqeqif (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 despues 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 declaracion else en la misma linea que sus llaves.
eslint:
brace-style// ✓ ok if (condition) { // ... } else { // ... }
// ✗ evitar if (condition) { // ... } else { // ... }
-
Para declaraciones if multi-linea 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
erren 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 excepcion de:document,consoleynavigator.eslint:
no-undefwindow.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-linea, colocar el
?y:en su propia nueva linea.eslint:
operator-linebreak// ✓ 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 declaracion
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 linea.
eslint:
block-spacingfunction foo () {return true} // ✗ evitar function foo () { return true } // ✓ ok
-
Usar camelcase al nombre variables y funciones.
eslint:
camelcasefunction my_function () { } // ✗ avoid function myFunction () { } // ✓ ok var my_var = 'hello' // ✗ avoid var myVar = 'hello' // ✓ ok
-
Comas adicionales no esta permitido.
eslint:
comma-danglevar obj = { message: 'hello', // ✗ avoid }
-
Comas deben colocarse al final de la linea actual.
eslint:
comma-stylevar obj = { foo: 'foo' ,bar: 'bar' // ✗ avoid } var obj = { foo: 'foo', bar: 'bar' // ✓ ok }
-
El Puto debe ir en la misma linea que la propiedad.
eslint:
dot-locationconsole. log('hello') // ✗ avoid console .log('hello') // ✓ ok
-
Archivos deben terminar con una nueva linea.
elint:
eol-last -
Sin espacios entre el identificador de la funcion y su invocación.
eslint:
func-call-spacingconsole.log ('hello') // ✗ avoid console.log('hello') // ✓ ok
-
Agregar espacio entre dos puntos (colon) y pares clave valor.
eslint:
key-spacingvar 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-capfunction animal () {} var dog = new animal() // ✗ avoid function Animal () {} var dog = new Animal() // ✓ ok
-
Constructor sin argumentos debe ser invocado con paréntesis.
eslint:
new-parensfunction Animal () {} var dog = new Animal // ✗ avoid var dog = new Animal() // ✓ ok
-
Objetos deben contener un getter cuando se ha definido un setter.
eslint:
accessor-pairsvar 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-superclass Dog { constructor () { super() // ✗ avoid } } class Dog extends Mammal { constructor () { super() // ✓ ok } }
-
Usar array literales en vez de array constructor.
eslint:
no-array-constructorvar nums = new Array(1, 2, 3) // ✗ avoid var nums = [1, 2, 3] // ✓ ok
-
Evitar usar arguments.calle y arguments.caller.
eslint:
no-callerfunction 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-assignclass Dog {} Dog = 'Fido' // ✗ avoid
-
Evitar modifidicar variables declaracas usando
const.eslint:
no-const-assignconst score = 100 score = 125 // ✗ avoid
-
Evitar usar expresiones constantes en condicionales (a excepcion de búcles).
eslint:
no-constant-conditionif (false) { // ✗ avoid // ... } if (x === 0) { // ✓ ok // ... } while (true) { // ✓ ok // ... }
-
Evitar carácteres de control de expresiones regulares.
eslint:
no-control-regexvar pattern = /\x1f/ // ✗ avoid var pattern = /\x20/ // ✓ ok
-
Evitar sentencias
debugger.eslint:
no-debuggerfunction sum (a, b) { debugger // ✗ avoid return a + b }
-
Evitar operador delete en variables.
eslint:
no-delete-varvar name delete name // ✗ avoid
-
Evitar argumentos duplicados en definicion de funciones.
eslint:
no-dupe-argsfunction sum (a, b, a) { // ✗ avoid // ... } function sum (a, b, c) { // ✓ ok // ... }
-
Evitar duplicados en miembros de clase.
eslint:
no-dupe-class-membersclass Dog { bark () {} bark () {} // ✗ avoid }
-
Evitar duplicado de claves en objetos literales.
eslint:
no-dupe-keysvar user = { name: 'Jane Doe', name: 'John Doe' // ✗ avoid }
-
Evitar dublicados de etiqueta
caseen sentenciasswitch.eslint:
no-duplicate-caseswitch (id) { case 1: // ... case 1: // ✗ avoid }
-
Usar una unica sentencia
importpor modulo.eslint:
no-duplicate-importsimport { 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-classconst myRegex = /^abc[]/ // ✗ avoid const myRegex = /^abc[a-z]/ // ✓ ok
-
Evitar pratones de destructuración vacios.
eslint:
no-empty-patternconst { a: {} } = foo // ✗ avoid const { a: { b } } = foo // ✓ ok
-
Evitar uso de
eval().eslint:
no-evaleval( "var result = user." + propName ) // ✗ avoid var result = user[propName] // ✓ ok
-
Evitar reasignar excepciones en clausas
catch.eslint:
no-ex-assigntry { // ... } catch (e) { e = 'new value' // ✗ avoid } try { // ... } catch (e) { const newVal = 'new value' // ✓ ok }
-
Evitar extender objetos nativos
eslint:
no-extend-nativeObject.prototype.age = 21 // ✗ avoid
-
Evitar uso innecesario de bind en funciones.
eslint:
no-extra-bindconst name = function () { getName() }.bind(user) // ✗ avoid const name = function () { this.getName() }.bind(user) // ✓ ok
-
Evitar hacer cast a booleanos.
eslint:
no-extra-boolean-castconst result = true if (!!result) { // ✗ avoid // ... } const result = true if (result) { // ✓ ok // ... }
-
Evitar paréntesis inncesario alrededor de expresión de funciones.
eslint:
no-extra-parensconst myFunc = (function () { }) // ✗ avoid const myFunc = function () { } // ✓ ok
-
Usar
breakpara evitar pasar de largofallthroughen casosswitch.eslint:
no-fallthroughswitch (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-decimalconst discount = .5 // ✗ avoid const discount = 0.5 // ✓ ok
-
Evitar reasignación de declaraciones de funciones.
eslint:
no-func-assignfunction myFunc () { } myFunc = myOtherFunc // ✗ avoid
-
Evitar reasignación de variables globales de solo-lectura.
eslint:
no-global-assignwindow = {} // ✗ avoid
-
Evitar usar eval() implícito.
eslint:
no-implied-evalsetTimeout("alert('Hello world')") // ✗ avoid setTimeout(function () { alert('Hello world') }) // ✓ ok
-
Evitar declaracion de funciones en bloques anidados.
eslint:
no-inner-declarationsif (authenticated) { function setAuthUser () {} // ✗ avoid }
-
Evitar cadenas de texto expresiones regulares invalidas en costructores
RegExp.eslint:
no-invalid-regexpRegExp('[a-z') // ✗ avoid RegExp('[a-z]') // ✓ ok
-
Evitar espacios en blanco irregulares.
eslint:
no-irregular-whitespacefunction myFunc () /*<NBSP>*/{} // ✗ avoid
-
Evitar uso de
__iterator__.eslint:
no-iteratorFoo.prototype.__iterator__ = function () {} // ✗ avoid
-
Evitar etiquetas que comparten el nombre de una variable en scope.
eslint:
no-label-varvar score = 100 function game () { score: while (true) { // ✗ avoid score -= 10 if (score > 0) continue score break } }
-
Evitar sentencias etiquetadas.
eslint:
no-labelslabel: while (true) { break label // ✗ avoid }
-
Evitar bloques anidados innecesarios
eslint:
no-lone-blocksfunction 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 multiples a excepcion de sangría
eslint:
no-multi-spacesconst id = 1234 // ✗ avoid const id = 1234 // ✓ ok
-
Evitar cadenas de texto multi-linea
eslint:
no-multi-strconst message = 'Hello \ world' // ✗ avoid
-
Evitar usar
newsin asignar a el objecto a una variableeslint:
no-newnew Character() // ✗ avoid const character = new Character() // ✓ ok
-
Evitar uso de constructor
Function.eslint:
no-new-funcvar sum = new Function('a', 'b', 'return a + b') // ✗ avoid
-
Evitar uso de constructor
Objecteslint:
no-new-objectlet config = new Object() // ✗ avoid
-
Evitar uso de
new require.eslint:
no-new-requireconst myModule = new require('my-module') // ✗ avoid
-
Evitar uso de constructor
Symbol.eslint:
no-new-symbolconst foo = new Symbol('foo') // ✗ avoid
-
Evitar envolturas de instancias primitivas.
eslint:
no-new-wrappersconst message = new String('hello') // ✗ avoid
-
Evitar llamar propiedades de objetos globles como funciones.
eslint:
no-obj-callsconst math = Math() // ✗ avoid
-
Evitar uso de octal literal.
eslint:
no-octalconst num = 042 // ✗ avoid const num = '042' // ✓ ok
-
Evitar escapado de secuencia octal en cadena de texto literal.
eslint:
no-octal-escapeconst copyright = 'Copyright \251' // ✗ avoid
-
Evitar concatenacion de cadena de texto para
__dirnamey__filename.eslint:
no-path-concatconst pathToFile = __dirname + '/app.js' // ✗ avoid const pathToFile = path.join(__dirname, 'app.js') // ✓ ok
-
Evitar uso de
__proto__. UsegetPrototypeOfen su lugar.eslint:
no-protoconst foo = obj.__proto__ // ✗ avoid const foo = Object.getPrototypeOf(obj) // ✓ ok
-
Evitar re-reclaración de variables.
eslint:
no-redeclarelet name = 'John' let name = 'Jane' // ✗ avoid let name = 'John' name = 'Jane' // ✓ ok
-
Evitar multiples espacios en expresiones regulares.
eslint:
no-regex-spacesconst 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-assignfunction sum (a, b) { return result = a + b // ✗ avoid } function sum (a, b) { return (result = a + b) // ✓ ok }
-
Evitar asignar una variable a si misma.
eslint:
no-self-assignname = name // ✗ avoid
-
Evitar comparar una variable consigo mismo.
esint:
no-self-compareif (score === score) {} // ✗ avoid
-
Evitar uso de secuencia separado po comma.
eslint:
no-sequencesif (doSomething(), !!test) {} // ✗ avoid
-
Nombres restringidos no deben ser cambiados (shadowed).
eslint:
no-shadow-restricted-nameslet undefined = 'value' // ✗ avoid
-
Array dispersos no estan permitidos.
eslint:
no-sparse-arrayslet 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-stringconst message = 'Hello ${name}' // ✗ avoid const message = `Hello ${name}` // ✓ ok
-
super()debe ser llamado inmediatamente antes de usarthis.eslint:
no-this-before-superclass Dog extends Animal { constructor () { this.legs = 4 // ✗ avoid super() } }
-
Solo se puede lanzar (
throw) un objectoError.eslint:
no-throw-literalthrow 'error' // ✗ avoid throw new Error('error') // ✓ ok
-
Espacios en blanco despues del final linea no estan permitidos .
eslint:
no-trailing-spaces -
Inicializar una variable con
undefinedno esta permitido.eslint:
no-undef-initlet name = undefined // ✗ avoid let name name = 'value' // ✓ ok
-
Búcles no modificados no estan permitidos.
eslint:
no-unmodified-loop-conditionfor (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 mas simple.
eslint:
no-unneeded-ternarylet score = val ? val : 0 // ✗ avoid let score = val || 0 // ✓ ok
-
Evitar dejar código inalcanzable despues de sentencias
return,throw,continue, ybreak.eslint:
no-unreachablefunction doSomething () { return true console.log('never called') // ✗ avoid }
-
Evitar sentencias de control de flujo en bloques
finally.eslint:
no-unsafe-finallytry { // ... } catch (e) { // ... } finally { return 42 // ✗ avoid }
-
El operando izquierdo en operaciones relacionales no debe ser negado.
eslint:
no-unsafe-negationif (!key in obj) {} // ✗ avoid
-
Evitar uso inncesario de
.call()y.apply().eslint:
no-useless-callsum.call(null, 1, 2, 3) // ✗ avoid
-
Evitar usar constructores innecesarios.
eslint:
no-useless-computed-keyconst user = { ['name']: 'John Doe' } // ✗ avoid const user = { name: 'John Doe' } // ✓ ok
-
Evitar uso inncesario de escapado de text.
eslint:
no-useless-escapelet message = 'Hell\o' // ✗ avoid
-
Renombrar import, export o destructuración con el mismo nombre no esta permitido
eslint:
no-useless-renameimport { config as config } from './config' // ✗ avoid import { config } from './config' // ✓ ok
-
Evitar espacios en blanco antes de una propiedad.
eslint:
no-whitespace-before-propertyuser .name // ✗ avoid user.name // ✓ ok
-
Evitar uso de sentencia
with.eslint:
no-withwith (val) {...} // ✗ avoid
-
Mantener consistencia de nuevas lineas entre las propiedades de un objecto .
eslint:
object-property-newlineconst 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-blocksif (user) { // ✗ avoid const name = getName() } if (user) { const name = getName() // ✓ ok }
-
Evitar espacios en blanco entre el operador de propagacion y la expresion
eslint:
rest-spread-spacingfn(... args) // ✗ avoid fn(...args) // ✓ ok
-
Punto y coma (semicolon) debe tener un espacio en blanco despues y no antes.
eslint:
semi-spacingfor (let i = 0 ;i < items.length ;i++) {...} // ✗ avoid for (let i = 0; i < items.length; i++) {...} // ✓ ok
-
Mantener espacio despues de los bloques.
eslint:
space-before-blocksif (admin){...} // ✗ avoid if (admin) {...} // ✓ ok
-
Evitar espacios en blanco entre paréntesis.
eslint:
space-in-parensgetName( name ) // ✗ avoid getName(name) // ✓ ok
-
Operador unario debe tener espacio en blanco despues.
eslint:
space-unary-opstypeof!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 chequearNaN.eslint:
use-isnanif (price === NaN) { } // ✗ avoid if (isNaN(price)) { } // ✓ ok
-
typeofdebe ser comparado con una cadena de texto valida.eslint:
valid-typeoftypeof name === 'undefimed' // ✗ avoid typeof name === 'undefined' // ✓ ok
-
Expressiones Funciones inmediatamente invocadas (IIFEs) deben ser envueltas en paréntesis.
eslint:
wrap-iifeconst getName = function () { }() // ✗ avoid const getName = (function () { }()) // ✓ ok const getName = (function () { })() // ✓ ok
-
El
*en expresionesyield*deben tener un espacio en blanco antes y despues.eslint:
yield-star-spacingyield* increment() // ✗ avoid yield * increment() // ✓ ok
-
Evitar condiciones Yoda.
eslint:
yodaif (42 === age) { } // ✗ avoid if (age === 42) { } // ✓ ok
-
Sin puntos y comas. (see: 1, 2, 3)
eslint:
semiwindow.alert('hi') // ✓ ok window.alert('hi'); // ✗ evitar
-
Nunca empezar una linea con
(,[, o`. Este es el único problema cuando se omiten los puntos y comas, ystandardte protege de problemas potencialeseslint:
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)
- An Open Letter to JavaScript Leaders Regarding Semicolons
- JavaScript Semicolon Insertion – Everything you need to know
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 el performance.
Lamento que, en vez de educarlos, sus líderes en este lenguaje les han dado mentiras y miedos. Que sinverguenza. Yo te recomiendo aprender como las declaraciones realmente terminan en JavaScript (y en cuales casos no terminan), de esta manera tu 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, o 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 un 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 continuacion de la linea previa. Por ejemplo, en vez de esto:
foo();
[1,2,3].forEach(bar);podrias 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 the la cita de "An Open Letter to JavaScript Leaders Regarding Semicolons".