WebHero JavaScript Style Guide

В данном руководстве описаны подходы по оформлению Java Script. Данное руководство не является железным правилом для всех проектов во frontend, а только рекомендации для разработки проектов в нашей школе 🙂 На вашей работе могут быть другие правила. Все правила обсуждаются и согласовываются участниками команды и придерживаются их на протяжении разработки всего проекта.

Содержание

Соглашение об именовании.

1. Избегайте однобуквенных названий.

eslint: id-length

❌ не надо так 👇

function q() {
  // ...
}

✅ надо так 👇

function query() {
  // ...
}

2. Используйте camelCase для названий переменных, объектов и функций.

eslint: camelcase

❌ не надо так 👇

const OBJEcttsssss = {};
const this_is_my_object = {};
function c() {}

✅ надо так 👇

const thisIsMyObject = {};
function thisIsMyFunction() {}

3. Используйте PascalCase для именования конструкторов или классов.

eslint: new-cap

❌ не надо так 👇

function user(options) {
  this.name = options.name;
}

const bad = new user({
  name: 'nope',
});

✅ надо так 👇

class User {
  constructor(options) {
    this.name = options.name;
  }
}

const good = new User({
  name: 'yup',
});

4. Не используйте нижнее подчеркивание в начале или конце названий.

eslint: no-underscore-dangle

❌ не надо так 👇

let name_ = 'Max';
foo._bar();

✅ надо так 👇

let name = 'Max';
foo.bar();

Исключения:

разрешено использовать нижнее подчеркивание после this.

Так принято помечать псевдоприватные поля.

✅ надо так 👇

this._bar();
let a = this.foo_;

⬆ Вернуться к содержанию

Переменные.

1. Всегда используйте let или const для объявления переменных.

eslint: no-undef, prefer-const

❌ не надо так 👇

uperPower = new SuperPower();

✅ надо так 👇

const superPower = new SuperPower();

2. Не нужно неинициализированной переменной задавать значение undefined, это значение присваивается автоматически.

eslint: no-undef

❌ не надо так 👇

let foo = undefined;
let bar = undefined;

✅ надо так 👇

let foo;
let bar;

3. Используйте let и const для объявления каждой переменной.

eslint: one-var

❌ не надо так 👇

const items = getItems(),
    goSportsTeam = true,
    dragonball = 'z';

✅ надо так 👇

const items = getItems();
const goSportsTeam = true;
const dragonball = 'z';

4. Не используйте множественное присваивание. Такие конструкции создают неявные глобальные переменные.

eslint: no-multi-assign, one-var

❌ не надо так 👇

(function example() {
  let a = b = c = 1;
}());

console.log(a); // ошибка ReferenceError
console.log(b); // 1
console.log(c); // 1

✅ надо так 👇

(function example() {
  let a = 1;
  let b = a;
  let c = a;
}());

console.log(a); // ошибка ReferenceError
console.log(b); // ошибка ReferenceError
console.log(c); // ошибка ReferenceError

5. Не переноси строку после оператора присваивания.

eslint : operator-linebreak

При нарушении правила max-len оборачивай присваивание в скобки.

❌ не надо так 👇

const foo =
  superLongLongLongLongLongLongLongLongFunctionName();


const foo
  = 'superLongLongLongLongLongLongLongLongString';

✅ надо так 👇

const foo = (
  superLongLongLongLongLongLongLongLongFunctionName()
);

const foo = 'superLongLongLongLongLongLongLongLongString';

6. Не объявляй неиспользуемые переменные.

eslint: no-unused-vars

❌ не надо так 👇

let x = 0;
let y = 1; // Переменная не используется

function getX() {
    return x + 1;
}

✅ надо так 👇

let x = 0;

function getX() {
    return x + 1;
}

⬆ Вернуться к содержанию

Объявление переменных.

1. Если ты не переназначаешь переменную, то используй const для ее объявления. И наоборот.

eslint: prefer-const, no-const-assign

❌ не надо так 👇

var a = 1;
var b = 2;

var count = 1;
if (true) {
  count += 1;
}

✅ надо так 👇

const a = 1;
const b = 2;

let count = 1;
if (true) {
  count += 1;
}

2. Не используй var. Используй let и const.

eslint: no-var

❌ не надо так 👇

var x = "y";
var CONFIG = {};

✅ надо так 👇

let x = "y";
const CONFIG = {};

⬆ Вернуться к содержанию

Запятые.

1. Запятые не должны быть в начале строки.

eslint: comma-style

❌ не надо так 👇

const story = [
    once
  , upon
  , aTime
];

✅ надо так 👇

const story = [
  once,
  upon,
  aTime,
];

2. Ставь запятую после последнего свойства в объектах и массивах .Они делают git-diff более чистым.

eslint: comma-dangle

git-diff без использования оконечной запятой

const hero = {
     firstName: 'Florence',
-    lastName: 'Nightingale'
+    lastName: 'Nightingale',
+    inventorOf: ['coxcomb chart', 'modern nursing']
};

git diff с использованием оконечной запятой

const hero = {
     firstName: 'Florence',
     lastName: 'Nightingale',
+    inventorOf: ['coxcomb chart', 'modern nursing'],
};

❌ не надо так 👇

const hero = {
  firstName: 'Dana',
  lastName: 'Scully'
};

✅ надо так 👇

const hero = {
  firstName: 'Dana',
  lastName: 'Scully',
};

