0

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"]
    }
  }
}
Yogendra
  • 57
  • 1
  • 9

1 Answers1

2

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/"]
      }
    }
  },
  ...
NikhilGoud
  • 574
  • 1
  • 5
  • 21
  • it is working except for an error I'm getting now - "'React' was used before it was defined no-use-before-define" – Yogendra Jan 24 '23 at 07:24
  • see this https://stackoverflow.com/questions/63818415/react-was-used-before-it-was-defined/64024916#64024916 disable `"no-use-before-define": "off"` – NikhilGoud Jan 24 '23 at 09:14
  • thanks, figured it out, could you also provide me what should be the pure react TS configuration for ESLint? – Yogendra Jan 24 '23 at 09:30