@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.

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 (.eslintrc, or eslintConfig field in package.json) with @callstack config tailored to your project.

React Native config

Usage:

{
  "extends": "@callstack"
}

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:

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

Plugins used:

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

Node config

Usage:

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

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

{
  "extends": "@callstack",
  "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

VSCode

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

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