@callstack/eslint-config

@callstack/eslint-config

Callstack ESLint config for React Native, React and Node.js projects, utilizing Flow, TypeScript, Prettier and Jest with sensible defaults. Supports both eslintrc and flat config.

Installation

With Yarn:

yarn add --dev eslint @callstack/eslint-config

Or with npm:

npm install --save-dev eslint @callstack/eslint-config

Usage

You can choose one of the following environments to work with by extending your ESLint config (eslint.config.mjs for flat config, or .eslintrc / eslintConfig field in package.json for the eslintrc config style) with @callstack config tailored to your project.

React Native config

Usage:

eslintrc format (ESLint < v9)

{
  "extends": "@callstack"
}

flat config format (eslint.config.mjs, ESLint 9+)

import callstackConfig from '@callstack/eslint-config/react-native.flat.js';

export default [
  {
    ignores: [
      // ignored files go here
    ],
  },
  ...callstackConfig,
  {
    rules: {
      // your custom rules
    },
  },
];

Plugins used:

• React config
• eslint-plugin-react-native
• eslint-plugin-react-native-a11y

Additionally, it sets "react-native/react-native" environment and native platform extensions to resolve.

React config

Usage:

eslintrc format (ESLint < v9)

{
  "extends": "@callstack/eslint-config/react"
}

flat config format (eslint.config.mjs, ESLint 9+)

import callstackConfigReact from '@callstack/eslint-config/react.flat.js';

export default [
  {
    ignores: [
      // ignored files go here
    ],
  },
  ...callstackConfigReact,
  {
    rules: {
      // your custom rules
    },
  },
];

Plugins used:

• Node config
• eslint-plugin-react
• eslint-plugin-react-hooks

Node config

Usage:

eslintrc format (ESLint < v9)

{
  "extends": "@callstack/eslint-config/node"
}

flat config format (eslint.config.mjs, ESLint 9+)

import callstackConfigNode from '@callstack/eslint-config/node.flat.js';

export default [
  {
    ignores: [
      // ignored files go here
    ],
  },
  ...callstackConfigNode,
  {
    rules: {
      // your custom rules
    },
  },
];

Plugins used:

• eslint-config-prettier
• eslint-plugin-prettier
• eslint-plugin-jest (applied for tests only, based on Jest's testMatch config)
• eslint-plugin-import
• eslint-plugin-promise
• eslint-plugin-flowtype
• @typescript-eslint/eslint-plugin (only for .tsx? files)
• @typescript-eslint/parser (only for .tsx? files)

Additionally, it sets es6 and node environments.

Example of extending the configuration

eslintrc format (ESLint < v9)

{
  "extends": "@callstack",
  "rules": {
    "global-require": 0,
    "prefer-destructuring": 0
  }
}

flat config format (eslint.config.mjs, ESLint 9+)

import callstackConfig from '@callstack/eslint-config/react-native.flat.js';

export default [
  ...callstackConfig,
  {
    rules: {
      'global-require': 0,
      'prefer-destructuring': 0,
    },
  },
];

TypeScript

TypeScript is supported out-of-the-box, including importing JS files from TS files and vice-versa. All you need to do is to make sure you have typescript module installed.

Then when running ESLint add --ext '.js,.ts' (you might need also .jsx, .tsx) option, for example:

yarn eslint --ext '.js,.ts' ./src

parserOptions.project is set to ./tsconfig.json. You may need to adjust that.

To do so, you'll need to override our setup for TS files in your ESLint config:

eslintrc format (ESLint < v9)

{
  "overrides": [
    {
      "files": ["*.ts", "*.tsx"],
      "parserOptions": {
        "project": "./packages/**/tsconfig.json"
      }
    }
  ]
}

flat config format (eslint.config.mjs, ESLint 9+)

In the flat config, just append another configuration object to the array and be sure to import the /react-native.flat file:

import callstackConfig from '@callstack/eslint-config/react-native.flat.js';
import tsEslintParser from '@typescript-eslint/parser';

export default [
  ...callstackConfig,
  {
    files: ['**/*.ts', '**/*.tsx'],
    languageOptions: {
      parser: tsEslintParser,
      parserOptions: { project: './packages/**/tsconfig.json' },
    },
  },
];

VSCode

If you're VSCode user, you may find adding this config to your .vscode/settings.json helpful:

{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ]
}