ESLint (Airbnb) + Prettier setup for React Native (Expo) in TypeScript

Question

I have been working on setting up linting & formatting for my React Native project for a couple of weeks now, but I'm unable to make much progress. I have looked at many tutorials and followed them as much as I could, but there still seems to be some setup problems.

My project has a Django backend and React Native frontend, therefore the React app (in src/frontend directory) started using the tutorial here using Expo, Yarn and TypeScript: https://reactnative.dev/docs/environment-setup.

No further changes were made to this setup, and I attempted to add ESLint & Prettier to it.

These are my configuration files:

1. .eslintrc.js

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: 'tsconfig.json',
    tsconfigRootDir: __dirname,
  },
  plugins: [
    '@typescript-eslint',
    'import',
    'react',
    'react-hooks',
    'react-native',
    'prettier',
  ],
  extends: [
    'airbnb-typescript',
    'plugin:import/recommended',
    'plugin:import/typescript',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'prettier',
    'plugin:prettier/recommended',
  ],
  rules: {
    'no-use-before-define': 'off',
    '@typescript-eslint/no-use-before-define': ['error'],
    'prettier/prettier': 'error',
  },
};

2. .prettierrc.json

{
  "singleQuote": true
}

3. tsconfig.json

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {}
}

To name a few significant errors I am getting, I get import/namespace for react-native where it says ';' expected, variable used before definition such as styles, and parsing error "parserOptions.project" has been set for @typescript-eslint/parser and .eslintrc.js does not match the project config.

Answer 1

I ended up creating tsconfig.eslint.json with this content:

{
  "extends": "./tsconfig.json",
  "include": [".eslintrc.js", "**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
}

and so changing parserOptions.project to 'tsconfig.eslint.json' worked.