// Но учтите, что ставить запятую после “rest” элемента нельзя
function createHero(
  firstName,
  lastName,
  inventorOf,
  ...heroArgs
) {
  // does nothing
}

⬆ Вернуться к содержанию

Точка с запятой.

1. Всегда ставьте точку с запятой в конце выражения.

eslint: semi

❌ не надо так 👇

// Выбросит исключение
const luke = {}
const leia = {}
[luke, leia].forEach((jedi) => jedi.father = 'vader')

// Выбросит исключение
const reaction = "No! That’s impossible!"
(async function meanwhileOnTheFalcon() {
  // handle `leia`, `lando`, `chewie`, `r2`, `c3p0`
  // ...
}())

// Вернет `undefined` вместо корректной строки так return находится один в строке и ASI автоматически вставит точку с запятой именно туда!
function foo() {
  return
    'search your feelings, you know it to be foo'
}

✅ надо так 👇

const luke = {};
const leia = {};
[luke, leia].forEach((jedi) => {
  jedi.father = 'vader';
});

const reaction = "No! That’s impossible!";
(async function meanwhileOnTheFalcon() {
  // handle `leia`, `lando`, `chewie`, `r2`, `c3p0`
  // ...
}());

function foo() {
  return 'search your feelings, you know it to be foo';
}

⬆ Вернуться к содержанию

Блоки.

1. Используй фигурные скобки для всех многострочных блоков.

eslint: nonblock-statement-body-position

❌ не надо так 👇

if (test)
  return false;

function foo() { return false; }

✅ надо так 👇

if (test) return false;

function bar() {
  return false;
}

2. При использовании конструкции if .. else располагайте else на одной строке со скобкой закрывающей блок if.

eslint: brace-style

❌ не надо так 👇

if (test) {
  thing1();
  thing2();
}
else {
  thing3();
}

✅ надо так 👇

if (test) {
  thing1();
  thing2();
} else {
  thing3();
}

3. Если в блоке if вы используете return, то последующее использование блока else не требуется. Условия, использующие return в обеих частях if .. else if .. могут быть разбиты на два отдельных условия.

eslint: no-else-return

❌ не надо так 👇

function foo() {
  if (x) {
    return x;
  } else {
    return y;
  }
}

function cats() {
  if (x) {
    return x;
  } else if (y) {
    return y;
  }
}

function dogs() {
  if (x) {
    return x;
  } else {
    if (y) {
      return y;
    }
  }
}

✅ надо так 👇

function foo() {
  if (x) {
    return x;
  }

  return y;
}

function cats() {
  if (x) {
    return x;
  }

  if (y) {
    return y;
  }
}

function dogs(x) {
  if (x) {
    if (z) {
      return y;
    }
  } else {
    return z;
  }
}

4. Не оставляй пустые блоки в рабочем коде .

eslint: no-empty

❌ не надо так 👇

if (foo) {
}

while (foo) {
}

switch(foo) {
}

try {
    doSomething();
} catch(ex) {

} finally {

}

✅ надо так 👇

if (foo) {
    // empty
}

while (foo) {
    /* empty */
}

try {
    doSomething();
} catch (ex) {
    // continue regardless of error
}

try {
    doSomething();
} finally {
    /* continue regardless of error */
}

⬆ Вернуться к содержанию

Объекты.

1. Для объявления объекта использую фигурные скобки.

eslint: no-new-object

❌ не надо так 👇

const item = new Object();

✅ надо так 👇

const item = {};

2. Не дублируй названия ключей в объектах.

eslint: no-dupe-keys

❌ не надо так 👇

var foo = {
    bar: "baz",
    bar: "qux"
};

var foo = {
    "bar": "baz",
    bar: "qux"
};

✅ надо так 👇

var foo = {
    bar: "baz",
    quxx: "qux"
};

3. Не вызывай встроенные методы Object.prototype (такие как hasOwnProperty, propertyIsEnumerable, и isPrototypeOf) у самих объектов. Вместо этого вызывай их с помощью call передавая в него объект.

eslint: no-prototype-builtins

Такие встроенные методы могут быть переопределены в объекте и могут работать не так, как они описаны в Object.prototype

❌ не надо так 👇

object.hasOwnProperty(key);

✅ надо так 👇

Object.prototype.hasOwnProperty.call(object, key);

// еще лучше
const has = Object.prototype.hasOwnProperty;
console.log(has.call(object, key));
/* или*/
import has from 'has';
console.log(has(object, key));

4. Ставь один пробел после двоеточия в массиве, но не ставь пробел до двоеточия.

eslint: key-spacing

❌ не надо так 👇

let obj = { "foo" : 42 };

✅ надо так 👇

let obj = { "foo": 42 };

5. Не форматируй свойства объектов так, чтобы они находились на одной линии.

eslint: key-spacing

❌ не надо так 👇

let obj = {
  foobar: 42,
  bat:    2 * 2
};

✅ надо так 👇

let obj = {
  foobar: 42,
  bat: 2 * 2
};

6. В многострочных объектах после открывающей фигурной скобки свойства необходимо писать с новой строки. Закрывающую фигурную скобку следует также расположить на новой строке. Если объект однострочный, фигурные скобки должны находиться на одной строке.

eslint: object-curly-newline

❌ не надо так 👇

let a = {foo: 1
};
let b = {
  foo: 1};
