Skip to content

Latest commit

 

History

History
1397 lines (972 loc) · 33.8 KB

RULES-esla.md

File metadata and controls

1397 lines (972 loc) · 33.8 KB

JavaScript Standard Style

EnglishEspañol (Latinoamérica)FrançaisBahasa IndonesiaItaliano (Italian)日本語 (Japanese)한국어 (Korean)Português (Brasil)简体中文 (Simplified Chinese)繁體中文 (Taiwanese Mandarin)

js-standard-style

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.

Reglas

  • 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

    // ✓ 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

Puntos y comas (semicolons)

  • 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)

Lectura de ayuda con referencia hacia los puntos y comas:

También un video:

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".