How to fix conflict between prettier and vscode? Why is vscode behaving so strangely?

Question

Visual Studio Code

After a few days of frustration, surfing the Internet looking for a solution to the problem, I found nothing. It is very inconvenient to work without prettier.

A very strange bug that for some reason is reproducible on my machine. Never encountered such a bug before.

What is the problem: after installing prettier as an extension, I create configuration files in the root of the project: the .vscode folder (inside the settings.json file) and the .prettierrc file (except for prettier it costs nothing, the rest of the settings are reset to default)
In them, respectively, I set settings.json config

{
      "editor.codeActionsOnSave": {
          "source.fixAll": true
      },
      "editor.formatOnSave": true,
      "javascript.format.enable": false,
      "material-icon-theme.activeIconPack": "react_redux"
  }

.prettierrc

{
    "semi": false,
    "singleQuote": true,
    "tabWidth": 4,
    "trailingComma": "es5"
  }

Now that I have prettier and the settings are in effect, prettier works just fine as it should. However, after 10 minutes of stable work, immediately after saving the next file, a strange bug appears that I have not seen before. Examples in the screenshots below
1) Before saving the file :

2) After saving the file :


Where to dig? How can this be fixed? Does it fix at all?

Answer 1

Try adding to .prettierrc
jsxBracketSameLine: true