Techedge JavaScript & Typescript Style Guide

Esta guía de estilo tiene como objetivo dar una pauta para desarrollar código, fácil de entender, limpio y legible.

Reglas

Usar nombres en inglés para clases, métodos, funciones y variables.

class Cliente         // ✗ evitar 
{
    getTelefono()     // ✗ evitar 
    { 
        // ... 
    }
}

class Customer 
{                     // ✓ ok
    getPhone() 
    {                 // ✓ ok 
        // ... 
    }
}

Usar 4 espacios como sangría.

eslint: indent

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

Usar comillas simples en cadenas de texto con la excepcion 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 ==.
Exception: obj == null is allowed to check for 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 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 una linea distinta que sus llaves.

eslint: brace-style

value: 'brace-style': ['error', 'stroustrup', { "allowSingleLine": true }],

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

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

// ✗ evitar
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 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 excepcion 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-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-spacing

function foo () {return true;}    // ✗ evitar
function foo () { return true; }  // ✓ ok

Usar camelcase al nombre variables y funciones.

eslint: camelcase

function my_function () { }    // ✗ evitar
function myFunction () { }     // ✓ ok

var my_var = 'hello';          // ✗ evitar
var myVar = 'hello';           // ✓ ok

Comas adicionales no esta permitido.

eslint: comma-dangle

var obj = {
    message: 'hello',   // ✗ evitar
}

Comas deben colocarse al final de la linea actual.

eslint: comma-style

var obj = {
    foo: 'foo'
    ,bar: 'bar'   // ✗ evitar
};

var obj = {
    foo: 'foo',
    bar: 'bar'   // ✓ ok
};

El Puto debe ir en la misma linea que la propiedad.

eslint: dot-location

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

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-spacing
```
console.log ('hello'); // ✗ evitar
console.log('hello');  // ✓ ok
```

Agregar espacio entre dos puntos (colon) y pares clave valor.

eslint: key-spacing

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

Nombres de Constructor deben empezar con letra Mayúscula.

eslint: new-cap

function animal () {}
var dog = new animal();   // ✗ evitar

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;    // ✗ evitar
var dog = new Animal();  // ✓ ok

Objetos deben contener un getter cuando se ha definido un setter.

eslint: accessor-pairs

var person = {
    set name (value) {    // ✗ evitar
        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();   // ✗ evitar
    }
}

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);   // ✗ evitar
var nums = [1, 2, 3];            // ✓ ok

Evitar usar arguments.caller y arguments.caller.

eslint: no-caller

