How to use eslint and prettier together?

Question

JavaScript

Error text:
Error: Cannot find module '��{ " semi " : true , " trailing C omma " : "
all " , " single Q uote " : true , " print W idth " : 1 2 0 ,
" tab W idth " : 4 }
Npm script: .prettierrc
eslint \"src/client/**/*.tsx\" --quiet --fix

{
    "semi": true,
    "trailingComma": "all",
    "singleQuote": true,
    "printWidth": 120,
    "tabWidth": 4
}

.eslintrc

{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2020,
    "ecmaFeatures": {
      "jsx": true 
    },
    "project": "./tsconfig.eslint.json"
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "extends": [
    "plugin:react/recommended", 
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ],
  "plugins": [
    "react-hooks" 
  ],
  "rules": {
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn"
  }
}

Dependencies:
"prettier": "^2.0.5"
"eslint": "^7.3.1"
"eslint-config-prettier": "^6.11.0"
"eslint-plugin-import": "^2.22.0"
"eslint-plugin-prettier": "^3.1.4"
"eslint-plugin-react": "^7.20.3"
"eslint-plugin-react-hooks": "^4.0.5"
"@typescript-eslint/ eslint-plugin": "^3.5.0"
"@typescript-eslint/parser": "^3.5.0"
Note: If you remove the line "plugin:prettier/recommended" from the extends array in the .eslintrc file, the error disappears.