or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-react-native-community--eslint-config

ESLint configuration for React Native development providing comprehensive linting rules and plugin integrations

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@react-native-community/eslint-config@3.2.x

To install, run

npx @tessl/cli install tessl/npm-react-native-community--eslint-config@3.2.0

index.mddocs/

@react-native-community/eslint-config

@react-native-community/eslint-config is a comprehensive ESLint configuration package specifically designed for React Native development. It provides a complete set of linting rules, plugin integrations, and environment configurations to ensure code quality and consistency across React Native projects with support for JavaScript, TypeScript, Flow, and Jest testing.

Package Information

  • Package Name: @react-native-community/eslint-config
  • Package Type: npm
  • Language: JavaScript (ESLint configuration)
  • Installation: yarn add --dev eslint prettier @react-native-community/eslint-config

The package requires ESLint >=8 and Prettier >=2 as peer dependencies.

Core Imports

This package is consumed through ESLint configuration, not direct imports:

.eslintrc.json:

{
  "extends": "@react-native-community"
}

package.json eslintConfig:

{
  "eslintConfig": {
    "extends": "@react-native-community"
  }
}

Basic Usage

After installation, add the configuration to your ESLint setup:

{
  "extends": "@react-native-community"
}

The configuration automatically applies appropriate rules based on file types:

  • JavaScript files (*.js) with Flow type checking support
  • TypeScript files (*.ts, *.tsx) with TypeScript-specific rules
  • Test files with Jest environment and relaxed styling rules

Example with additional custom rules:

{
  "extends": "@react-native-community",
  "rules": {
    "no-console": "warn",
    "react-native/no-inline-styles": "error"
  }
}

Architecture

The configuration is structured around several key components:

  • Base Configuration: Core ESLint settings with ES6 environment and module support
  • Plugin Integration: Comprehensive plugin ecosystem for React Native development
  • File-specific Overrides: Language-specific configurations for JavaScript, TypeScript, and test files
  • Global Variable Definitions: React Native and platform-specific global variables
  • Rule Categorization: Organized rule sets covering code quality, style, and best practices

Capabilities

ESLint Configuration Export

The main export provides a complete ESLint configuration object with all necessary settings for React Native development.

/**
 * Main ESLint configuration export
 * @type {ESLintConfig}
 */
module.exports = ESLintConfig;

interface ESLintConfig {
  /** Environment configuration */
  env: {
    es6: boolean;
  };
  /** Parser options for module support */
  parserOptions: {
    sourceType: "module";
  };
  /** Extended configurations */
  extends: ["plugin:prettier/recommended"];
  /** ESLint plugins used */
  plugins: string[];
  /** Plugin-specific settings */
  settings: {
    react: {
      version: "detect";
    };
  };
  /** File-specific rule overrides */
  overrides: FileOverride[];
  /** Global variables defined for React Native */
  globals: GlobalVariables;
  /** Complete rule configuration */
  rules: RuleConfiguration;
}

Environment Configuration

Configures the ESLint environment for modern JavaScript and React Native development.

interface EnvironmentConfig {
  /** Enable ES6 global variables and features */
  es6: boolean;
}

Parser Configuration

Sets up module-based parsing for modern JavaScript imports/exports.

interface ParserOptions {
  /** Source type for module imports/exports */
  sourceType: "module";
}

Plugin Integration

Integrates essential ESLint plugins for React Native development.

/** ESLint plugins included in the configuration */
type PluginList = [
  "eslint-comments",
  "react", 
  "react-hooks",
  "react-native",
  "@react-native-community",
  "jest"
];

Plugins provide specialized linting rules for:

  • eslint-comments: ESLint directive management
  • react: React-specific linting rules
  • react-hooks: React Hooks rules of hooks validation
  • react-native: React Native platform-specific rules
  • @react-native-community: Community-driven React Native rules
  • jest: Jest testing framework support

File-specific Overrides

Provides specialized configurations for different file types and environments.

interface FileOverride {
  /** File patterns to match */
  files: string[];
  /** Parser for the file type */
  parser?: string;
  /** Additional plugins for file type */
  plugins?: string[];
  /** Environment settings */
  env?: {
    jest?: boolean;
    "jest/globals"?: boolean;
  };
  /** File-specific rules */
  rules: Partial<RuleConfiguration>;
}

/** File override configurations */
type OverrideConfigurations = [
  JavaScriptOverride,
  TypeScriptOverride, 
  TestFileOverride
];

JavaScript Files (*.js):

  • Uses @babel/eslint-parser for modern JavaScript parsing
  • Enables ft-flow plugin for Flow type checking
  • Applies Flow-specific linting rules

**TypeScript Files (.ts, .tsx):

  • Uses @typescript-eslint/parser for TypeScript parsing
  • Enables @typescript-eslint/eslint-plugin
  • Applies TypeScript-specific rules for unused variables, shadows, and function calls

Test Files:

  • Matches test patterns: *.{spec,test}.{js,ts,tsx} and **/__{mocks,tests}__/**/*.{js,ts,tsx}
  • Enables Jest environment and globals
  • Relaxes styling rules for test code

Global Variables

