Reactjs - Prettier is removing typescript generic annotation from react class component

ECIN
July 17, 2024
249 views
0 votes
2 Answers

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"
  }
}

Answers

- Mhmdnzr
- July 17, 2024 at 8:29 am
- 0 votes
0
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"
]
```
Login or Signup to reply.