How do I configure prettier to format tsx file which use styled component?

Question

Here is what is expected after formatting my file :

export const StyledDiv = styled.div<StyledDivProps>`
    width: 56px;
    height: 30px;
`;

And this is what I get after formatting :

export const StyledDiv =
    styled.div <
    StyledDivProps >
    width: 56px;
    height: 30px;
`;

I made some research to find the good configuration on Prettier but didn't get any working solution. I think I am missing something inside my config file on vscode. Does anyone have an idea of what is the origin of the issue ? Do you have a solution ?

Thank you !

Here is my settings.json file :

{
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "diffEditor.ignoreTrimWhitespace": false,
  "workbench.startupEditor": "welcomePage",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "update.enableWindowsBackgroundUpdates": false,
  "update.mode": "manual",
  "[json]": {
    "editor.quickSuggestions": {
      "strings": true
    },
    "editor.suggest.insertMode": "replace",
  },
  "editor.formatOnSave": false
}
```

Answer 1

I was dealing with the same problem. My .prettierrc file was

{ "printWidth": 80, "tabWidth": 2, "useTabs": false, "semi": true, "singleQuote": true, "trailingComma": "none", "jsxBracketSameLine": false, "parser": "babel" }

I deleted "parser": "babel" and it worked.