repository·main·Indexed 22 days ago
https://github.com/fi3ework/vite-plugin-checkerA Vite plugin that offloads type-checking and linting to a worker thread to maintain dev server responsiveness. It supports TypeScript, vue-tsc, ESLint, Biome, Stylelint, and oxlint. The plugin provides a browser UI overlay for displaying diagnostics and allows for advanced configuration of each checker, including custom lint commands and watch paths to optimize performance.
vite-plugin-checker is a Vite plugin designed to run type-checking and linting tools in a separate worker thread. This prevents the main Vite development server thread from being blocked by heavy processes.
Supported tools include:
vue-tsc, ESLint, Stylelint, and oxlint in a separate worker thread. This approach ensures that the heavy lifting of type checking and linting does not block the main Vite development server, maintaining a fast and responsive development experience.The plugin provides built-in support for several type-checking and linting tools. Currently supported checkers include:
Note that each checker may require specific peer dependencies to function correctly. Refer to the individual checker documentation pages for installation requirements.
The @vite-plugin-checker/runtime package contains the runtime code required for vite-plugin-checker to function.
Note: This package is not released to NPM independently. It is automatically bundled into the main vite-plugin-checker package during the build process. You should not attempt to install this package directly via a package manager.
To use vite-plugin-checker with Nuxt3 and enable the global error overlay, follow these steps (requires version 0.5.5 or higher):
vite-plugin-checker, typescript, vue-tsc, and @types/node to your project's devDependencies.vite-plugin-checker.vue that imports the runtime entry point:<script setup>
import('/@vite-plugin-checker-runtime-entry')
</script>vite.plugins array in your nuxt.config.ts.<DevOnly> and <ClientOnly> tags to ensure it only runs in the browser during development.// 1. vite-plugin-checker.vue
<script setup>
import('/@vite-plugin-checker-runtime-entry')
</script>
// 2. nuxt.config.ts
import { checker } from 'vite-plugin-checker'
export default defineNuxtConfig({
vite: {
plugins: [
checker({
vueTsc: true,
}),
],
},
})
// 3. Root component (e.g., app.vue)
<script setup lang="ts">
import Vpc from './vite-plugin-checker.vue'
</script>
<template>
<DevOnly>
<ClientOnly>
<Vpc />
</ClientOnly>
</DevOnly>
</template>To use oxlint with vite-plugin-checker, you must first ensure that oxlint is installed as a dependency in your project. Once installed, enable it by adding the oxlint field to your checker plugin configuration. You can either set it to true to use the default settings or provide a configuration object for advanced control.
// e.g.
export default defineConfig({
plugins: [
checker({
oxlint: true,
// or
oxlint: {
lintCommand: "oxlint -D correctness",
},
}),
],
});Install the plugin as a development dependency using your preferred package manager.
pnpm add vite-plugin-checker -D
# Or using Yarn
yarn add vite-plugin-checker -D
# Or using NPM
npm i vite-plugin-checker -DYou can enable type-checking using Nuxt's built-in functionality (refer to the nuxi typecheck command in Nuxt documentation).
Warning: Using this method will not display the error overlay in the browser. This is a known limitation currently being addressed.
Add the checker plugin to your vite.config.js (or .ts) file. You must specify which checker you want to run (e.g., typescript: true).
To avoid running checkers during unit testing with Vitest, you can conditionally include the plugin using an environment variable check.
// Standard configuration with TypeScript enabled
import checker from 'vite-plugin-checker'
export default {
plugins: [
checker({
// e.g. use TypeScript check
typescript: true,
}),
],
}If you encounter EMFILE: too many open files errors or want to improve performance during development, use the watchPath option. This limits the file watching scope to specific directories instead of the entire project root. This option is only applicable in dev mode.
export default {
plugins: [
checker({
eslint: {
lintCommand: 'eslint "./src/**/*.{ts,tsx}"',
// Single directory
watchPath: './src',
// Multiple directories
// watchPath: ['./src', './lib'],
},
}),
],
}If you encounter EMFILE: too many open files errors or want to improve performance, use the watchPath option. This limits file watching to specific directories instead of watching the entire project root. This option is only active in dev mode.
export default {
plugins: [
checker({
stylelint: {
lintCommand: 'stylelint ./src/**/*.{css,vue}',
// Single directory
watchPath: './src',
// Multiple directories
// watchPath: ['./src', './components'],
},
}),
],
}To enable a checker in your Vite configuration, use the corresponding property in the vite-plugin-checker plugin options. You have three ways to configure them:
true. This uses the checker with its default settings (Note: this does not apply to eslint and stylelint, which require specific configuration).false or leave the field blank to ensure the checker is not used.Important: You must manually install the peer dependencies required by the checker you are enabling.