Подключение Правил 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

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

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

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

plugin:react/recommended: Этот плагин предоставляет набор рекомендуемых правил для проектов на React, включая проверку использования пропсов, типов компонентов, ключей массивов и других аспектов, связанных с React. Он помогает обнаруживать потенциальные проблемы в коде, такие как отсутствие необходимых пропсов или неправильное использование хуков.
plugin:react/jsx-runtime: С React 17 и выше введена новая трансформация JSX, которая не требует явного импорта React в компонентах. Однако это может вызвать ошибки ESLint о том, что React находится вне области видимости. Плагин plugin:react/jsx-runtime добавляется в конфигурацию ESLint для отключения соответствующих правил и предотвращения таких ошибок.
plugin:react-hooks/recommended: Этот плагин предназначен для работы с хуками React. Он включает в себя правила, которые помогают избегать распространенных ошибок при использовании хуков, таких как неправильная зависимость или нарушение порядка вызова хуков. Это особенно важно для поддержания чистоты и предсказуемости состояния компонентов.
plugin:jsx-a11y/recommended: Плагин для проверки доступности JSX элементов. Он помогает обнаруживать потенциальные проблемы с доступностью интерфейса пользователя, такие как неправильно используемые роли кнопок, отсутствующие атрибуты ARIA или проблемы с навигацией. Использование этого плагина способствует созданию более доступных веб-приложений.
airbnb-base: Правила форматирования: Определяет стандарты форматирования кода, включая использование пробелов, табуляции, кавычек и т.д., чтобы сделать код более читаемым. Регулярные выражения: Использует регулярные выражения для автоматического исправления проблем с форматированием кода. Проверка на ошибки: Проверяет код на наличие распространенных ошибок, таких как неиспользованные переменные, неправильное использование операторов и т.д.
airbnb-typescript/base: добавляет типизацию Расширяет возможности TypeScript, добавляя строгую типизацию для улучшения безопасности и надежности кода. Интерфейсы и типы: Предоставляет общие интерфейсы и типы, которые могут быть полезны во многих проектах TypeScript. Правила и рекомендации: Содержит специфические для TypeScript рекомендации по написанию кода, такие как использование декораторов, модулей и других современных возможностей языка.
eslint:recommended: Это набор правил ESLint, которые считаются наиболее важными для большинства проектов. Они помогают обнаруживать распространенные ошибки и проблемы с кодом, такие как использование неопределенных переменных, неправильное использование операторов и т.д.
plugin:@typescript-eslint/recommended: Этот плагин расширяет ESLint для поддержки TypeScript. Он включает в себя набор рекомендуемых правил специально адаптированных под TypeScript, чтобы помочь разработчикам избегать типовых ошибок и улучшить структуру кода.
plugin:import/recommended и plugin:import/typescript: Эти плагины предоставляют правила для проверки импортов в коде. Они помогают обнаруживать проблемы, связанные с путями импорта, такими как несуществующие модули или неправильно написанные пути. Плагин plugin:import/typescript адаптируется под TypeScript.
plugin:unicorn/recommended: Unicorn — это набор правил ESLint, созданный для упрощения процесса выбора правил. Он предлагает набор "однозначных" решений по многим вопросам стиля кодирования, что помогает сделать код более единообразным и понятным.
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": {
        ...
    },
}

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