Im currently setting up a new project and am getting that weird prettier error each time im trying to render...

.eslintrc file:

 "parserOptions": {
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true,
    "browser": true
  },
  "rules": {
    "react/jsx-uses-react": "error",
    "react/jsx-uses-vars": "error",
    "no-unused-vars": "error",
    "unused-imports/no-unused-imports": 2,
    "unused-imports/no-unused-vars": 1,
    "jsx-a11y/anchor-is-valid": 0,
    "react/prop-types": 0,
    "react/no-unescaped-entities": 0,
    "react/jsx-no-target-blank": 0,
    "no-mixed-spaces-and-tabs": 0,
    "no-cond-assign": 0,
    "react/jsx-key": 0,
    "react/display-name": 0,
    "no-lone-blocks": 0,
    "jsx-a11y/accessible-emoji": 0,
    "prettier/prettier": "error"
  },
  "extends": ["react-app", "eslint:recommended", "plugin:react/recommended"],
  "plugins": ["react", "prettier", "unused-imports"],
  "settings": {
    "react": {
      "pragma": "React",
      "version": "detect"
    }
  }

.prettierrc file:

{
  "bracketSpacing": true,
  "jsxBracketSameLine": true,
  "printWidth": 80,
  "singleQuote": true,
  "trailingComma": "none",
  "tabWidth": 2,
  "useTabs": false,
  "react/jsx-max-props-per-line": [1, { "when": "always" }],
  "endOfLine": "auto"
}

package.json file:

{
  "name": "ts-frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.3",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.4.1",
    "@types/node": "^16.11.26",
    "@types/react": "^17.0.43",
    "@types/react-dom": "^17.0.14",
    "axios": "^0.26.1",
    "config": "^3.3.7",
    "eslint": "^8.12.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-unused-imports": "^2.0.0",
    "framer-motion": "^6.2.8",
    "prettier": "^2.6.1",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-redux": "^8.0.0-beta.1",
    "react-router-dom": "^6.2.2",
    "react-scripts": "5.0.0",
    "redux": "^4.1.2",
    "typescript": "^4.6.3",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "tw": "tailwindcss -i ./src/assets/tw-input.css -o ./src/assets/tailwind.css --watch"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "tailwindcss": "^3.0.23"
  }
}

helpful information:

• eslint-plugin-prettier is installed and also shows up in my node-modules.
• each time I hit save in package json.json it renders once.
• im using brave browser
• I´m using react@18 via create react app typescript template
• Suggested solution in this thread did not work for me: VSCode failed to load plugin cannot find module 'eslint-plugin-prettier'

Anyone has any ideas how to solve this or had similar issues?

Cheers and thanks!