let c = {foo: 1, bar: 2
};
let d = {
  foo: 1, bar: 2};
let e = {foo: function() {
  dosomething();
}};

let {f
} = obj;
let {
  g} = obj;
let {h, i
} = obj;
let {
  j, k} = obj;
let {l = function() {
  dosomething();
}} = obj;

✅ надо так 👇

let a = {};
let b = {foo: 1};
let c = {
  foo: 1
};
let d = {
  foo: 1, bar: 2
};
let e = {
  foo: 1,
  bar: 2
};
let f = {foo: function() {dosomething();}};
let g = {
  foo: function() {
      dosomething();
  }
};

let {} = obj;
let {h} = obj;
let {i, j} = obj;
let {
  k, l
} = obj;
let {
  m,
  n
} = obj;
let {
  o,
  p
} = obj;
let {q = function() {dosomething();}} = obj;
let {
  r = function() {
      dosomething();
  }
} = obj;

7. В однострочных объектах не ставь пробел после открывающей фигурной скобки и перед закрывающей фигурной скобкой.

eslint: object-curly-spacing

❌ не надо так 👇

let obj = { 'foo': 'bar' };
let obj = {'foo': 'bar' };
let obj = { baz: {'foo': 'qux'}, bar};
let obj = {baz: { 'foo': 'qux'}, bar};
let {x } = y;
import { foo } from 'bar';

✅ надо так 👇

let obj = {'foo': 'bar'};
let obj = {'foo': {'bar': 'baz'}, 'qux': 'quxx'};
let obj = {
  'foo': 'bar'
};
let obj = {'foo': 'bar'
};
let obj = {
  'foo':'bar'};
let obj = {};
let {x} = y;
import {foo} from 'bar';

8. Пиши каждую пару ключ свойство с новой строки.

eslint: object-property-newline

❌ не надо так 👇

const obj0 = { foo: "foo", bar: "bar", baz: "baz" };

const obj1 = {
  foo: "foo", bar: "bar", baz: "baz"
};

const obj2 = {
  foo: "foo", bar: "bar",
  baz: "baz"
};

const obj3 = {
  [process.argv[3] ? "foo" : "bar"]: 0, baz: [
    1,
    2,
    4,
    8
  ]
};

✅ надо так 👇

const obj1 = {
  foo: "foo",
  bar: "bar",
  baz: "baz"
};


const user = process.argv[2];
const obj3 = {
  user,
  [process.argv[3] ? "foo" : "bar"]: 0,
  baz: [
    1,
    2,
    4,
    8
  ]
};

9. Для доступа к свойствам объекта используйте точечную запись.

eslint: dot-notation

❌ не надо так 👇

const luke = {
  jedi: true,
  age: 28,
};

const isJedi = luke['jedi'];

✅ надо так 👇

const isJedi = luke.jedi;

⬆ Вернуться к содержанию

Массивы.

1. Используй квадратные скобки [ ] для объявления массивов.

eslint: no-array-constructor

❌ не надо так 👇

const items = new Array();

✅ надо так 👇

const items = [];

2. Не ставь пробел после открывающей квадратной скобки и перед закрывающей квадратной скобкой.

eslint: array-bracket-spacing

❌ не надо так 👇

const arr = [ 'foo', 'bar' ];
const arr = ['foo', 'bar' ];
const arr = [ ['foo'], 'bar'];
const arr = [[ 'foo' ], 'bar'];
const arr = [ 'foo',
  'bar'
];
const [ x, y ] = z;
const [ x,y ] = z;
const [ x, ...y ] = z;
const [ ,,x, ] = z;

✅ надо так 👇

const arr = [];
const arr = ['foo', 'bar', 'baz'];
const arr = [['foo'], 'bar', 'baz'];
const arr = [
  'foo',
  'bar',
  'baz'
];
const arr = ['foo',
  'bar'
];
const arr = [
  'foo',
  'bar'];

const [x, y] = z;
const [x,y] = z;
const [x, ...y] = z;
const [,,x,] = z;

3. Не оставляй пусты места (“дыры”) в массивах.

eslint: no-sparse-arrays

❌ не надо так 👇

let items = [,];
let colors = [ "red",, "blue" ];

✅ надо так 👇

let items = ["red", "blue"];

// можно ставить завершающую запятую после последнего элемента 
let colors = [ "red", "blue", ];

4. При использовании перебирающих методов массивов в коллбэке всегда используй return для возврата результата коллбэка. Если тебе не нужно использовать результат коллбэка, используй для перебора forEach.

eslint: array-callback-return

❌ не надо так 👇

inbox.filter((msg) => {
  const { subject, author } = msg;
  if (subject === 'Mockingbird') {
    return author === 'Harper Lee';
  } else {
    return false;
  }
});

[[0, 1], [2, 3], [4, 5]].reduce((acc, item, index) => {
  const flatten = acc.concat(item);
});

✅ надо так 👇

[1, 2, 3].map((x) => {
  const y = x + 1;
  return x * y;
});


[1, 2, 3].map((x) => x + 1);

[[0, 1], [2, 3], [4, 5]].reduce((acc, item, index) => {
  const flatten = acc.concat(item);
  return flatten;
});



inbox.filter((msg) => {
  const { subject, author } = msg;
  if (subject === 'Mockingbird') {
    return author === 'Harper Lee';
  }

  return false;
});

⬆ Вернуться к содержанию

Деструктуризация.

