CODEWITHSUNDEEP
eslintsvelteprettiersvelte-3vite
Slava.In
Slava.In

Reputation: 1059

Display prettier linting errors in vite hmr overlay with svelte

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

enter image description here

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(),
    }),
  ],
});

Upvotes: 1

Views: 2417

Answers (1)

btjakes
btjakes

Reputation: 425

If it's possible to write your own vite plugin or modify the one in question, adding throw new Error(YOUR_ERROR) in the right plugin hook will trigger the overlay. e.g: modifying this example https://vitejs.dev/guide/api-plugin.html#transformindexhtml

const htmlPlugin = () => {
  return {
    name: 'html-transform',
    transformIndexHtml(html) {
      // ADD THROW LINE
      throw new Error("this will showup in an overlay")
    }
  }
}

Will lead to...

overlay

Upvotes: 1

Related Questions