Настройка ESLint для проверки React Native-кода

Настройка ESLint для проверки React Native-кода

В React Native проектах TypeScript не гарантирует отсутствие проблем в рантайме. any расползается по кодовой базе, useEffect с пустым dependency array вызывает баги с устаревшими closure, компоненты напрямую меняют state родителя через ref. ESLint с правильным набором плагинов ловит эти проблемы статически, до запуска на устройстве.

Конфигурация

// eslint.config.mjs (Flat Config, ESLint 9+)
import js from '@eslint/js';
import typescript from '@typescript-eslint/eslint-plugin';
import typescriptParser from '@typescript-eslint/parser';
import reactPlugin from 'eslint-plugin-react';
import reactHooksPlugin from 'eslint-plugin-react-hooks';
import reactNativePlugin from 'eslint-plugin-react-native';

export default [
  js.configs.recommended,
  {
    files: ['**/*.{ts,tsx}'],
    languageOptions: {
      parser: typescriptParser,
      parserOptions: {
        project: './tsconfig.json',
        ecmaFeatures: { jsx: true },
      },
    },
    plugins: {
      '@typescript-eslint': typescript,
      react: reactPlugin,
      'react-hooks': reactHooksPlugin,
      'react-native': reactNativePlugin,
    },
    rules: {
      ...typescript.configs['recommended-type-checked'].rules,
      '@typescript-eslint/no-explicit-any': 'error',
      '@typescript-eslint/no-floating-promises': 'error',
      '@typescript-eslint/await-thenable': 'error',
      'react-hooks/rules-of-hooks': 'error',
      'react-hooks/exhaustive-deps': 'warn',
      'react-native/no-unused-styles': 'error',
      'react-native/no-inline-styles': 'warn',
      'react-native/no-color-literals': 'warn',
    },
  },
];

recommended-type-checked требует project: './tsconfig.json' — анализ с учётом типов. Медленнее, но ловит то, что recommended пропускает: @typescript-eslint/no-floating-promises обнаружит await без try/catch на async функции.

Ключевые плагины для React Native

• eslint-plugin-react-hooks — обязателен. exhaustive-deps правило ловит 90% багов с useEffect
• eslint-plugin-react-native — no-unused-styles находит StyleSheet.create стили, которые нигде не используются (частая утечка в больших компонентах)
• @typescript-eslint с type-checking — ловит any, floating promises, unsafe assignments

Prettier + ESLint

npm install --save-dev prettier eslint-config-prettier

eslint-config-prettier отключает ESLint-правила, которые конфликтуют с Prettier. В eslint.config.mjs добавляем prettierConfig последним — он переопределяет форматирующие правила.

.prettierrc:

{
  "semi": true,
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 100,
  "bracketSpacing": true
}

CI интеграция

- name: Lint
  run: npx eslint . --ext .ts,.tsx --max-warnings 0

- name: Format check
  run: npx prettier --check "src/**/*.{ts,tsx}"

--max-warnings 0 — ноль предупреждений допустимо. Без этого флага ESLint выходит с кодом 0 даже при наличии warnings.

Pre-commit через lint-staged

// package.json
{
  "lint-staged": {
    "*.{ts,tsx}": [
      "eslint --fix --max-warnings 0",
      "prettier --write"
    ]
  }
}

npx husky add .husky/pre-commit "npx lint-staged"

Срок: 1 день. Стоимость рассчитывается индивидуально.