Prettier is removing typescript generic annotation from react class component

Question

I'm trying to make an ErrorBoundary using a class component like this

class ErrorBoundary extends Component<ErrorBoundaryProps,ErrorBoundaryState>

But every time I format it with prettier, the part <ErrorBoundaryProps,ErrorBoundaryState> disappears, I'm not sure if it's prettier or eslint.

Here's my .eslintrc.json

{
  "extends": [
    "next/core-web-vitals",
    "plugin:storybook/recommended"
  ],
  "plugins": ["simple-import-sort"],
  "rules": {
    "simple-import-sort/imports": "error",
    "simple-import-sort/exports": "error"
  },
  "parserOptions": {
    "sourceType": "module",
    "ecmaVersion": "latest"
  }
}

Rajewski

Answer 1

Upgrading to the latest version(version 3.3.3) solved my issue.

Porphyrin

Works for me too! Thanks – Deferral

This is not working for me. Still removing generics in 3.3.3 – Hast

Answer 2

for me, I was in (version 3.3.3) so downgrading to the prior version 3.3.2)solved my issue. I dont know why this happens as previous comment says 3.3.3 fixes his problem.

Scow

this worked for me – Polder

Same here. I'm surprised Prettier would do something like that, it's usually pretty stable… – Melessa

Answer 3

Install Necessary Plugins: Make sure you have the required ESLint and Prettier plugins installed:

npm install --save-dev eslint prettier eslint-plugin-prettier eslint-config-prettier @typescript-eslint/parser @typescript-eslint/eslint-plugin

Disable ESLint Formatting: You can configure ESLint to not format certain aspects. Add the following rule to your .eslintrc.json to prevent ESLint from interfering with TypeScript generics:

"rules": {
  "react/jsx-filename-extension": "off",
  "react/prop-types": "off",
  "typescript-eslint/no-explicit-any": "off"
}

Use the Correct Parser: Ensure you're using the TypeScript parser for ESLint. Your .eslintrc.json should include:

"parser": "@typescript-eslint/parser",
"extends": [
  "plugin:@typescript-eslint/recommended",
  "next/core-web-vitals",
  "plugin:storybook/recommended"
]

Configure Prettier and ESLint to Work Together: Add the following to your .eslintrc.json to integrate Prettier with ESLint:

"extends": [
  "plugin:prettier/recommended"
]

Glenglencoe