Как добавить ESLint в проект React

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

В этой статье мы рассмотрим принцип работы ESLint и создадим компонент кнопки регистрации, чтобы продемонстрировать его преимущества.

Что такое ESLint?

ESLint - это популярная утилита для линтинга JavaScript с открытым исходным кодом. Она анализирует ваш код на предмет потенциальных ошибок и обеспечивает соблюдение стандартов кодирования, повышая качество кода.

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

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

Как настроить проект

Начнем с настройки нового проекта React и установки ESLint. Для демонстрации этого мы создадим приложение для регистрации в React.

Представьте, что мы хотим хранить наш проект на рабочем столе, поэтому сначала настроим файловую структуру. Начнем с создания корневого каталога для нашего проекта на рабочем столе (в данном случае eslintExample).

mkdir eslintExample 
cd eslintExample

Установка приложения React

Теперь с помощью create-react-app мы установим наше приложение React.

npx create-react-app signup-app

Установить ESLint

Для установки ESLint можно воспользоваться следующей командой:

npm install eslint eslint-plugin-react eslint-plugin-react-hooks --save-dev

Структура каталогов должна выглядеть следующим образом:

eslintExample/
  └── signup-app/
      └── node_modules/
      └── public/
      └── src/
          └── App.css
          └── App.js
          └── App.test.js
          └── SignupButton.js
          └── index.css
          └── logo.svg
          └── reportWebVitals.js
          └── setupTests.js
      └── .eslintrc.json
      └── .gitignore
      └── package-lock.json
      └── package.json
      └── README.md

Как настроить ESLint в проекте React

Для работы с ESLint в нашем React-проекте необходимо его настроить. Для этого необходимо создать файл .eslintrc.json в корневом каталоге проекта и добавить в него следующий код:

{
    "env": {
      "browser": true,
      "es2021": true
    },
    "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:react-hooks/recommended"],
    "parserOptions": {
      "ecmaVersion": 12,
      "sourceType": "module",
      "ecmaFeatures": {
        "jsx": true
      }
    },
    "plugins": ["react", "react-hooks"],
    "rules": {
      //add customize rules here as per your project's needs
    }
}  

Приведенная выше конфигурация настраивает ESLint на работу с React и React Hooks с использованием рекомендуемых конфигураций. Вы можете добавить или настроить правила в соответствии с конкретными требованиями вашего проекта.

Создали файл.eslintrc.json и добавили в него конфигурацию, позволяющую ESLint работать с React.

Как создать компонент Signup Button

Теперь создадим простой компонент Signup Button (SignupButton.js) в папке “src”.

Внутри файла src создайте файл SignupButton.js. Он должен выглядеть следующим образом: src/SignupButton.js. Внутри файла SignupButton.js вставьте следующий код:

import React from "react";

const SignupButton = () => {
  const handleSignup = () => {
    alert("Sign up successful!");
  };

  return (
    <button onClick={handleSignup} className="signup-button">
      Sign Up
    </button>
  );
};

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

npm start

Это запустит наше приложение React в корне проекта. После этого вы должны увидеть ошибку, приведенную ниже:

Мы запустили локальный сервер и видим ошибку, исходящую из файла app.js. Необходимо импортировать React в файл app.js. Нам необходимо экспортировать наш компонент кнопки.

Эта ошибка может сбить вас с толку, поскольку вы можете не понять, откуда она взялась. Мы видим эту ошибку, потому что мы настроили ESLint в нашем проекте, и он просканировал наш проект, чтобы сказать нам, что React должен быть импортирован в файл app.js.

Но давайте запустим ESLint, чтобы увидеть, откуда именно возникает ошибка.

Как запустить ESLint

Настроив ESLint, давайте запустим его, чтобы проанализировать наш компонент SignupButton на предмет потенциальных проблем. Откройте терминал и выполните следующую команду в корне проекта:

npx eslint src/SignupButton.js

ESLint проанализирует файл SignupButton.js и отобразит все найденные проблемы ниже.

Выполним команду eslint, которая покажет, где у нас возникают ошибки: в кнопке регистрации и в app.js

Как исправить проблемы с ESLint

Из вышеприведенного видно, что ESLint определил, где у нас возникают ошибки. Мы не импортировали React в наш файл App.js и не экспортировали наш компонент кнопки регистрации. Давайте исправим это.

Мы импортировали React в файл app.js и экспортировали компонент SignupButton.

Как видно, теперь наш код был успешно собран.

Мы смогли экспортировать наш компонент SignupButton и импортировать React в компонент App.js. Это решает нашу проблему.

Если ESLint обнаружит еще какие-либо проблемы в нашем компоненте SignupButton, он покажет их вместе с предложениями по их устранению.

Например, ESLint может обнаружить отсутствие точек с запятой, неиспользуемые переменные или нарушение лучших практик React, таких, как импорт React из “react” в файле app.js.

Устранив проблемы, выявленные ESLint, мы можем гарантировать, что наш код будет соответствовать лучшим практикам, будет легче читаться и содержать меньше потенциальных ошибок.

Заключение

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

В этой статье я рассказал, как настроить ESLint в React-проекте, и продемонстрировал его преимущества на примере простого компонента Signup Button. Эффективное использование ESLint позволит вам писать более чистый, последовательный код и создавать более качественные React-приложения.

Так зачем ждать? Начните использовать ESLint в своих React-проектах и увидите, как повысится качество кода. Счастливого кодирования! 🚀