使用 svelte 在 vite hmr overlay 中显示更漂亮的 linting 错误

Question

我有一个带有 Vite 捆绑器的 Svelte 应用程序。我的 linter 是 Eslint，带有 Prettier 和 vite-plugin-svelte 插件。 Linting 运行良好，但我想让应用程序显示 Vite hmr overlay 中的所有 linting 错误，与此图片中处理语法错误的方式相同

我的问题是：是否可以用 Vite 制作类似的东西？我在文档中发现 Vite 的 hmr overlay 没有任何帮助，或者我只是在 Eslint/Prettier config?

中遗漏了一些东西

这是配置文件：

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

Answer 1

如果可以编写自己的 vite 插件或修改有问题的插件，在正确的插件挂钩中添加 throw new Error(YOUR_ERROR) 将触发覆盖。例如：修改这个例子 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")
    }
  }
}

会导致...

使用 svelte 在 vite hmr overlay 中显示更漂亮的 linting 错误

Display prettier linting errors in vite hmr overlay with svelte

eslint

svelte

prettier

svelte-3

vite

使用 svelte 在 vi​​te hmr overlay 中显示更漂亮的 linting 错误

Display prettier linting errors in vite hmr overlay with svelte

eslint

svelte

prettier

svelte-3

vite

使用 svelte 在 vite hmr overlay 中显示更漂亮的 linting 错误