Ищете отличного (только удаленного) React Dev? Или просто хотите поболтать? Посетите мой профиль в LinkedIn и поздоровайтесь! 😃

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

Естественно, между ESLint, Prettier и TypeScript есть значительное совпадение, и если вы не настроите его должным образом, то скоро будете в бычьем трансе смотреть на «Великую стену ошибок».

В этой статье мы рассмотрим установку и настройку, но не будем делать это пошагово. Я просто нахожу этот путь утомительным. Вы не ищете, как убедиться, что каждая атомарная часть работает для конкретной ситуации — вы просто хотите, чтобы все это работало вместе. Таким образом, будет много копируемых/вставляемых файлов конфигурации. Это просто проще.

npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-react husky lint-staged prettier typescript

Вы заметите, что я также добавляю husky и lint-staged. Husky следит за тем, чтобы ESLint проверял все проходы, прежде чем он позволит вам сделать фиксацию, а Lint-Staged оптимизирует проверки ESLint, чтобы анализировались только те файлы, которые были изменены. Lint-Staged действительно хорош в больших проектах, где есть десятки или сотни тысяч строк кода — проверять их все каждый раз, когда вы делаете коммит, расточительно и отнимает много времени.

Вот ссылка на очень простой проект кодирования, в котором настроены все пакеты: https://github.com/bengrunfeld/ollie-form

Конфигурация ESLint

Вот мой файл .eslintrc.js. Причина, по которой я выбрал расширение файла .js, заключается в том, что таким образом вы можете иметь комментарии в своем файле, что действительно полезно. Можно ожидать, что мы помним, что делает большинство команд в наших основных языках программирования, но запоминать наизусть каждый параметр конфигурации и его альтернативы — это безумие и безумие. Комментарии в конфигурационных файлах, пожалуйста.

Конфигурация TypeScript

Это файл tsconfig.json.

Более красивая конфигурация

Вот файл .prettierrc.

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "arrowParens": "avoid"
}

Конфигурация Husky и Lint-Staged в Package.json

Я храню всю остальную конфигурацию проекта в этом примере файла package.json, потому что это сбивает с толку, если там только половина, и, честно говоря, мне нечего скрывать.

Главное: посмотрите, как вызывается ESLint в разделе scripts, а также посмотрите, как настроены Husky и Lint-Staged.

Вывод

И вот оно! Вместо того, чтобы сортировать бесконечные статьи и посты о том, как настроить все это, чтобы они хорошо играли вместе (что мне и пришлось сделать), вместо этого у вас есть все это в одном удобном месте.

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

Вам понравилась эта статья? Если это так, пожалуйста, нажмите кнопку аплодисментов, чтобы потенциальные работодатели думали, что я на самом деле умный… 😂

Удачного кодирования!