function foo (n) 
{
    if (n <= 0) return;

    arguments.caller(n - 1);   // ✗ evitar
}

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';    // ✗ evitar
```
Evitar modifidicar variables declaracas usando const.

eslint: no-const-assign
```
const score = 100;
score = 125;       // ✗ evitar
```

Evitar usar expresiones constantes en condicionales (a excepcion de búcles).

eslint: no-constant-condition

if (false)        // ✗ evitar 
{ 
// ...
}

if (x === 0)      // ✓ ok 
{
// ...
}

while (true)      // ✓ ok 
{
// ...
}

Evitar carácteres de control de expresiones regulares.

eslint: no-control-regex

var pattern = /\x1f/;    // ✗ evitar
var pattern = /\x20/;    // ✓ ok

Evitar sentencias debugger.

eslint: no-debugger

function sum (a, b) 
{
    debugger;      // ✗ evitar
    return a + b;
}

Evitar operador delete en variables.

eslint: no-delete-var
```
var name;
delete name;     // ✗ evitar
```

Evitar argumentos duplicados en definicion de funciones.

eslint: no-dupe-args

function sum (a, b, a) { // ✗ evitar 
// ...
}

function sum (a, b, c) { // ✓ ok
// ...
}

Evitar duplicados en miembros de clase.

eslint: no-dupe-class-members

class Dog {
    bark () {}
    bark () {}    // ✗ evitar
}

Evitar duplicado de claves en objetos literales.

eslint: no-dupe-keys

var user = {
    name: 'Jane Doe',
    name: 'John Doe'    // ✗ evitar
}

Evitar dublicados de etiqueta case en sentencias switch.

eslint: no-duplicate-case

switch (id) 
{
    case 1:
        // ...
    case 1:     // ✗ evitar
}

Usar una unica sentencia import por modulo.

eslint: no-duplicate-imports

import { myFunc1 } from 'module';
import { myFunc2 } from 'module';          // ✗ evitar

import { myFunc1, myFunc2 } from 'module' // ✓ ok

Evitar classes de carácteres vacia en expresiones regulares.

eslint: no-empty-character-class

const myRegex = /^abc[]/;      // ✗ evitar
const myRegex = /^abc[a-z]/;   // ✓ ok

Evitar pratones de destructuración vacios.

eslint: no-empty-pattern

const { a: {} } = foo;         // ✗ evitar
const { a: { b } } = foo;      // ✓ ok

Evitar uso de eval().

eslint: no-eval

eval( "var result = user." + propName ); // ✗ evitar
var result = user[propName];             // ✓ ok

Evitar reasignar excepciones en clausas catch.

eslint: no-ex-assign

try 
{
    // ...
} 
catch (e) 
{
    e = 'new value';            // ✗ evitar
}

try 
{
// ...
} 
catch (e) 
{
    const newVal = 'new value';  // ✓ ok
}

Evitar extender objetos nativos

eslint: no-extend-native
```
Object.prototype.age = 21;     // ✗ evitar
```

Evitar uso innecesario de bind en funciones.

eslint: no-extra-bind

const name = function () {
    getName();
}.bind(user);    // ✗ evitar

const name = function () {
    this.getName();
}.bind(user);    // ✓ ok

Evitar hacer cast a booleanos.

eslint: no-extra-boolean-cast

const result = true;
if (!!result)     // ✗ evitar 
{
    // ...
}

const result = true;
if (result)       // ✓ ok 
{
    // ...
}

Evitar paréntesis inncesario alrededor de expresión de funciones.

eslint: no-extra-parens

const myFunc = (function () { })   // ✗ evitar
const myFunc = function () { }     // ✓ ok

Usar break para evitar pasar de largo fallthrough en casos switch.

eslint: no-fallthrough

switch (filter) 
{
    case 1:
        doSomething();    // ✗ evitar
    case 2:
        doSomethingElse();
}

switch (filter) 
{
    case 1:
        doSomething();
        break;           // ✓ ok
    case 2:
        doSomethingElse();
}

Evitar decimales flotantes.

eslint: no-floating-decimal

const discount = .5;      // ✗ evitar
const discount = 0.5;     // ✓ ok

Evitar reasignación de declaraciones de funciones.

eslint: no-func-assign

function myFunc () { }
myFunc = myOtherFunc;    // ✗ evitar

Evitar reasignación de variables globales de solo-lectura.

eslint: no-global-assign
```
window = {};     // ✗ evitar
```

Evitar usar eval() implícito.

eslint: no-implied-eval

setTimeout("alert('Hello world')");                   // ✗ evitar
setTimeout(function () { window.alert('Hello world'); })     // ✓ ok

Evitar declaracion de funciones en bloques anidados.

eslint: no-inner-declarations

if (authenticated) 
{
    function setAuthUser () {}    // ✗ evitar
}

Evitar cadenas de texto expresiones regulares invalidas en costructores RegExp.

eslint: no-invalid-regexp
```
RegExp('[a-z');    // ✗ evitar
RegExp('[a-z]');   // ✓ ok
```
Evitar espacios en blanco irregulares.

eslint: no-irregular-whitespace
```
function myFunc () /*<NBSP>*/{}   // ✗ evitar
```

Evitar uso de __iterator__.

eslint: no-iterator

Foo.prototype.__iterator__ = function () {};   // ✗ evitar

Evitar etiquetas que comparten el nombre de una variable en scope.

eslint: no-label-var

var score = 100;
function game () 
{
    score: while (true)       // ✗ evitar 
    {
        score -= 10;
        if (score > 0) continue score;
        break;
    }
}

Evitar sentencias etiquetadas.

eslint: no-labels

label:
while (true) {
    break label;     // ✗ evitar
}

Evitar bloques anidados innecesarios

eslint: no-lone-blocks

function myFunc () {
    {                   // ✗ evitar
        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-spaces

const id =    1234;    // ✗ evitar
const id = 1234;       // ✓ ok

Evitar cadenas de texto multi-linea

eslint: no-multi-str

const message = 'Hello \
               world';     // ✗ evitar

Evitar usar new sin asignar a el objecto a una variable

eslint: no-new

new Character();                     // ✗ evitar
const character = new Character();   // ✓ ok

Evitar uso de constructor Function.

eslint: no-new-func

var sum = new Function('a', 'b', 'return a + b');    // ✗ evitar

Evitar uso de constructor Object

eslint: no-new-object
```
let config = new Object();   // ✗ evitar
```

Evitar uso de new require.

eslint: no-new-require

const myModule = new require('my-module');    // ✗ evitar

Evitar uso de constructor Symbol.

eslint: no-new-symbol

const foo = new Symbol('foo');   // ✗ evitar

Evitar envolturas de instancias primitivas.

eslint: no-new-wrappers
```
const message = new String('hello');   // ✗ evitar
```
Evitar llamar propiedades de objetos globles como funciones.

eslint: no-obj-calls
```
const math = Math();   // ✗ evitar
```

Evitar uso de octal literal.

eslint: no-octal

const num = 042;     // ✗ evitar
const num = '042';   // ✓ ok

Evitar escapado de secuencia octal en cadena de texto literal.

eslint: no-octal-escape
```
const copyright = 'Copyright \251';  // ✗ evitar
```

Evitar concatenacion de cadena de texto para __dirname y __filename.

eslint: no-path-concat

const pathToFile = __dirname + '/app.js';            // ✗ evitar
const pathToFile = path.join(__dirname, 'app.js');   // ✓ ok

Evitar uso de __proto__. Use getPrototypeOf en su lugar.

eslint: no-proto

const foo = obj.__proto__;               // ✗ evitar
const foo = Object.getPrototypeOf(obj);  // ✓ ok

Evitar re-reclaración de variables.

eslint: no-redeclare

let name = 'John';
let name = 'Jane';     // ✗ evitar

let name = 'John';
name = 'Jane';         // ✓ ok

Evitar multiples espacios en expresiones regulares.

eslint: no-regex-spaces

const regexp = /test   value/;   // ✗ evitar

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;     // ✗ evitar
}

function sum (a, b) 
{
    return (result = a + b);   // ✓ ok
}

Evitar asignar una variable a si misma.

eslint: no-self-assign
```
name = name;   // ✗ evitar
```
Evitar comparar una variable consigo mismo.

esint: no-self-compare
```
if (score === score) {}   // ✗ evitar
```
Evitar uso de secuencia separado po comma.

eslint: no-sequences
```
if (doSomething(), !!test) {}   // ✗ evitar
```
Nombres restringidos no deben ser cambiados (shadowed).

eslint: no-shadow-restricted-names
```
let undefined = 'value';     // ✗ evitar
```

Array dispersos no estan permitidos.

eslint: no-sparse-arrays

let fruits = ['apple',, 'orange'];       // ✗ evitar

No se deben usar Tabulaciones.

eslint: no-tabs
Cadenas de textos regulares no deben contener placeholders de plantillas literales.

eslint: no-template-curly-in-string
```
const message = 'Hello ${name}';   // ✗ evitar
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;     // ✗ evitar
        super();
    }
}