1. Используй деструктуризацию объектов и массивов при использовании нескольких свойств объекта или значений массива.

eslint: prefer-destructuring

Это позволит сократить код.

❌ не надо так 👇

function getFullName(user) {
  const firstName = user.firstName;
  const lastName = user.lastName;

  return `${firstName} ${lastName}`;
}

const arr = [1, 2, 3, 4];
const first = arr[0];
const second = arr[1];

✅ надо так 👇

function getFullName(user) {
  const { firstName, lastName } = user;
  return `${firstName} ${lastName}`;
}

// еще лучше
function getFullName({ firstName, lastName }) {
  return `${firstName} ${lastName}`;
}

const arr = [1, 2, 3, 4];
const [first, second] = arr;

⬆ Вернуться к содержанию

Строки.

1. Используй одинарные кавычки ' ' для строк.

eslint: quotes

❌ не надо так 👇

const name = "Capt. Janeway";

✅ надо так 👇

const name = 'Capt. Janeway';

2. Если в строке ты обращаешься к какой-либо переменной через ${variable} , то такая строка должна быть обернута в обратные кавычки .

eslint: no-template-curly-in-string

❌ не надо так 👇

'Hello ${name}!';
'Time: ${12 * 60 * 60 * 1000}';

✅ надо так 👇

`Hello ${name}!`;
`Time: ${12 * 60 * 60 * 1000}`;

templateFunction`Hello ${name}`;

3. Используй шаблонные строки вместо конкатенации.

eslint: prefer-template, template-curly-spacing

❌ не надо так 👇

function sayHi(name) {
  return 'How are you, ' + name + '?';
}

function sayHi(name) {
  return ['How are you, ', name, '?'].join();
}

function sayHi(name) {
  return `How are you, ${ name }?`;
}

✅ надо так 👇

function sayHi(name) {
  return `How are you, ${name}?`;
}

4. Никогда не используй функцию eval().

eslint: no-eval

❌ не надо так 👇

let obj = { x: "foo" },
  key = "x",
  value = eval("obj." + key);

✅ надо так 👇

let obj = { x: "foo" },
  key = "x",
  value = obj[key];

⬆ Вернуться к содержанию

Функции.

1. Используй function expressions (Функциональное Выражение) и присваивай ее переменной вместо function declarations (Объявление Функции).

Лучше: используй стрелочные функции.

eslint: func-style

Это позволит избежать ошибок, если функция будет вызвана до ее объявления.

❌ не надо так 👇

function foo() {
  // ...
}

const foo = function () {
  // ...
};

✅ надо так 👇

const short = function longUniqueMoreDescriptiveLexicalFoo() {
  // ...
};

//лучше
const foo = () => {};

2. Оборачивай в скобки немедленно вызывамые функции IIFE.

eslint: wrap-iife

❌ не надо так 👇

const x = function () { return { y: 1 };}(); 
const x = (function () { return { y: 1 };})();

✅ надо так 👇

const x = (function () { return { y: 1 };}())

3. Не объявляй функцию внутри цикла.

eslint: no-loop-func

❌ не надо так 👇

for (let i=10; i; i--) {
  (function() { return i; })();
}

while(i) {
  const a = function() { return i; };
  a();
}

✅ надо так 👇

const a = function() {};

for (let i=10; i; i--) {
  a();
}

4. Не используй argument для получения аргументов, вместо этого используй rest оператор.

eslint: prefer-rest-params

❌ не надо так 👇

function foo() {
  console.log(arguments);
}

function foo(action) {
  const args = Array.prototype.slice.call(arguments, 1);
  action.apply(null, args);
}

function foo(action) {
  const args = [].slice.call(arguments, 1);
  action.apply(null, args);
}

✅ надо так 👇

function foo(...args) {
    console.log(args);
}

function foo(action, ...args) {
    action.apply(null, args); 
}

5. Не используй new Function для создания функций.

eslint: no-new-func

❌ не надо так 👇

const add = new Function('a', 'b', 'return a + b');

✅ надо так 👇

const subtract = Function('a', 'b', 'return a - b');

6. Всегда ставь один пробел перед () и перед {} в функциях.

eslint: space-before-function-paren, space-before-blocks

❌ не надо так 👇

const f = function(){};
const g = function (){};
const h = function() {};

✅ надо так 👇

const x = function () {};
const y = function a() {};

7. Не переназначай аргументы функции.

eslint: no-param-reassign

❌ не надо так 👇

function foo(bar) {
  bar = 13;
}

function foo(bar) {
  bar++;
}

✅ надо так 👇

function foo(bar) {
  let baz = bar;
}

8. Не дублируй названия аргументов в функциях.

eslint: no-dupe-args

❌ не надо так 👇

function foo(a, b, a) {
  console.log("value of the second a:", a);
}

const bar = function (a, b, a) {
  console.log("value of the second a:", a);
};

✅ надо так 👇

function foo(a, b, c) {
  console.log(a, b, c);
}

const bar = function (a, b, c) {
  console.log(a, b, c);
};

⬆ Вернуться к содержанию

Стрелочные функции.

1. Используйте стрелочные функции для передачи коллбеков.

eslint: prefer-arrow-callback, arrow-spacing

❌ не надо так 👇

[1, 2, 3].map(function (x) {
  const y = x + 1;
  return x * y;
});

✅ надо так 👇

[1, 2, 3].map((x) => {
  const y = x + 1;
  return x * y;
});

