Стиль кода и линтеры

Интерпретатору всё равно, как выглядит ваш код: он одинаково выполнит и аккуратную программу, и кашу из символов. Но у кода есть второй получатель — человек. Программу пишут один раз, а читают десятки раз, и почти всегда читает не автор: коллега, ревьюер, вы сами полгода спустя. Стиль кода — это вежливость к читателю.

// Работает, но читать тяжело:
const a=2,b=3;console.log(a+b);

// То же самое, но глазам легче:
const width = 2;
const height = 3;
console.log(width + height);

В команде важен не столько конкретный стиль, сколько его единственность. Когда весь проект оформлен одинаково, глаз перестаёт спотыкаться о запятые и отступы — и видит сразу суть. Именно поэтому споры «два пробела или четыре» в зрелых командах давно закрыты: выбрали один вариант и забыли.

В мире JavaScript сложился набор привычек. Отступ — 2 пробела на уровень вложенности (в Python любят четыре, в JS прижились два). Вокруг операторов — пробелы: a + b, а не a+b. После запятой — тоже пробел.

const items = [10, 20, 30];
let total = 0;
for (const item of items) {
  total += item;
}
console.log(total);

Фигурные скобки ставят в «египетском» стиле: открывающая — на той же строке, что и if или for, закрывающая — на своей собственной. Имена выбирают по смыслу: переменная — существительное (userAge, а не x), функция — глагол (sendMessage, calcTotal). Если имя честно описывает содержимое, половина комментариев становится не нужна.

Отдельный грех — «магические числа»: голые 3600 или 0.2 посреди кода. Сегодня вы помните, что это, а через месяц число превращается в загадку. Лекарство простое — константа с говорящим именем.

const SECONDS_IN_HOUR = 3600; // имя объясняет, что это за число

const hours = 2;
console.log(hours * SECONDS_IN_HOUR);

Держать все соглашения в голове не нужно — их помнит Prettier. Это программа, которая берёт ваш файл и переписывает его оформление по единым правилам: расставляет отступы и пробелы, переносит длинные строки, приводит кавычки к одному виду. Логику она не трогает вовсе.

// Написано второпях — но работает:
const double=(n)=>{return n*2}
console.log(double(21));

Обычно Prettier подключают к редактору так, чтобы он срабатывал при каждом сохранении файла. Вы пишете как получится — нажали Ctrl+S, и код причёсан. Важная черта Prettier: он почти не настраивается, и это осознанное решение. Не о чем спорить — значит, споров нет.

// После Prettier тот же код выглядит так:
const double = (n) => {
  return n * 2;
};
console.log(double(21));

Prettier делает код красивым, но красиво оформленная ошибка остаётся ошибкой. За смыслом следит линтер — ESLint. Он читает программу, не запуская её, и подсвечивает подозрительные места: переменная объявлена, но нигде не используется; сравнение через нестрогое ==; ветка кода, до которой невозможно дойти.

// ESLint нашёл бы здесь два замечания:
let count = 10; // «count объявлена, но не используется»
console.log("1" == 1);
console.log("1" === 1);

Prettier — про красоту, ESLint — про ошибки

Соберём всё вместе. Вот функция, которая работает, но нарушает сразу все соглашения:

function f(a,b){var x=a*b*0.2;return x}
console.log(f(500, 2));

Что здесь не так: имя f не говорит ничего, var вместо const, число 0.2 — магическое (налог? скидка? комиссия?), пробелов и отступов нет. А теперь та же логика, оформленная по правилам:

const TAX_RATE = 0.2;

function calcTax(price, quantity) {
  return price * quantity * TAX_RATE;
}
console.log(calcTax(500, 2));

Логика не изменилась ни на символ — изменилось только время, которое нужно читателю, чтобы её понять. В первом варианте это полминуты и три вопроса, во втором — один взгляд.