Налаштування ESLint для перевірки React Native-коду

Налаштування ESLint для перевірки React Native-коду

У React Native проектах TypeScript не гарантує відсутність проблем у runtime. 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 день. Вартість розраховується індивідуально.