Defines React Native and platform-specific global variables.

interface GlobalVariables {
  /** React Native development mode flag */
  __DEV__: boolean;
  /** Node.js dirname variable */
  __dirname: boolean;
  /** React Native bridge configuration */
  __fbBatchedBridgeConfig: boolean;
  /** Web APIs available in React Native */
  AbortController: boolean;
  Blob: boolean;
  fetch: boolean;
  FormData: boolean;
  Headers: boolean;
  URL: boolean;
  URLSearchParams: boolean;
  WebSocket: boolean;
  XMLHttpRequest: boolean;
  /** JavaScript built-ins with React Native modifications */
  Map: boolean;
  Set: boolean;
  Promise: boolean;
  /** Timing functions */
  setTimeout: boolean;
  setInterval: boolean;
  clearTimeout: boolean;
  clearInterval: boolean;
  requestAnimationFrame: boolean;
  cancelAnimationFrame: boolean;
  setImmediate: boolean;
  clearImmediate: boolean;
  /** Other React Native globals */
  console: boolean;
  global: boolean;
  navigator: boolean;
  process: boolean;
  alert: boolean;
  /** Additional React Native globals */
  ErrorUtils: boolean;
  escape: boolean;
  Event: boolean;
  EventTarget: boolean;
  exports: boolean;
  File: boolean;
  FileReader: boolean;
  Intl: boolean;
  module: boolean;
  require: boolean;
  queueMicrotask: boolean;
  requestIdleCallback: boolean;
  cancelIdleCallback: boolean;
  window: boolean;
  document: boolean;
}

Rule Configuration

Comprehensive linting rules organized by category covering all aspects of JavaScript/TypeScript and React Native development.

interface RuleConfiguration {
  /** General JavaScript rules */
  "comma-dangle": [number, string];
  "no-cond-assign": number;
  "no-console": number;
  "no-const-assign": number;
  "no-debugger": number;
  "no-unused-vars": [number, UnusedVarsOptions];
  
  /** Best practices rules */
  "curly": number;
  "eqeqeq": [number, string];
  "no-eval": number;
  "no-alert": number;
  
  /** Stylistic rules */
  "quotes": [number, string, string];
  "semi": number;
  "keyword-spacing": number;
  "jsx-quotes": [number, string];
  
  /** React plugin rules */
  "react/jsx-uses-react": number;
  "react/jsx-uses-vars": number;
  "react/no-string-refs": number;
  "react/react-in-jsx-scope": number;
  
  /** React Hooks rules */
  "react-hooks/rules-of-hooks": number;
  "react-hooks/exhaustive-deps": number;
  
  /** React Native specific rules */
  "react-native/no-inline-styles": number;
  
  /** Jest testing rules */
  "jest/no-disabled-tests": number;
  "jest/no-focused-tests": number;
  "jest/valid-expect": number;
  
  /** ESLint comments rules */
  "eslint-comments/no-unused-disable": number;
  "eslint-comments/no-unused-enable": number;
  
  /** TypeScript rules (in overrides) */
  "@typescript-eslint/no-unused-vars": ["error", TypeScriptUnusedVarsOptions];
  "@typescript-eslint/no-shadow": 1;
  "@typescript-eslint/func-call-spacing": 1;
  
  /** Flow rules (in overrides) */
  "ft-flow/define-flow-type": number;
  "ft-flow/use-flow-type": number;
}

interface UnusedVarsOptions {
  vars: "all";
  args: "none"; 
  ignoreRestSiblings: boolean;
}

interface TypeScriptUnusedVarsOptions {
  argsIgnorePattern: string;
  destructuredArrayIgnorePattern: string;
}

Rule severity levels:

  • 0: Rule disabled
  • 1: Warning level
  • 2: Error level

Dependencies

The configuration automatically manages and configures these ESLint plugins and parsers:

interface PackageDependencies {
  /** Core parsing and configuration */
  "@babel/core": string;
  "@babel/eslint-parser": string;
  "eslint-config-prettier": string;
  "eslint-plugin-prettier": string;
  
  /** React ecosystem */
  "eslint-plugin-react": string;
  "eslint-plugin-react-hooks": string;
  "eslint-plugin-react-native": string;
  "@react-native-community/eslint-plugin": string;
  
  /** TypeScript support */
  "@typescript-eslint/eslint-plugin": string;
  "@typescript-eslint/parser": string;
  
  /** Additional tools */
  "eslint-plugin-eslint-comments": string;
  "eslint-plugin-ft-flow": string;
  "eslint-plugin-jest": string;
}

interface PeerDependencies {
  /** Required ESLint version */
  eslint: ">=8";
  /** Required Prettier version */
  prettier: ">=2";
}

Types

/** Main configuration type exported by the package */
type ESLintConfig = {
  env: EnvironmentConfig;
  parserOptions: ParserOptions;
  extends: string[];
  plugins: PluginList;
  settings: PluginSettings;
  overrides: FileOverride[];
  globals: GlobalVariables;
  rules: RuleConfiguration;
};

/** Plugin-specific settings */
interface PluginSettings {
  react: {
    version: "detect";
  };
}