Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 У кода есть множество разных характеристик, по которым можно судить, насколько хорошо он написан. Среди них есть одна базовая, с которой начинают все разработчики - это стиль написания. Сравните два варианта оформления кода:

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

3 Универсальным решением этой задачи сейчас стала утилитаprettier, которая берет весь код в файле и полностью переформатирует его так как нужно в соответствии со своими правилами. Однако этого недостаточно и можно пойти гораздо дальше. Prettier форматирует код, но не вникает в его семантику (назначение). Например, в JavaScript хорошим тоном считается использовать === вместо ==. Так значительно безопаснее и так мы защищаемся от случайных ошибок преобразований типов. Prettier не может автоматически заменять == на === потому что это может сломать код.

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

5 В JavaScript-мире особой популярностью пользуется линтер<a>eslint</a>. Количество правил, по которым он проверяет код, исчисляется<a>сотнями</a>. Посмотрите на этот небольшой участок кода:

6 С точки зрения форматирования здесь все хорошо, а что скажет линтер? Eslint выдаст три предупреждения:

7 <ul><li>Identifier name 'a' is too short<a>id-length</a>. Слишком короткое имя.</li>

8 <li>Unary operator '++' used<a>no-plusplus</a>. Используется инкремент, что опасно.</li>

9 <li>'a' is assigned a value but never used<a>no-unused-vars</a>. Переменная не используется, а значит она либо не нужна, либо в коде ошибка.</li>

10 </ul>Ссылки выше ведут на страницы конкретных правил, где подробно объясняется, почему так код писать не нужно и как его писать нужно. Изучать правилаeslintочень полезно, они прививают хорошие практики написания кода.

11 <h2>Установка и настройка Eslint</h2>

12 Eslint устанавливается какdevзависимость прямо в проект:

13 После установки его надо настроить, иначе он не будет выполнять проверки. Для этого нужно запустить команду инициализации, которая использует дополнительный пакет@eslint/create-config. Во время настройкиeslintзадаст много разных вопросов. Мы установили определенные версии пакетов, при которых настройка будет выглядеть так, как показана ниже. Если вы установите другие версии пакетов, то варианты ответов могут отличаться. Но вы всегда можете отредактировать файл настройки вручную.

14 npx eslint --init ✔ What do you want to lint? · javascript ✔ How would you like to use ESLint? · problems ✔ What type of modules does your project use? · esm ✔ Which framework does your project use? · none ✔ Does your project use TypeScript? · no ✔ Where does your code run? · node The config that you've selected requires the following dependencies: eslint, @eslint/js, globals ✔ Would you like to install them now? · Yes ✔ Which package manager do you want to use? · npm ☕️Installing...

15 Выбор пунктов Browser/Node выполняется по клавише пробела, а подтверждение по Enter

16 В результате настройкиeslintсоздаст файл, который нужно добавить в репозиторий:

17 Сам по себеeslintне использует какие-то стилистические правила. Чтобы это исправить нужно добавить стили кодирования. Мы будем использовать<a>ESLint Stylistic</a>. В первую очередь нужно установить пакет:

18 После установки нужно добавить правила стилей в файле настроекeslint. Итоговый файл выглядит так:

19 И последний шаг - запускeslint:

20 Если ошибок нет, тоeslintмолча завершит свою работу. Если ошибки есть - выведет список с указанием того, что нужно поправить.

21 Файл настройки можно изменять, указывать дополнительно различные правила проверки, отключать какие-то правила по необходимости. Правил очень много, их изучение выходит за рамки базового знакомства с линтером, но уже стандартных настроек достаточно для использования. Полностью настроенный конфиг<a>можно взять тут</a>.

22 Кроме нахождения ошибокeslintможет их исправлять. По крайней мере те ошибки, которые могут быть исправлены с гарантией сохранения работоспособности. Для этого нужно добавить флаг --fix в запуск: