META
Руководства
Настройка и использование ESLint

Настройка и использование ESLint в проекте

Этот документ описывает, как настроить и использовать ESLint в вашем проекте, а также то как в соответствии с этими правилами мы пишем код.

Основные настройки

Расширения (Extends)

Конфигурация расширяет несколько наборов правил, которые включают:

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

    // Пример: Предупреждение о неиспользуемой переменной
let unusedVar;

    Рекомендованные правила для TypeScript, которые помогают избежать ошибок, связанных с типами.

    // Пример: Предупреждение о неявном any
function greet(name) {
  return 'Hello ' + name;
}

  • reactPlugin: Рекомендованные правила для React, которые помогают следовать лучшим практикам при разработке React-приложений.

    // Пример: Предупреждение, если компонент не имеет displayName
const MyComponent = () => <div>Hello</div>;

  • reactHooks: Рекомендованные правила для хуков React, которые обеспечивают правильное использование хуков.

    // Пример: Ошибка, если хук вызывается не на верхнем уровне
if (condition) {
  useEffect(() => {
    // ...
  });
}

  • importPlugin: Рекомендованные правила для управления импортами, которые помогают поддерживать порядок и структуру импортов. Поддержка импорта для TypeScript, которая помогает правильно разрешать модули TypeScript.

    // Пример: Ошибка, если импорт не может быть разрешен
import MyComponent from './NonExistentComponent';

Файлы (files)

Определяет какие файлы ESlint будет проверять.

files: [
  "**/*.{ts,tsx}",
],

Парсер (Parser)

Для анализа TypeScript используется парсер @typescript-eslint/parser, который позволяет ESLint понимать синтаксис TypeScript.

import parser from "@typescript-eslint/parser"
 
export default tseslint.config(
    // ...
 
    {
        languageOptions: {
            parser: parser,
            parserOptions: {
                // ...
            },
        },
    }
)

  • Пример: Использование TypeScript синтаксиса, такого как интерфейсы и типы.

    interface User {
  name: string;
  age: number;
}

Опции парсера (Parser Options)

Конфигурация парсера настроена для использования последней версии ECMAScript, модульной системы и TypeScript проекта:

parserOptions: {
  ecmaVersion: 'latest',
  sourceType: 'module',
  project: './tsconfig.json',
}

  • ecmaVersion: 'latest': Позволяет использовать последние возможности ECMAScript.

    // Пример: Использование опциональной цепочки
const name = user?.profile?.name;

  • sourceType: 'module': Указывает, что код использует ES6 модули.

    // Пример: Использование import/export
import { myFunction } from './myModule';

  • project: './tsconfig.json': Указывает путь к файлу конфигурации TypeScript, что позволяет ESLint учитывать настройки TypeScript.

Настройки (Settings)

Конфигурация включает настройки для автоматического определения версии React и разрешения импортов:

settings: {
  react: {
    version: 'detect'
  },
  'import/resolver': {
    typescript: true,
    node: true,
  }
}

  • react.version: 'detect': Автоматически определяет версию React, используемую в проекте, что позволяет ESLint применять соответствующие правила.

    // Пример: Использование новых возможностей React
const App = () => <h1>Hello, World!</h1>;

  • import/resolver: Настройки для разрешения импортов, которые помогают ESLint правильно интерпретировать пути модулей.

    • typescript: true: Позволяет ESLint разрешать модули TypeScript.

      // Пример: Импорт модуля TypeScript
import { myFunction } from './myModule';

    • node: true: Позволяет ESLint разрешать модули Node.js.

      // Пример: Импорт модуля Node.js
const fs = require('fs');

Плагины (Plugins)

Используются плагины для React, TypeScript, управления импортами и хуков React:

export default tseslint.config(
    tseslint.configs.recommended,
    reactHooks.configs['recommended-latest'],
    reactPlugin.configs.flat.recommended,
    importPlugin.flatConfigs.recommended,
 
    // ...
)

  • reactPlugin: Плагин для поддержки специфичных правил React.

    // Пример: Предупреждение о неправильном использовании JSX
const element = <div>Text</div>;

  • tseslint: Плагин для поддержки TypeScript, который помогает выявлять ошибки, связанные с типами.

    // Пример: Предупреждение о неправильном типе
