I'm having mix codebase of Typescript and Javascript with monorepo configuration with Lerna in create-react-app. I'm importing TS files in my JS files with tsconfig.json setup, but getting an error with eslint.

Currently, my .eslintrc.json looks like this, I've newly added the settings here, but it didn't seem to work

{
  "env": {
    "browser": true,
    "es2021": true,
    "jest": true
  },
  "extends": [
    "plugin:react/recommended",
    "airbnb",
    "prettier",
    "plugin:prettier/recommended",
    "plugin:import/typescript"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["react", "prettier"],
  "rules": {
    "react/react-in-jsx-scope": "off",
    "react/jsx-filename-extension": [
      1,
      { "extensions": [".js", ".jsx", ".ts", ".tsx"] }
    ],
    "prettier/prettier": "error",
    "jsx-a11y/click-events-have-key-events": "off",
    "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
    "react/function-component-definition": [
      2,
      {
        "unnamedComponents": "arrow-function"
      }
    ],
    "import/no-relative-packages": "off"
  },
  "ignorePatterns": ["config-overrides.js", "*.json", "*.md", "*.css"],
  "settings": {
    "import/resolver": {
      "typescript": true,
      "node": true
    },
    "import/parsers": {
      "@typescript-eslint/parser": [".ts", ".tsx"]
    }
  }
}

CodePudding user response：

try adding

@typescript-eslint/eslint-plugin, @typescript-eslint/parser plugins

update .eslintrc.json

  ... 
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": "tsconfig.json",
    "sourceType": "module"
  },
  "plugins": ["eslint-plugin-import", "@typescript-eslint", "react", "react-hooks", "react-native", "jsx-a11y"],
  "settings": {
    "import/extensions": [".js", ".jsx", ".ts", ".tsx"],
    "import/parsers": {
      "@typescript-eslint/parser": [".ts", ".tsx"]
    },
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"],
        "moduleDirectory": ["node_modules", "src/"]
      }
    }
  },
  ...