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.

With Yarn:

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

Or with npm:

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

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.

Usage:

{ "extends": "@callstack" }

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.

Usage:

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

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

Usage:

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

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.

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

import callstackConfig from '@callstack/eslint-config/react-native.flat.js'; export default [ ...callstackConfig, { rules: { 'global-require': 0, 'prefer-destructuring': 0, }, }, ];

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:

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

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' }, }, }, ];

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

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