Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 Руководство для настройки автоматического форматирования кода и проверки синтаксиса языка JavaScript. Рассказываем про утилиты Eslint и Prettier.

2 <h2>Содержание</h2>

3 <ul><li><a>Введение</a></li>

4 <li><a>Какие проблемы решает eslint?</a></li>

5 <li><a>Для чего тогда нам нужен Prettier?</a></li>

6 <li><a>Перейдем к настройке</a></li>

7 <li><a>Для автоматического форматирования нам нужно</a></li>

8 <li><a>Заключение</a></li>

9 </ul><h2>Введение</h2>

10 В этой статье мы рассмотрим основные правила линтера и способы его настройки под проект.

11 Какой цели я хочу достигнуть в результате?

12 Иметь возможность форматировать свой код быстро, используя автоматизацию и лучшие практики программирования.

13 <h2>Какие проблемы решает eslint?</h2>

14 Линтер- это статический анализатор для языка программирования. Он сообщает о потенциально опасных выражениях в коде, которые могут привести к аварийному завершению программы. Также линтер может сообщить об устаревших участках кода, синтаксических ошибках и неиспользованных переменных. Всего существует около 300 правил, которые можно включить/выключить по желанию.

15 <h2>Для чего тогда нам нужен Prettier?</h2>

16 На большом проекте, как правило, работает несколько программистов. У каждого из них может быть свое мнение относительно качества кода и размера отступов в строке. Eslint может форматировать текст, но требует дополнительной кропотливой настройки. Облегчить задачу призвана утилита Prettier. У нее открытый исходный код и имеется хорошая поддержка сообщества. Большая часть правил оформления уже задана по умолчанию, но у пакета есть гибкая система настройки и удобный API, позволяющий описывать свои правила в конфигурационном файле формата .json/.yml. Это значит, что мы можем написать файл с едиными настройками для всей команды.

17 <h2>Перейдем к настройке</h2>

18 Начну с того, что здесь описана настройка линтера на примере VScode. Для других IDE будет разница только в поиске нужных расширений. Итак:

19 <ol><li>Откройте Vscode и найдите в левой боковой панели пункт Extensions (ctrl/cmd+shift+X)</li>

20 <li>В строке поиска введитеESLintи установите пакет от Dirk Baeumer.</li>

21 <li>Проделайте аналогичную операцию дляPrettier - Code formatter. (может потребоваться перезагрузка редактора после установки).</li>

22 <li>Дальше нам нужно установить сам линтер с помощью команды npm install eslint --save-dev</li>

23 <li>После установки линтера мы можем воспользоваться стандартным скриптом для базовой настройки конфигурационного файла. Для этого пишем в консоли следующую команду: eslint --init</li>

24 <li>Скрипт попросит ответить нас на вопросы о текущем проекте и выставит соответствующие правила:</li>

25 </ol>Можете поэкспериментировать с настройками, чтобы понять, какой пункт меню за что отвечает. Итогом настройки будет являться сформированный файл.eslintrc.json. Вы можете создать файл с настройками самостоятельно и поместить его на один уровень сpackage.json.

26 Для того, чтобы наша проверка работала, нам нужно установить необходимые пакеты:

27 Если вы создали файл конфигурации с помощьюeslint --init, скрипт предложит вам автоматически установить пакет для работы с React. Если вы хотите сделать это самостоятельно - пропишите:

28 Пример настройки файлов для работы ESLint:

29 .eslintrc.json

30 .prettierrc.json

31 *Правила оформления кода. Полный список настроек вы можете найти<a>здесь</a>.

32 .eslintignore

33 Чтобы исключить из проверки директории/файлы указываем их в виде списка

34 Основная настройка закончена. Теперь нам нужно, чтобы при сохранении файла наша IDE форматировала код и исправляла ошибки. Стоит уточнить, что ESLint умеет исправлять не всё и иногда вам придется править конфликты вручную.

35 <h2>Для автоматического форматирования нам нужно</h2>

36 <ul><li>Зайти в настройки -Ctrl/Cmd +Shift + P</li>

37 <li>В строку поиска вписать - settings</li>

38 <li>Выбрать пункт -Preferences: Open Settings (JSON)В файлеsettings.jsonдобавляем:</li>

39 </ul>Tip.Если у вас возникли проблемы во время работы с ESLint, перейдите во вкладку Output и посмотрите вывод об ошибках.

40 TROUBLESHOOTING

41 <ol><li>Q:Что делать, если при работе на Windows возникает следующая ошибка? [eslint] Delete 'cr' [prettier/prettier].

42 A:Чтобы её решить, нужно немного поменять настройки в файле .eslintrc.json

43 </li>

44 <li>Q:Не работают правила линтера или форматирование отличается от ожидаемого.

45 A:Возможно, это следствие наличия в проекте других конфигурационных файлов. Они имеют разный приоритет исполнения. Например, файл .editorconfig имеет высший приоритет, чем .eslintrc., поэтому линтер будет выставлять настройки с его помощью.

46 </li>

47 <li>Q:Выставляются двойные скобки, вместо одинарных.

48 A:Чаще всего это происходит из-за конфликта настроек линтера и prettier. Некоторые пресеты (extendsв файле.eslintrc.json)содержат в себе правила настройки форматирования скобок. Последний указанный пресет переписывает правила предыдущих. Убедитесь в том, что "prettier" находится последним в списке extends.

49 </li>

50 </ol><h2>Заключение</h2>

51 Часто в проектах могут использовать популярный конфиг отAirbnb. Он содержит больше правил и может вас запутать, поэтому рекомендую к нему обращаться после того, как усвоите базовые принципы работы линтера. Спасибо, что дочитали до конца. Работать с кодом теперь будет более приятно и гораздо быстрее.