在使用 svelte 的 vite hmr 覆盖中显示更漂亮的 linting 错误答案

【问题标题】：Display prettier linting errors in vite hmr overlay with svelte在使用 svelte 的 vite hmr 覆盖中显示更漂亮的 linting 错误
【发布时间】：2022-01-09 14:34:46
【问题描述】：

我有一个带有 Vite 捆绑器的 Svelte 应用。我的 linter 是带有 Prettier 和 vite-plugin-svelte 插件的 Eslint。 linting 效果很好，但我想让应用程序在 Vite hmr 覆盖层中显示所有 linting 错误，就像这张图片中的语法错误一样

我的问题是： 甚至可以用 Vite 制作类似的东西吗？我在文档中发现 Vite 的 hmr 覆盖没有任何帮助，或者我只是在 Eslint/Prettier 配置中遗漏了一些东西？

这里是配置文件：

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

【问题讨论】：

标签： eslint svelte prettier svelte-3 vite

【解决方案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")
    }
  }
}

会导致...

【讨论】：