Подключение единых правил eslint для проекта React + Typescript. Инструкция

Подключение Правил ESLint для React

ESLint — это инструмент статического анализа кода, который помогает обнаруживать ошибки в JavaScript-кодах. Он особенно полезен при работе с библиотекой React, поскольку позволяет автоматически проверять код на соответствие лучшим практикам и стандартам. В этой статье мы рассмотрим процесс подключения собственных правил ESLint, которые были опубликованы в npm repository @atomazing/eslint-config.

Что такое @atomaxing/eslint-config?

@atomazing/eslint-config представляет собой тщательно подобранный набор правил ESLint, направленный на оптимизацию процесса разработки. В этом наборе были исключены или изменены некоторые правила, которые могут негативно сказаться на удобстве работы разработчиков. Например, запретили использовать export default, чтобы проект был в одном стиле , чтобы уменьшить нагрузку на разработчика. Кроме того, некоторые правила были перенесены из категории ошибок (error) в предупреждения (warn), что позволяет более гибко управлять процессом кодирования без строгой необходимости исправления каждой мелкой детали.

Плюсы использования @atomaxing/eslint-config

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

2. Также с помощью вынесенной конфигурации ESLint можно легко интегрировать линтинг в процессы непрерывной интеграции (CI) и доставки (CD). Это автоматизирует процесс проверки кода на соответствие стандартам перед его деплоем, что снижает риск внесения ошибок в продакшн.

3. Хранение конфигурации ESLint в репозитории npm облегчает совместную работу над проектом. Если на проекте нет eslint, тогда его легко поставить, также не нужно создавать конфигурацию с нуля для нового проекта.

Основа @atomazing/eslint-config

Библиотеки и плагины для ESLint предназначены для улучшения качества кода при разработке на React и обеспечения соответствия стандартам доступности. Вот основные плагины, которые используются :

1. plugin:react/recommended: Этот плагин предоставляет набор рекомендуемых правил для проектов на React, включая проверку использования пропсов, типов компонентов, ключей массивов и других аспектов, связанных с React. Он помогает обнаруживать потенциальные проблемы в коде, такие как отсутствие необходимых пропсов или неправильное использование хуков.

2. plugin:react/jsx-runtime: С React 17 и выше введена новая трансформация JSX, которая не требует явного импорта React в компонентах. Однако это может вызвать ошибки ESLint о том, что React находится вне области видимости. Плагин plugin:react/jsx-runtime добавляется в конфигурацию ESLint для отключения соответствующих правил и предотвращения таких ошибок.

3. plugin:react-hooks/recommended: Этот плагин предназначен для работы с хуками React. Он включает в себя правила, которые помогают избегать распространенных ошибок при использовании хуков, таких как неправильная зависимость или нарушение порядка вызова хуков. Это особенно важно для поддержания чистоты и предсказуемости состояния компонентов.

4. plugin:jsx-a11y/recommended: Плагин для проверки доступности JSX элементов. Он помогает обнаруживать потенциальные проблемы с доступностью интерфейса пользователя, такие как неправильно используемые роли кнопок, отсутствующие атрибуты ARIA или проблемы с навигацией. Использование этого плагина способствует созданию более доступных веб-приложений.

5. airbnb-base: Правила форматирования: Определяет стандарты форматирования кода, включая использование пробелов, табуляции, кавычек и т.д., чтобы сделать код более читаемым. Регулярные выражения: Использует регулярные выражения для автоматического исправления проблем с форматированием кода. Проверка на ошибки: Проверяет код на наличие распространенных ошибок, таких как неиспользованные переменные, неправильное использование операторов и т.д.

6. airbnb-typescript/base: добавляет типизацию Расширяет возможности TypeScript, добавляя строгую типизацию для улучшения безопасности и надежности кода. Интерфейсы и типы: Предоставляет общие интерфейсы и типы, которые могут быть полезны во многих проектах TypeScript. Правила и рекомендации: Содержит специфические для TypeScript рекомендации по написанию кода, такие как использование декораторов, модулей и других современных возможностей языка.

7. eslint:recommended: Это набор правил ESLint, которые считаются наиболее важными для большинства проектов. Они помогают обнаруживать распространенные ошибки и проблемы с кодом, такие как использование неопределенных переменных, неправильное использование операторов и т.д.

8. plugin:@typescript-eslint/recommended: Этот плагин расширяет ESLint для поддержки TypeScript. Он включает в себя набор рекомендуемых правил специально адаптированных под TypeScript, чтобы помочь разработчикам избегать типовых ошибок и улучшить структуру кода.

9. plugin:import/recommended и plugin:import/typescript: Эти плагины предоставляют правила для проверки импортов в коде. Они помогают обнаруживать проблемы, связанные с путями импорта, такими как несуществующие модули или неправильно написанные пути. Плагин plugin:import/typescript адаптируется под TypeScript.

10. plugin:unicorn/recommended: Unicorn — это набор правил ESLint, созданный для упрощения процесса выбора правил. Он предлагает набор «однозначных» решений по многим вопросам стиля кодирования, что помогает сделать код более единообразным и понятным.

11. prettier: Prettier — это инструмент форматирования кода, который может быть интегрирован с ESLint через плагин eslint-config-prettier. Он автоматически форматирует файлы согласно определенным правилам, делая код более читаемым и последовательным.

Подключение зависимости @atomazing/eslint-config

Для подключения необходимо выполнить установку eslint в проект, далее создать файлы .eslintrs.js и .eslintignore.js в корне проекта. Рассмотрим создание файлов:

module.exports = {     parserOptions: {         ...     },     extends: ['@atomazing/eslint-config'],     settings: {         'правило-eslint': 'off'     },     ... }

в .eslingignore.js нужно положить все файлы, которые не должны валидироваться правилами eslint.

node_modules tsconfig.json

Запускать eslint на проекте можно через команду 

npm run lint:eslint && npm run lint:prettier && npm run lint:ts

Но удобнее вынести эту команду в scripts в package.json, Например, через команду format и вызывать через команду npm run format

{     "name": "your-app-name",     "version": "1.0.0",     "description": "",     "scripts": {         "format": "npm run lint:eslint -- --fix",     },     "dependencies": {         ...     },     "devDependencies": {         ...     }, }