Prettier autosaving (esbenp.prettier-vscode) conflict with prettier/prettier rule - visual-studio-code

Question

I want to use ESLint along with Prettier. Everything is fine except when I press Ctrl + S to save the file, Prettier changes file in a way which is not compatible with prettier/prettier rule in ESLint.
Content of .vscode/settings.json:
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"prettier.singleQuote": true,
"prettier.printWidth": 70,
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"eslint.alwaysShowStatus": true,
"eslint.codeAction.showDocumentation": {
"enable": true
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": ["javascript"]
}
Content of .eslint.json:
{
"env": {
"browser": true,
"es2021": true
},
"extends": ["google", "prettier"],
"parser": "#typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": ["#typescript-eslint", "prettier"],
"rules": {
"prettier/prettier": ["error"]
}
}
I know if I remove "editor.formatOnSave": true, from settings.json all of problems get resolved but I don't like the saved format because lines of code are too long and I like to break long line into multiple line.

Answer 1

The problem is that Prettier is using printWidth of 70 characters but ESlint have a max-len of 80 characters.
You should modify one of them to keep them sync, e.g. you can change printWidth inside settings.json to make Prettier compatible with ESlint("prettier.printWidth": 80).
Content of ./vscode/settings.json:
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"prettier.singleQuote": true,
"prettier.printWidth": 80,
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"eslint.alwaysShowStatus": true,
"eslint.codeAction.showDocumentation": {
"enable": true
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": ["javascript"]
}