Display prettier linting errors in vite hmr overlay with svelte

Question

I have a Svelte app with Vite bundler. My linter is Eslint with Prettier and vite-plugin-svelte plugins. Linting works well, but I want to make the app show all the linting errors inside Vite hmr overlay, same way it works with syntax errors as in this picture

My question is: Is it even possible to make something like that with Vite? I found nothing helpful about Vite's hmr overlay in the documentation, or maybe I just missing something in Eslint/Prettier config?

Here is config files:

.eslintrc :

{
  "extends": ["eslint:recommended", "airbnb-base", "prettier"],
  "plugins": ["svelte3", "prettier"],
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  },
  "overrides": [
    {
      "files": ["*.svelte"],
      "processor": "svelte3/svelte3"
    }
  ],
  "parserOptions": {
    "project": "./jsconfig.json"
  },
  "rules": {
    "prefer-arrow-callback": "off",
    "arrow-body-style": "off",
    "import/prefer-default-export": "off",
    "import/no-anonymous-default-export": [
      "error",
      {
        "allowArray": true,
        "allowArrowFunction": false,
        "allowAnonymousClass": false,
        "allowAnonymousFunction": false,
        "allowCallExpression": true,
        "allowLiteral": false,
        "allowObject": true
      }
    ],
    "dot-notation": "off"
  }
}

.prettierrc.js

module.exports = {
  arrowParens: 'always',
  bracketSpacing: true,
  endOfLine: 'lf',
  printWidth: 80,
  singleQuote: true,
  tabWidth: 2,
  trailingComma: 'all',
  overrides: [
    {
      files: 'package*.json',
      options: {
        printWidth: 1000,
      },
    },
  ],
};

vite.config.js

export default defineConfig({
  plugins: [
    svelte({
      preprocess: preprocess(),
    }),
  ],
});