2. Если тело функции состоит из одной операции, то можно опустить фигурные скобки и использовать неявный return.

eslint: arrow-body-style

❌ не надо так 👇

[1, 2, 3].map((number) => {
  const nextNumber = number + 1;
  `A string containing the ${nextNumber}.`;
});

✅ надо так 👇

[1, 2, 3].map((number) => `A string containing the ${number + 1}.`);

3. При использовании стрелочной функции не оборачивай аргумент в скобки, если он один.

eslint: arrow-parens

❌ не надо так 👇

(a) => {}

✅ надо так 👇

a => {}
(a, b) => {}

4. Использование стрелочных функций совместно с операторами сравнения может запутать. Оборачивайте такие участки кода в скобки.

eslint: no-confusing-arrow

❌ не надо так 👇

const itemHeight = (item) => item.height <= 256 ? item.largeSize : item.smallSize;
const itemHeight = (item) => item.height >= 256 ? item.largeSize : item.smallSize;

✅ надо так 👇

const itemHeight = (item) => (item.height <= 256 ? item.largeSize : item.smallSize);

const itemHeight = (item) => {
  const { height, largeSize, smallSize } = item;
  return height <= 256 ? largeSize : smallSize;
};

5. Не делай переносы строк сразу после стрелочной функции.

eslint: implicit-arrow-linebreak

❌ не надо так 👇

foo =>
  bar;

foo =>
  (bar);

✅ надо так 👇

foo => bar;
foo => (bar);
foo => (
   bar
)

⬆ Вернуться к содержанию

Классы и конструкторы.

1. Называй функции-конструкторы с большой буквы.

eslint: new-cap

❌ не надо так 👇

const colleague = new person();
const friend = new person.acquaintance();

✅ надо так 👇

const colleague = new Person();
const friend = new person.Acquaintance();

2. Не пиши пустой конструктор в классах. Классы имеют конструктор по умолчанию.

eslint: no-useless-constructor

❌ не надо так 👇

class Jedi {
  constructor() {}

  getName() {
    return this.name;
  }
}


class Rey extends Jedi {
  constructor(...args) {
    super(...args);
  }
}

✅ надо так 👇

class Rey extends Jedi {
  constructor(...args) {
    super(...args);
    this.name = 'Rey';
  }
}

3. Не дублируй методы в классах.

eslint: no-dupe-class-members

❌ не надо так 👇

class Foo {
  bar() { return 1; }
  bar() { return 2; }
}

✅ надо так 👇

class Foo {
  bar() { return 1; }
}

class Foo {
  bar() { return 2; }
}

⬆ Вернуться к содержанию

Модули.

1. Используйте один импорт на модуль, не дублируй импорты.

eslint: no-duplicate-imports

❌ не надо так 👇

import foo from 'foo';
// … другие import-ы … //
import { named1, named2 } from 'foo';

✅ надо так 👇

import foo, { named1, named2 } from 'foo';

// или так:
import foo, {
  named1,
  named2,
} from 'foo';

2. Не экспортируйте мутабельные переменные (которые могут измениться).

eslint: import/no-mutable-exports

❌ не надо так 👇

let foo = 3;
export { foo };

✅ надо так 👇

const foo = 3;
export { foo };

3. Все импорты должны объявляться в начале.

eslint: import/first

❌ не надо так 👇

import foo from 'foo';
foo.init();

import bar from 'bar';

✅ надо так 👇

import foo from 'foo';
import bar from 'bar';

foo.init();

4. Многострочные импорты пиши в столбик.

eslint: object-curly-newline

❌ не надо так 👇

import {longNameA, longNameB, longNameC, longNameD, longNameE} from 'path';

✅ надо так 👇

import {
  longNameA,
  longNameB,
  longNameC,
  longNameD,
  longNameE,
} from 'path';

5. Не указывайте расширения файлов при импорте.

eslint import/extensions

❌ не надо так 👇

import foo from './foo.js';
import bar from './bar.jsx';
import baz from './baz/index.jsx';

✅ надо так 👇

import foo from './foo';
import bar from './bar';
import baz from './baz';

⬆ Вернуться к содержанию

Генераторы.

1. При использовании генераторов ставь один пробел перед * , но не ставь пробел после * .

eslint: generator-star-spacing

❌ не надо так 👇

function * generator() {}
let anonymous = function * () {};
let shorthand = {* generator() {} };

✅ надо так 👇

function *generator() {}
let anonymous = function *() {};
let shorthand = { *generator() {} };

⬆ Вернуться к содержанию

Операторы сравнения.

1. Используй === и !== (строгое сравнение ), вместо == и != (нестрогое сравнение).

eslint: eqeqeq

Это считается хорошей практикой, т.к. ты избегаешь неявного преобразования типов данных.

❌ не надо так 👇

a == b 
foo == true
bananas != 1
value == undefined

✅ надо так 👇

typeof foo === 'undefined'
'hello' !== 'world'
0 === 0
true === true
foo === null

Исключения:

сравнение двух литеральных значений:
вызов typeof;
сравнение с nullю

❌ не надо так 👇

a == b
foo == true
bananas != 1
value == undefined

✅ надо так 👇

typeof foo == 'undefined'
'hello' != 'world'
0 == 0
true == true
foo == null

2. Используйте фигурные скобки для создания блоков в case и default в конструкции switch...case , которые содержат лексические объявления (например, let, const, function и class).