const unusedVar: number = 'Hello';

  • importPlugin: Плагин для управления импортами, который помогает поддерживать порядок и структуру импортов.

    // Пример: Предупреждение о неправильном импорте
import React from 'react';
import { useState } from 'react';

  • reactHooks: Плагин для обеспечения правильного использования хуков React.

    // Пример: Ошибка, если хук вызывается не на верхнем уровне
if (condition) {
  useEffect(() => {
    // ...
  });
}

Правила (Rules)

Конфигурация включает специфичные правила для React, TypeScript, управления импортами и общие правила:

React

  • react/prop-types: 0
    Отключает проверку типов пропсов. Это полезно, если вы используете TypeScript для проверки типов.

    // Без необходимости указывать propTypes
const MyComponent = ({ name }) => <div>{name}</div>;

  • react/react-in-jsx-scope: 'off'
    Отключает правило, требующее импортировать React в каждом файле, где используется JSX. Это актуально для новых версий React.

    // React не нужно импортировать
const App = () => <h1>Hello, World!</h1>;

  • react/display-name: 'off'
    Отключает предупреждение о необходимости указания displayName для компонентов.

    // Без необходимости указывать displayName
const MyComponent = () => <div>Component</div>;

  • react-hooks/rules-of-hooks: 'error'
    Обеспечивает соблюдение правил хуков, таких как вызов хуков только на верхнем уровне.

    // Правильное использование хуков
const useCustomHook = () => {
  const [state, setState] = useState(0);
  return state;
};

  • react-hooks/exhaustive-deps: 'warn'
    Предупреждает о необходимости указания всех зависимостей в массиве зависимостей хуков.

    // Предупреждение, если зависимости не указаны
useEffect(() => {
  console.log('Effect');
}, [dependency]);

TypeScript

  • @typescript-eslint/explicit-function-return-type: 'off'
    Отключает требование явного указания возвращаемого типа для функций.

    // Без необходимости указывать возвращаемый тип
const add = (a: number, b: number) => a + b;

  • @typescript-eslint/explicit-module-boundary-types: 'off'
    Отключает требование явного указания типов на границах модулей.

    // Без необходимости указывать типы на границах
export const fetchData = async () => {
  return await fetch('/api/data');
};

  • @typescript-eslint/no-explicit-any: 'warn'
    Предупреждает о использовании типа any.

    // Предупреждение при использовании any
let data: any;

  • @typescript-eslint/no-unused-vars: ['warn', { argsIgnorePattern: '^', varsIgnorePattern: '^' }]
    Предупреждает о неиспользуемых переменных, игнорируя те, что начинаются с _.

    // Предупреждение, если переменная не используется
const unusedVariable = 42;

Imports

  • import/order: ['error', { ... }]
    Обеспечивает порядок импортов, группируя их и добавляя новые строки между группами.

    // Правильный порядок импортов
import React from 'react';
import { useState } from 'react';
import MyComponent from './MyComponent';

  • import/no-unresolved: 'error'
    Ошибка, если импорт не может быть разрешен.

    // Ошибка, если путь неверный
import MyComponent from './NonExistentComponent';

General

  • no-console: ['warn', { allow: ['warn', 'error'] }]
    Предупреждает о использовании console.log, разрешая console.warn и console.error.

    // Предупреждение при использовании console.log
console.log('Debugging');

  • prefer-const: 'error'
    Ошибка, если переменная не изменяется, но объявлена с let.

    // Ошибка, если переменная не изменяется
let constantValue = 10;

  • no-var: 'error'
    Ошибка, если используется var вместо let или const.

    // Ошибка при использовании var
var count = 0;

  • eqeqeq: ['error', 'always']
    Ошибка, если используется нестрогое равенство == вместо ===.

    // Ошибка при использовании ==
if (value == 10) {
  // ...
}

Игнорируемые пути (Ignore Patterns)

Некоторые директории и файлы игнорируются при проверке ESLint:

ignores: [
  'docs/',
  'node_modules/',
  'out/',
  'src/test/',
  'src/main/webapp/app/_b/',
  'src/main/webapp/app/vendor/',
  'src/main/webapp/app/bower_components/',
  'src/main/webapp/app/contrib/',
  'src/main/webapp/app/react/node_modules/',
  'src/main/webapp/app/react/src/components/external/'
]

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

КешированиеОбработчики событий сущностей