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.
Полезное
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.
Полезное
Ваше упражнение проверяется по этим тестам
// @ts-check
import { expect, test, vi } from "vitest";
test("linting", async () => {
const consoleLogSpy = vi.spyOn(console, "log");
await import("./index.js");
const firstArg = consoleLogSpy.mock.calls.join("\n");
expect(firstArg).toBe("4");
});Решение учителя откроется через:
20:00
