ESLint (Airbnb) + Prettier-setup för React Native (Expo) i TypeScript

Jag har arbetat med att sätta upp linting och formatering för mitt React Native-projekt i några veckor nu, men jag har inte kunnat göra mycket framsteg. Jag har tittat på många handledningar och följt dem så mycket jag kunde, men det verkar fortfarande finnas vissa installationsproblem.

Mitt projekt har en Django-backend och React Native-frontend, därför startade React-appen (i src/frontend-katalogen) med handledningen här med Expo, Yarn och TypeScript: https://reactnative.dev/docs/environment-setup.

Inga ytterligare ändringar gjordes i denna uppsättning, och jag försökte lägga till ESLint och Prettier till den.

Det här är mina konfigurationsfiler:

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

```
.prettierrc.json
```

{
  "singleQuote": true
}

```
tsconfig.json
```

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

För att nämna några betydande fel jag får, får jag import/namespace för react-native där det står ';' förväntat, variabel använd innan definition som styles, och parsningfel "parserOptions.project" har ställts in för @typescript-eslint/parser och .eslintrc.js matchar inte projektkonfigurationen.

Svar #1

Jag slutade med att skapa tsconfig.eslint.json med detta innehåll:

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

och att ändra parserOptions.project till 'tsconfig.eslint.json' fungerade.