Solo se puede lanzar (throw) un objecto Error.

eslint: no-throw-literal

throw 'error';               // ✗ evitar
throw new Error('error');    // ✓ ok

Espacios en blanco despues del final linea no estan permitidos .

eslint: no-trailing-spaces

Inicializar una variable con undefined no esta permitido.

eslint: no-undef-init

let name = undefined;    // ✗ evitar

let name;
name = 'value';          // ✓ ok

Búcles no modificados no estan permitidos.

eslint: no-unmodified-loop-condition

for (let i = 0; i < items.length; j++) {...}    // ✗ evitar
for (let i = 0; i < items.length; i++) {...}    // ✓ ok

Evitar usar operador ternario cuando existe una alternative mas simple.

eslint: no-unneeded-ternary

let score = val ? val : 0;     // ✗ evitar
let score = val || 0;          // ✓ ok

Evitar dejar código inalcanzable despues de sentencias return, throw, continue, y break .

eslint: no-unreachable

function doSomething ()
{
    return true;
    console.log('never called');     // ✗ evitar
}

Evitar sentencias de control de flujo en bloques finally.

eslint: no-unsafe-finally

try 
{
    // ...
} 
catch (e) 
 {
    // ...
} 
finally 
{
    return 42;     // ✗ evitar
}

