ESLint Config Sylph - React Native (@sylphlab/eslint-config-sylph-rn)

This package provides the ESLint Flat Config rules specifically tailored for SylphLab React Native projects. It extends the @sylphlab/eslint-config-sylph-react configuration (which itself extends the base config) with specific rules recommended for React Native development via eslint-plugin-react-native.

Core Philosophy & Design Principles

This configuration builds upon the React config philosophy with a focus on robust React Native development:

• React Native Best Practices: Enforces rules from eslint-plugin-react-native to promote common patterns specific to the React Native environment, such as avoiding inline styles (react-native/no-inline-styles), using platform-specific file extensions correctly (react-native/split-platform-components), and managing StyleSheet usage (react-native/no-unused-styles).
• Platform Awareness: Helps catch potential issues related to platform differences and encourages platform-agnostic or correctly separated code.
• Inherited Strictness: Maintains the extreme strictness, focus on Hooks, JSX A11y, and AI/human readability inherited from the base and React configurations.

Installation

Install this package and its peer dependencies. The easiest way is using install-peerdeps:

1# Using pnpm (recommended) - Installs this package, react, base, and all necessary plugins
2npx install-peerdeps --dev @sylphlab/eslint-config-sylph-rn -p pnpm
3
4# --- OR ---
5
6# Manual Installation (if needed):
7# 1. Install this package, react, and base packages
8pnpm add -D @sylphlab/eslint-config-sylph-rn @sylphlab/eslint-config-sylph-react @sylphlab/eslint-config-sylph
9# 2. Install all peer dependencies listed in ALL THREE package.json files (rn's, react's, and base's)
10pnpm add -D eslint typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-react-native eslint-plugin-unicorn prettier react react-native

(Ensure you have eslint and typescript installed in your project as well.)

Usage

Import and include the configuration array in your eslint.config.js or eslint.config.ts. This package exports a combined array that includes the base and React configurations automatically.

1// eslint.config.ts
2import sylphRNConfig from '@sylphlab/eslint-config-sylph-rn';
3// Optionally import base/react configs if you need to layer rules specifically
4
5export default [
6  // Include the combined React Native config
7  ...sylphRNConfig,
8
9  // Your project-specific rules or overrides
10  {
11    files: ['**/*.ts', '**/*.tsx'], // Target specific files
12    languageOptions: {
13      parserOptions: {
14        project: './tsconfig.json', // Point to your project's tsconfig
15      },
16    },
17    rules: {
18      // Example: Allow console logs
19      'no-console': 'warn',
20      // Example: Relax abbreviation rule for 'props'
21      'unicorn/prevent-abbreviations': ['error', { replacements: { props: false } }],
22      // Example: Override a React Native rule
23      'react-native/no-inline-styles': 'off', // Not recommended, but possible
24    },
25  },
26  {
27    // Example: Ignoring specific files/folders from linting
28    ignores: ['**/dist/**', '**/node_modules/**', '**/ios/**', '**/android/**'],
29  },
30];

See the main monorepo README for more details on the overall philosophy and available configurations.