The formatting rules from eslint configs are conflicting with prettier configs.

Prettier recommends disabling formatting rules in your linter, you may need eslint-plugin-prettier or prettier-eslint. I am using the first one together with eslint-config-prettier.

These two eslint-*-prettier plugins import the prettier formatting configuration into the eslint config and automatically close the conflicting rules from the eslint.

Finally, I turned on editor.codeActionsOnSave in .vscode/settings.json and turned off formatting as follow:

{
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
}

Here, the problem should be solved.

But you could also turn on editor.formatOnSave and make esbenp.prettier-vscode as your default formatter of vscode:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
}

Be careful, you had better check if the esbenp.prettier-vscode read your config file correctly. I encountered the situation where this plugin could not read the project prettier configuration correctly. As a solution, I added the following configuration:

{
  "prettier.configPath": ".prettierrc.js"
}