El operando izquierdo en operaciones relacionales no debe ser negado.

eslint: no-unsafe-negation
```
if (!key in obj) {}       // ✗ evitar
```
Evitar uso inncesario de .call() y .apply().

eslint: no-useless-call
```
sum.call(null, 1, 2, 3);   // ✗ evitar
```

Evitar usar constructores innecesarios.

eslint: no-useless-computed-key

const user = { ['name']: 'John Doe' };   // ✗ evitar
const user = { name: 'John Doe' };       // ✓ ok

Evitar uso inncesario de escapado de text.

eslint: no-useless-escape
```
let message = 'Hell\o';  // ✗ evitar
```

Renombrar import, export o destructuración con el mismo nombre no esta permitido

eslint: no-useless-rename

import { config as config } from './config';     // ✗ evitar
import { config } from './config';               // ✓ ok

Evitar espacios en blanco antes de una propiedad.

eslint: no-whitespace-before-property
```
user .name      // ✗ evitar
user.name       // ✓ ok
```
Evitar uso de sentencia with.

eslint: no-with
```
with (val) {...}    // ✗ evitar
```

Mantener consistencia de nuevas lineas entre las propiedades de un objecto .

eslint: object-property-newline

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

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

value: 'padded-blocks': ['error', 'always']

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

}

Evitar espacios en blanco entre el operador de propagacion y la expresion

eslint: rest-spread-spacing
```
fn(... args);    // ✗ evitar
fn(...args);     // ✓ ok
```

Punto y coma (semicolon) debe tener un espacio en blanco despues y no antes.

eslint: semi-spacing

for (let i = 0 ;i < items.length ;i++) {...}    // ✗ evitar
for (let i = 0; i < items.length; i++) {...}    // ✓ ok

Mantener espacio despues de los bloques.

eslint: space-before-blocks

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

Evitar espacios en blanco entre paréntesis.

eslint: space-in-parens

getName( name );     // ✗ evitar
getName(name);       // ✓ ok

Operador unario debe tener espacio en blanco despues.

eslint: space-unary-ops

typeof!admin;        // ✗ evitar
typeof !admin;        // ✓ ok

Usar espacios dentro de comentarios.

eslint: spaced-comment

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

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

Evitar espacios en blanco dentro de placeholders de plantillas literales.

eslint: template-curly-spacing

const message = `Hello, ${ name }`;    // ✗ evitar
const message = `Hello, ${name}`;      // ✓ ok

Usar isNaN() cuando se desea chequear NaN.

eslint: use-isnan

if (price === NaN) { }      // ✗ evitar
if (isNaN(price)) { }       // ✓ ok

typeof debe ser comparado con una cadena de texto valida.

eslint: valid-typeof

typeof name === 'undefimed';     // ✗ evitar
typeof name === 'undefined';     // ✓ ok

Expressiones Funciones inmediatamente invocadas (IIFEs) deben ser envueltas en paréntesis.

eslint: wrap-iife

const getName = function () { }();     // ✗ evitar

const getName = (function () { }());   // ✓ ok
const getName = (function () { })();   // ✓ ok

El * en expresiones yield* deben tener un espacio en blanco antes y despues.

eslint: yield-star-spacing
```
yield* increment();    // ✗ evitar
yield * increment();   // ✓ ok
```

Evitar condiciones Yoda.

eslint: yoda

if (42 === age) { }    // ✗ evitar
if (age === 42) { }    // ✓ ok

Puntos y comas (semicolons)

Con puntos y comas.

eslint: semi

window.alert('hi');  // ✓ ok
window.alert('hi')   // ✗ evitar

Name		Name	Last commit message	Last commit date
Latest commit History 10 Commits
.gitignore		.gitignore
LICENCE.md		LICENCE.md
README.md		README.md
eslint.json		eslint.json

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Repository files navigation

Techedge JavaScript & Typescript Style Guide

Reglas

Puntos y comas (semicolons)

About

Uh oh!

Releases

Packages

Uh oh!

Contributors

Uh oh!

Uh oh!

Folders and files

Latest commit

History

Repository files navigation

Techedge JavaScript & Typescript Style Guide

Reglas

Puntos y comas (semicolons)

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Packages