eslint: no-case-declarations

Лексические объявления видны во всем блоке switch, но инициализируются только при срабатывании определенного case. Чтобы убедиться, что лексическое объявление применяется только к текущему case, необходимо использовать скобки.

❌ не надо так 👇

switch (foo) {
  case 1:
    let x = 1;
    break;
  case 2:
    const y = 2;
    break;
  case 3:
    function f() {
      // ...
    }
    break;
  default:
    class C {}
}

✅ надо так 👇

switch (foo) {
  case 1: {
    let x = 1;
    break;
  }
  case 2: {
    const y = 2;
    break;
  }
  case 3: {
    function f() {
      // ...
    }
    break;
  }
  case 4:
    bar();
    break;
  default: {
    class C {}
  }
}

3. Тернарные операторы не должны быть вложены.

eslint: no-nested-ternary

❌ не надо так 👇

const foo = maybe1 > maybe2
  ? "bar"
  : value1 > value2 ? "baz" : null;

const maybeNull = value1 > value2 ? 'baz' : null;

✅ надо так 👇

const foo = maybe1 > maybe2
  ? 'bar'
  : maybeNull;

//лучше так
const foo = maybe1 > maybe2 ? 'bar' : maybeNull;

4. Избегай ненужный тернарных операторов.

eslint: no-unneeded-ternary

❌ не надо так 👇

const foo = a ? a : b;
const bar = c ? true : false;
const baz = c ? false : true;

✅ надо так 👇

const foo = a || b;
const bar = !!c;
const baz = !c;

5. При смешивании операторов заключай их в скобки. Единственным исключением являются стандартные арифметические операторы: +, - и **, так как их приоритет широко понят. Рекомендуется заключать в скобки / и *, потому что их приоритет может быть неоднозначным, когда они смешаны.

eslint: no-mixed-operators

Это позволит избежать ошибок. Также код станет более читабельным

❌ не надо так 👇

const foo = a && b < 0 || c > 0 || d + 1 === 0;
const bar = a ** b - 5 % d;

if (a || b && c) {
  return d;
}

const bar = a + b / c * d;

✅ надо так 👇

const foo = (a && b < 0) || c > 0 || (d + 1 === 0);

const bar = a ** b - (5 % d);

if (a || (b && c)) {
  return d;
}

const bar = a + (b / c) * d;

6. Не повторяй условия в конструкции switch case.

eslint: no-duplicate-case

❌ не надо так 👇

let a = 1,
  one = 1;

switch (a) {
  case 1:
    break;
  case 2:
    break;
  case 1:         // дубликат
     break;
  default:
    break;
}

✅ надо так 👇

let a = 1,
  one = 1;
	
switch (a) {
  case 1:
    break;
  case 2:
    break;
  case 3:
    break;
  default:
    break;
}

7. Не используй в if, for, while, do...while или в тернарных выражениях в условиях постоянные выражения (литералы).

eslint: no-constant-condition

❌ не надо так 👇

if (false) {
  doSomethingUnfinished();
}

do {
  doSomethingForever();
} while (x = -1);

let result = 0 ? a : b;

✅ надо так 👇

if (x === 0) {
  doSomething();
}

while (typeof x === "undefined") {
  doSomething();
}

do {
  doSomething();
} while (x);
	
let result = x !== 0 ? a : b;

8. В условных выражениях не используй оператор присваивания = в условии.

eslint: no-cond-assign

Если тебе все-таки необходимо сделать присваивание в условии, то оберни это присваивание в круглые скобки

❌ не надо так 👇

let x;
if (x = 0) {
    var b = 1;
}

✅ надо так 👇

let x;
if (x === 0) {
 	   var b = 1;
}

9. В таких конструкция как if в условии, где результат выражения уже приведен к булевому типу (true/false) не приводи этот результат к булевому типу повторно с помощью двойного отрицания (!!) или Boolean().

eslint: no-extra-boolean-cast

❌ не надо так 👇

let foo = !!!bar;

let foo = !!bar ? baz : bat;

let foo = Boolean(!!bar);

let foo = new Boolean(!!bar);

if (!!foo) {
    // ...
}

if (Boolean(foo)) {
    // ...
}

while (!!foo) {
    // ...
}

do {
    // ...
} while (Boolean(foo));

for (; !!foo; ) {
    // ...
}

✅ надо так 👇

let foo = !!bar;
let foo = Boolean(bar);

function foo() {
    return !!bar;
}

let foo = bar ? !!baz : !!bat;

⬆ Вернуться к содержанию

Комментарии.

1. В комментариях после // или /* должен быть пробел.

eslint: spaced-comment

❌ не надо так 👇

//is current tab
const active = true;

/**
 *make() returns a new element
 *based on the passed-in tag name
 */
function make(tag) {

  // ...

  return element;
}

✅ надо так 👇

// is current tab
const active = true;


/**
 * make() returns a new element
 * based on the passed-in tag name
 */
function make(tag) {

  // ...

  return element;
}

⬆ Вернуться к содержанию

Пробелы.

1. Используйте отступ в 2 пробела. Таб можно настроить на 2 пробела.

eslint: indent

❌ не надо так 👇

function foo() {
∙∙∙∙let name;
}


function bar() {
∙let name;
}

✅ надо так 👇

function baz() {
∙∙let name;
}

