Настройка и использование 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/'
]

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

Кеширование Настройка и использование Pre-commit хуков