常见问题

我应该使用这个插件吗？

大多数情况下不需要。

在 Webpack 使用 stylelint-webpack-plugin 是很常见的，而这个插件在 Vite 中做着几乎一样的事情。

但是，我们的 IDE 可以直接显示相对应的校验信息。对于 VS Code，我们只需要添加 Stylelint 插件。WebStorm 已经内置了这个功能。此外，我们也可以在命令行或者 CI 中运行 Stylelint 来获取反馈。

我们有这么多方法运行 Stylelint，没有太大必要再在 Vite 中运行 Stylelint，这也就意味着我们在大多数情况下不需要这个插件。

如果你真的很需要查看错误和警告，请尝试启用 lintInWorker 选项，它保持了 Vite 的速度，并在控制台中打印信息。你也可以尝试一下社区内的 vite-plugin-checker。

缓存失效了？

删除缓存文件，手动修复错误后重启 Vite 即可。

插件运行非常慢？

默认地，插件是同步运行的，这可能会造成阻塞。请尝试启用 lintInWorker 选项，它保持了 Vite 的速度，并在控制台中打印信息。你也可以尝试一下社区内的 vite-plugin-checker，或者在 Vite 之外直接运行 Stylelint。

推荐配置？

import { defineConfig } from "vite";
import stylelint from "vite-plugin-stylelint";

export default defineConfig({
  plugins: [stylelint({
    lintInWorker: true,
    lintOnStart: true,
  })],
});

错误信息全红？

Vite 的错误遮罩层不支持显示 PluginContext.warn 信息和全色消息，还有一些限制（参见 #2076、#6274 和 #8327）。