2. Ставь пробел перед и после ключевого слова. Если ключевое слово начинается с начала строки, пробел не нужен. Пробел не нужен после имени функции перед списком аргументов.

eslint: keyword-spacing

❌ не надо так 👇

if(isJedi) {
  fight ();
}

function fight () {
  console.log ('Swooosh!');
}

✅ надо так 👇

if (isJedi) {
  fight();
}

function fight() {
  console.log('Swooosh!');
}

3. Ставь по одному пробелу вокруг операторов.

eslint: space-infix-ops

❌ не надо так 👇

const x=y+5;

✅ надо так 👇

const x = y + 5;

4. Не оставляйте в блоках пустые строки.

eslint: padded-blocks

❌ не надо так 👇

function bar() {

  console.log(foo);

}


if (baz) {

  console.log(qux);
} else {
  console.log(foo);

}


class Foo {

  constructor(bar) {
    this.bar = bar;
  }
}

✅ надо так 👇

function bar() {
  console.log(foo);
}


if (baz) {
  console.log(qux);
} else {
  console.log(foo);
}

5. Не используйте несколько пустых строк для разделения кода.

eslint: no-multiple-empty-lines

❌ не надо так 👇

class Person {
  constructor(fullName, email, birthday) {
    this.fullName = fullName;


    this.email = email;


    this.setAge(birthday);
  }


  setAge(birthday) {
    const today = new Date();


    const age = this.getAge(today, birthday);


    this.age = age;
  }
}

✅ надо так 👇

class Person {
  constructor(fullName, email, birthday) {
    this.fullName = fullName;
    this.email = email;
    this.setAge(birthday);
  }

  setAge(birthday) {
    const today = new Date();
    const age = getAge(today, birthday);
    this.age = age;
  }
}

6. Не ставь пробел после открывающей круглой скобки и перед закрывающей круглой скобкой.

eslint: space-in-parens

❌ не надо так 👇

function bar( foo ) {
  return foo;
}

✅ надо так 👇

function bar(foo) {
  return foo;
}

7. Избегайте использования строк кода длинной более 100 символов (включая пробелы).

eslint: max-len

❌ не надо так 👇

const foo = jsonData && jsonData.foo && jsonData.foo.bar && jsonData.foo.bar.baz && jsonData.foo.bar.baz.quux && jsonData.foo.bar.baz.quux.xyzzy;

$.ajax({ method: 'POST', url: 'https://airbnb.com/', data: { name: 'John' } }).done(() => console.log('Congratulations!')).fail(() => console.log('You have failed this city.'));

✅ надо так 👇

const foo = jsonData
  && jsonData.foo
  && jsonData.foo.bar
  && jsonData.foo.bar.baz
  && jsonData.foo.bar.baz.quux
  && jsonData.foo.bar.baz.quux.xyzzy;

$.ajax({
  method: 'POST',
  url: 'https://airbnb.com/',
  data: { name: 'John' },
})
  .done(() => console.log('Congratulations!'))
  .fail(() => console.log('You have failed this city.'));

8. Ставь один пробел после открывающей фигурной скобки и перед закрывающей в теле функций, условий если они написаны в строку.

eslint: block-spacing

❌ не надо так 👇

function foo() {return true;}
if (foo) { bar = 0;}

✅ надо так 👇

function foo() { return true; }
if (foo) { bar = 0; }

9. Не ставь пробел перед запятой, ставь пробел после запятой.

eslint: comma-spacing

❌ не надо так 👇

let foo = 1,bar = 2;
let arr = [1 , 2];

✅ надо так 👇

let foo = 1, bar = 2;
let arr = [1, 2];

10. При вызове функции не ставь пробел перед открывающей круглой скобкой.

eslint: func-call-spacing

❌ не надо так 👇

func ();

func
();

✅ надо так 👇

func();

11. Не ставь пробелы, табы в конце строк.

eslint: no-trailing-spaces

❌ не надо так 👇

let foo = 0;//•••••
let baz = 5;//••
//•••••

✅ надо так 👇

let foo = 0;
let baz = 5;

⬆ Вернуться к содержанию

Преобразование и приведение типов.

1. Не преобразовывай типы данных с помощью оператора new в String, Number и Boolean.

eslint: no-new-wrappers

❌ не надо так 👇

let stringObject = new String("Hello world");
let numberObject = new Number(33);
let booleanObject = new Boolean(false);

✅ надо так 👇

let text = String(someValue);
let num = Number(someValue);

⬆ Вернуться к содержанию

Методы отладки кода.

1. Не оставляй console.

eslint: no-console

Методы console хорошо подходят для отладки кода, однако их не должно быть в финальной версии кода.

❌ не надо так 👇

console.log("Log a debug level message.");
console.warn("Log a warn level message.");
console.error("Log an error level message.");

✅ надо так 👇

// Кастомный console
Console.log("Hello world!");

2. Рабочий код не должен содержать debugger.

eslint: no-debugger

❌ не надо так 👇

function isTruthy(x) {
    debugger;
    return Boolean(x);
}

✅ надо так 👇

function isTruthy(x) {
    return Boolean(x); // set a breakpoint at this line
}

⬆ Вернуться к содержанию

Регулярные выражения.

1. Не используй управляющие символы(перенос строки, табуляция и другие) в регулярных выражениях.

eslint: no-control-regex

❌ не надо так 👇

let pattern1 = /\x1f/;
let pattern2 = new RegExp("\x1f");

✅ надо так 👇

