How to Set Up ESLint, Prettier, and TypeScript in React Native - Initial Configuration

Question

I would like to ask about the initial setup for ESLint, Prettier, and TypeScript in React Native. Currently, I am using absolute paths to specify components. Could you please confirm if I am using this correctly?

tsconfig

{
    "extends": "@tsconfig/react-native/tsconfig.json",
    "include": [
        "src/**/*.ts",
        "src/**/*.tsx",
        "@types/index.d.ts",
        ".eslintrc.js"
    ],
    "compilerOptions": {
        "jsx": "react-native",
        "baseUrl": ".",
        "paths": {
            "@/*": ["src/*"],
            "@assets/*": ["src/assets/*"],
            "@components/*": ["src/components/*"],
            "@config/*": ["src/config/*"],
            "@hooks/*": ["src/hooks/*"],
            "@routes/*": ["src/routes/*"],
            "@screens/*": ["src/screens/*"],
            "@services/*": ["src/services/*"],
            "@styles/*": ["src/styles/*"],
            "@utils/*": ["src/utils/*"],
            "@layout/*": ["src/layout/*"],
            "@types/*": ["src/interfaces/*"],
            "@data/*": ["src/data/*"],
            "@navigation/*": ["src/navigation/*"],
            "@store/*": ["src/store/*"],
            "~env/*": ["../env/*"],
            "~public/*": ["@public/*"]
        }
    }
}

babel.config.js

module.exports = {
    presets: ["module:metro-react-native-babel-preset"],
    plugins: [
        [
            "module-resolver",
            {
                root: ["./src"],
                extensions: [
                    ".ios.ts",
                    ".android.ts",
                    ".ts",
                    ".ios.tsx",
                    ".android.tsx",
                    ".tsx",
                    ".jsx",
                    ".js",
                    ".json",
                ],
                alias: {
                    "@": "./src",
                    "@assets": "./src/assets",
                    "@components": "./src/components",
                    "@config": "./src/config",
                    "@hooks": "./src/hooks",
                    "@routes": "./src/routes",
                    "@screens": "./src/screens",
                    "@services": "./src/services",
                    "@styles": "./src/styles",
                    "@utils": "./src/utils",
                    "@layout": "./src/layout",
                    "@types": "./src/types",
                    "@data": "./src/data",
                    "@navigation": "./src/navigation",
                    "@store": "./src/store",
                    "@public": "./public",
                },
            },
        ],
    ],
};

@tsconfig/react-native/tsconfig.json

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "display": "React Native",
  "_version": "3.0.2",
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "types": ["react-native", "jest"],
    "lib": [
      "es2019",
      "es2020.bigint",
      "es2020.date",
      "es2020.number",
      "es2020.promise",
      "es2020.string",
      "es2020.symbol.wellknown",
      "es2021.promise",
      "es2021.string",
      "es2021.weakref",
      "es2022.array",
      "es2022.object",
      "es2022.string"
    ],
    "allowJs": true,
    "jsx": "react-native",
    "noEmit": true,
    "isolatedModules": true,
    "strict": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": false,
    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "exclude": [
    "node_modules",
    "babel.config.js",
    "metro.config.js",
    "jest.config.js"
  ]
}

.eslintrc.js

module.exports = {
    env: {
        browser: true,
        es2021: true,
        jest: true,
    },
    extends: [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:react-hooks/recommended",
        "plugin:@typescript-eslint/eslint-recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:@typescript-eslint/recommended-requiring-type-checking",
        "prettier",
    ],
    overrides: [
        {
            env: {
                node: true,
            },
            files: [".eslintrc.{js,cjs}"],
            parserOptions: {
                sourceType: "script",
            },
        },
    ],
    parser: "@typescript-eslint/parser",
    parserOptions: {
        project: "./tsconfig.json",
        ecmaVersion: "latest",
        sourceType: "module",
    },
    plugins: ["react", "react-hooks", "@typescript-eslint"],
    rules: {
        indent: ["error", 4],
        "linebreak-style": ["error", "unix"],
        quotes: ["error", "double"],
        semi: ["error", "always"],
    },
};

.prettier.js

module.exports = {
    tabWidth: 4,
    semi: true,
    singleQuote: false,
    trailingComma: "all",
};

I'm encountering a frequent ESLint error in my babel.config.js file with a message similar to "Parsing error: ESLint was configured to run on /babel.config.js using parserOptions.project." Do you know what might be causing this configuration error?

Answer 1

1. to start your project with TypeScript, you can use this command

npx react-native init MyAwesomeProject --template react-native-template-typescript

2. To setup prettier, you can follow these steps:

• 1: goto VsCode extensions
• 2: Search Prettier
• 3:Go to settings

3. To setup ESLint, you can refer this blog https://jqn.medium.com/configure-eslint-for-react-native-d914679e122f