Why doesn't VS Code format when saving ESLint & Prettier?

Question

React

Greetings) Why doesn't VS Code format when saving ESLint & Prettier?
Installed create-react-app typescript + eslint & prettier .
I did everything as it is written in this tutorial TYK .
But when saving, it does not format.
If you separately type npm run lint or npm run format in the terminal , then everything works.
How to make it so that it would format when saving the file?
I would be very grateful for any help)

package.json

{
  "name": "formatting-project",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.0.0",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.3",
    "typescript": "^4.1.2",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "eslint --ext .js,.jsx,.ts,.tsx src --color",
    "format": "prettier --write 'src/**/*.{ts,tsx,scss,css,json}'",
    "isready": "npm run format && npm run lint && npm run build"
  },
  "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": {
    "@typescript-eslint/eslint-plugin": "4.15.2",
    "@typescript-eslint/parser": "4.15.2",
    "babel-eslint": "10.1.0",
    "eslint-config-airbnb": "18.2.1",
    "eslint-config-airbnb-typescript": "12.3.1",
    "eslint-config-prettier": "8.1.0",
    "eslint-config-react-app": "6.0.0",
    "eslint-import-resolver-typescript": "2.4.0",
    "eslint-loader": "4.0.2",
    "eslint-plugin-flowtype": "5.2.2",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsx-a11y": "6.4.1",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-react": "7.22.0",
    "eslint-plugin-react-hooks": "4.2.0",
    "prettier": "^2.2.1",
    "prettier-eslint": "^12.0.0",
    "prettier-eslint-cli": "^5.0.1"
  }
}

vscode/settings.json

{
  "workbench.colorTheme": "Eva Dark Bold",
  "editor.fontSize": 16,
  "editor.quickSuggestions": true,
  "files.associations": {
    "*.jsx": "javascriptreact"
  },
  "editor.insertSpaces": true,
  "editor.detectIndentation": false,
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "files.autoSave": "onFocusChange",
  "editor.multiCursorModifier": "ctrlCmd",
  "vscodeGoogleTranslate.preferredLanguage": "Russian"
}

Answer 1

Firstly, you need to put the prettier and ifint plugins in vskod. Perhaps it is in the article, but I did not see it and it is very strange.
Secondly, allow the prettier and ifnt to work with files (the window at the bottom right should be highlighted), and also make the prettier the default formatter, or like this:

"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[yaml]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

Thirdly, the triggering of a click on save is a very controversial decision, since it can change not only the design, but also the code itself, which is not always desirable, so it is better to solve such moments manually, especially since with the plugin it will highlight all errors and offer an autofix.