let pattern1 = /\x20/;
let pattern2 = new RegExp("\x20");

2. При использовании квадратных скобок [ ] в регулярных выражениях, они не должны быть пустыми.

eslint no-empty-character-class

❌ не надо так 👇

/^abc[]/.test("abcdefg"); // false
"abcdefg".match(/^abc[]/); // null

✅ надо так 👇

/^abc/.test("abcdefg"); // true
"abcdefg".match(/^abc/); // ["abc"]

/^abc[a-z]/.test("abcdefg"); // true
"abcdefg".match(/^abc[a-z]/); // ["abcd"]

⬆ Вернуться к содержанию

Name		Name	Last commit message	Last commit date
.eslintrc		.eslintrc
.gitignore		.gitignore
README.md		README.md

Latest commit

History

Folders and files

Repository files navigation

WebHero JavaScript Style Guide

Содержание

Соглашение об именовании.

1. Избегайте однобуквенных названий.

2. Используйте camelCase для названий переменных, объектов и функций.

3. Используйте PascalCase для именования конструкторов или классов.

4. Не используйте нижнее подчеркивание в начале или конце названий.

Переменные.

1. Всегда используйте let или const для объявления переменных.

2. Не нужно неинициализированной переменной задавать значение undefined, это значение присваивается автоматически.

3. Используйте let и const для объявления каждой переменной.

4. Не используйте множественное присваивание. Такие конструкции создают неявные глобальные переменные.

5. Не переноси строку после оператора присваивания.

6. Не объявляй неиспользуемые переменные.

Объявление переменных.

1. Если ты не переназначаешь переменную, то используй const для ее объявления. И наоборот.

2. Не используй var. Используй let и const.

Запятые.

1. Запятые не должны быть в начале строки.

2. Ставь запятую после последнего свойства в объектах и массивах .Они делают git-diff более чистым.

Точка с запятой.

1. Всегда ставьте точку с запятой в конце выражения.

Блоки.

1. Используй фигурные скобки для всех многострочных блоков.

2. При использовании конструкции if .. else располагайте else на одной строке со скобкой закрывающей блок if.

4. Не оставляй пустые блоки в рабочем коде .

Объекты.

1. Для объявления объекта использую фигурные скобки.

2. Не дублируй названия ключей в объектах.

3. Не вызывай встроенные методы Object.prototype (такие как hasOwnProperty, propertyIsEnumerable, и isPrototypeOf) у самих объектов. Вместо этого вызывай их с помощью call передавая в него объект.

4. Ставь один пробел после двоеточия в массиве, но не ставь пробел до двоеточия.

5. Не форматируй свойства объектов так, чтобы они находились на одной линии.

7. В однострочных объектах не ставь пробел после открывающей фигурной скобки и перед закрывающей фигурной скобкой.

8. Пиши каждую пару ключ свойство с новой строки.

9. Для доступа к свойствам объекта используйте точечную запись.

Массивы.

1. Используй квадратные скобки [ ] для объявления массивов.

2. Не ставь пробел после открывающей квадратной скобки и перед закрывающей квадратной скобкой.

3. Не оставляй пусты места (“дыры”) в массивах.

Деструктуризация.

1. Используй деструктуризацию объектов и массивов при использовании нескольких свойств объекта или значений массива.

Строки.

1. Используй одинарные кавычки ' ' для строк.

2. Если в строке ты обращаешься к какой-либо переменной через ${variable} , то такая строка должна быть обернута в обратные кавычки .

3. Используй шаблонные строки вместо конкатенации.

4. Никогда не используй функцию eval().

Функции.

1. Используй function expressions (Функциональное Выражение) и присваивай ее переменной вместо function declarations (Объявление Функции).

2. Оборачивай в скобки немедленно вызывамые функции IIFE.

3. Не объявляй функцию внутри цикла.

4. Не используй argument для получения аргументов, вместо этого используй rest оператор.

5. Не используй new Function для создания функций.

6. Всегда ставь один пробел перед () и перед {} в функциях.

7. Не переназначай аргументы функции.

8. Не дублируй названия аргументов в функциях.

Стрелочные функции.

1. Используйте стрелочные функции для передачи коллбеков.

2. Если тело функции состоит из одной операции, то можно опустить фигурные скобки и использовать неявный return.

3. При использовании стрелочной функции не оборачивай аргумент в скобки, если он один.

4. Использование стрелочных функций совместно с операторами сравнения может запутать. Оборачивайте такие участки кода в скобки.

5. Не делай переносы строк сразу после стрелочной функции.

Классы и конструкторы.

1. Называй функции-конструкторы с большой буквы.

2. Не пиши пустой конструктор в классах. Классы имеют конструктор по умолчанию.

3. Не дублируй методы в классах.

Модули.

1. Используйте один импорт на модуль, не дублируй импорты.

2. Не экспортируйте мутабельные переменные (которые могут измениться).

3. Все импорты должны объявляться в начале.

4. Многострочные импорты пиши в столбик.

5. Не указывайте расширения файлов при импорте.

Генераторы.

1. При использовании генераторов ставь один пробел перед * , но не ставь пробел после * .

Операторы сравнения.

1. Используй === и !== (строгое сравнение ), вместо == и != (нестрогое сравнение).

2. Используйте фигурные скобки для создания блоков в case и default в конструкции switch...case , которые содержат лексические объявления (например, let, const, function и class).