JavaScript: Линтер

Когда разные разработчики пишут код в разном стиле, код становится трудночитаемым: где-то пробел лишний, где-то отступы разные. Чтобы избежать разногласий, программисты договорились соблюдать единый стиль кодирования. Этот свод правил описывает, как должен выглядеть код: расстановку пробелов, оформление функций и названия переменных.

Единый стиль означает код, одинаково понятный всем членам команды, независимо от того, кто его написал. Это экономит время, снижает количество ошибок и упрощает совместную работу.

Стандарты кодирования

В экосистеме JavaScript нет одного официального стандарта, но существуют широко принятые руководства, например от AirBnb. Они подробно описывают, как оформлять код: какие отступы использовать, как расставлять пробелы, какой длины должны быть строки, как называть переменные и многое другое.

Эти правила знают и используют JavaScript-разработчики. Новичкам полезно время от времени заглядывать в них и вырабатывать правильные привычки с самого начала. Однако запоминать всё сразу нет необходимости.

Линтеры: автоматическая проверка кода

Запоминать все правила вручную не нужно. Существуют специальные программы, которые делают это за вас. Они называются линтеры.

Линтер представляет собой инструмент, который анализирует ваш код и сообщает о нарушениях стандартов. Он помогает:

  • Находить подозрительные места, например переменную, которую объявили и забыли использовать
  • Соблюдать правила, принятые в команде
  • Писать читаемые и красивые выражения

Современный линтер: oxlint

На сегодняшний день одним из самых быстрых линтеров для JavaScript является oxlint. Он написан на Rust, поэтому проверяет даже большие проекты за доли секунды.

Рассмотрим пример:

const result = 1 + 3;

Значение посчитали и записали в переменную, а дальше нигде не использовали. Программа работает, но такая строчка почти всегда означает ошибку или недописанный код. Линтер об этом сообщит:

Код                     Линтер          Результат
┌───────────────────┐   ┌────────┐   ┌──────────────────────────┐
│ const result      │ → │ oxlint │ → │ eslint(no-unused-vars):  │
│   = 1 + 3;        │   │        │   │ 'result' is never used   │
└───────────────────┘   └────────┘   └──────────────────────────┘

Оформление проверяет форматтер

Расстановка пробелов и отступов это отдельная задача, и линтер её не решает. Для неё есть форматтер, у oxlint это oxfmt. Вот такой код:

const result = 1+ 3;

Форматтер сам превратит в такой:

const result = 1 + 3;

Разница между инструментами в этом. Форматтер правит оформление молча и автоматически, а линтер сообщает о проблемах, которые придётся разобрать самому.

Расставлять пробелы руками вам почти никогда не придётся. Но научиться замечать их глазами стоит: так вы быстрее запомните, как выглядит аккуратный код, и начнёте писать его сразу.

Правила и их смысл

Каждое сообщение линтера связано с конкретным правилом. Одни правила запрещают неиспользуемые переменные, другие требуют сравнивать значения через ===, третьи ограничивают длину функции. Когда вы только начинаете, такие мелочи могут казаться неважными. Но со временем становится понятно, что именно они формируют единый читаемый стиль.

С полным списком правил oxlint можно ознакомиться в официальной документации.

Использование линтера в своих проектах

Когда вы начнёте писать собственные проекты за пределами учебной платформы, линтер будет незаменимым помощником. Его можно настроить в любом редакторе кода, запустить в терминале или подключить к сборке проекта. Линтер показывает ошибки и умеет исправлять их автоматически.

Задание

Вы получили код от коллеги — он работает правильно, но нарушает стандарт оформления. Исправьте пробелы вокруг операторов, не меняя логику:

console.log(    (5  **2)-(3*  7));

Результат должен остаться 4.

Полезное

Команда проекта находится в телеграм-сообществе. Там можно задать любой вопрос и повлиять на проект

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются