{"id":12367,"library":"vite-plugin-checker","title":"Vite Plugin Checker","description":"vite-plugin-checker is a Vite plugin designed to offload various code health checks, such as TypeScript type checking, ESLint linting, Biome formatting/linting, Stylelint, Oxlint, and Vue-specific checks (VLS, vue-tsc), into a separate worker process. This architecture prevents these potentially time-consuming checks from blocking the main Vite development server, thereby improving HMR performance and overall developer experience. The current stable version is 0.13.0, with minor releases occurring frequently to add new features, support newer versions of linters, and address bug fixes. Its key differentiators include its multi-tool support, its use of worker threads for performance, and its integration with Vite's overlay for displaying issues. It's an essential tool for maintaining code quality in large Vite projects, especially those using TypeScript or Vue.js.","status":"active","version":"0.13.0","language":"javascript","source_language":"en","source_url":"https://github.com/fi3ework/vite-plugin-checker","tags":["javascript","vite","vite-plugin","typescript"],"install":[{"cmd":"npm install vite-plugin-checker","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-checker","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-checker","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Optional: Required for Biome linting/formatting.","package":"@biomejs/biome","optional":true},{"reason":"Optional: Required for ESLint linting.","package":"eslint","optional":true},{"reason":"Peer dependency for CLI parsing.","package":"meow","optional":false},{"reason":"Peer dependency for option parsing.","package":"optionator","optional":false},{"reason":"Optional: Required for Oxlint linting.","package":"oxlint","optional":true},{"reason":"Optional: Required for Stylelint checking.","package":"stylelint","optional":true},{"reason":"Optional: Required for TypeScript type checking.","package":"typescript","optional":true},{"reason":"Core dependency for Vite plugin functionality.","package":"vite","optional":false},{"reason":"Optional: Required for Vue 2 Language Server checks.","package":"vls","optional":true},{"reason":"Optional: Required for Vue Template Interpolation checks.","package":"vti","optional":true},{"reason":"Optional: Required for Vue 3 TypeScript checks.","package":"vue-tsc","optional":true}],"imports":[{"note":"The `checker` function is the main export. Since v0.9.0, only ESM imports are supported.","wrong":"const checker = require('vite-plugin-checker')","symbol":"checker","correct":"import { checker } from 'vite-plugin-checker'"},{"note":"When configuring in `vite.config.ts`, you typically import `UserConfig` from `vite` itself, not the plugin.","symbol":"UserConfig","correct":"import type { UserConfig } from 'vite'"},{"note":"CheckerOptions is a type for configuring the plugin. Use `import type` for type-only imports to prevent bundling issues and improve tree-shaking.","wrong":"import { CheckerOptions } from 'vite-plugin-checker'","symbol":"CheckerOptions","correct":"import type { CheckerOptions } from 'vite-plugin-checker'"}],"quickstart":{"code":"import { defineConfig } from 'vite';\nimport vue from '@vitejs/plugin-vue';\nimport { checker } from 'vite-plugin-checker';\n\nexport default defineConfig({\n  plugins: [\n    vue(),\n    checker({\n      typescript: true, // Enable TypeScript type checking\n      eslint: {\n        lintCommand: 'eslint \"./src/**/*.{js,jsx,ts,tsx,vue}\"', // ESLint command\n      },\n      // biome: {\n      //   lintCommand: 'biome check --write --no-errors-on-unmatched --files-ignore-unknown=true .',\n      // },\n      // stylelint: {\n      //   lintCommand: 'stylelint \"./src/**/*.{css,scss,vue}\"',\n      // },\n      // vueTsc: true, // Enable vue-tsc if using Vue 3\n    }),\n  ],\n  server: {\n    // Optional: Configure the server to display overlay for errors\n    overlay: {\n      initialIsOpen: false,\n      // Make sure the checker overlay doesn't conflict with Vite's own overlay\n    },\n  },\n});","lang":"typescript","description":"This quickstart demonstrates how to integrate `vite-plugin-checker` into a Vite project with Vue and TypeScript, enabling both TypeScript type checking and ESLint linting. It shows the basic configuration for adding the plugin to `vite.config.ts`."},"warnings":[{"fix":"Ensure your `vite.config.js` or `vite.config.ts` uses ESM syntax (e.g., `import` statements) and your `package.json` specifies `\"type\": \"module\"` or uses `.mjs` files for configuration if needed.","message":"The plugin dropped support for CommonJS (CJS) usage. Projects must use ES Modules (ESM) for importing and configuring the plugin.","severity":"breaking","affected_versions":">=0.9.0"},{"fix":"Ensure your Node.js version meets the minimum requirement (`>=16.11`). Update `vite-plugin-checker` and related dependencies to their latest compatible versions.","message":"The internal dependency `strip-ansi` was replaced with Node's built-in functionality. While this is unlikely to directly break user code, it signals an internal refactor that might have subtle impacts or require specific Node.js versions.","severity":"breaking","affected_versions":">=0.11.0"},{"fix":"Always install peer dependencies explicitly at compatible versions. Refer to `package.json`'s `peerDependencies` range or the plugin's documentation for the exact compatible versions.","message":"Requires specific versions of peer dependencies like `@biomejs/biome`, `eslint`, `stylelint`, `typescript`, `vite`, `vue-tsc`, etc. Mismatched versions can lead to errors or the checker not functioning correctly.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Review any custom file watching configurations you might have. If issues arise, consult `chokidar`'s v4 migration guide and `vite-plugin-checker`'s documentation. Ensure `vite-plugin-checker` is updated to a version compatible with your `chokidar` setup, or let the plugin manage `chokidar` versions.","message":"Upgrade to `chokidar v4` introduced potential breaking changes due to how file watching is handled. This might affect performance or specific watch configurations.","severity":"breaking","affected_versions":">=0.9.0"},{"fix":"If upgrading ESLint to v10, ensure all your ESLint configurations and plugins are also compatible with v10. Consult the ESLint v10 migration guide. Update `vite-plugin-checker` to version 0.13.0 or newer for official support.","message":"ESLint v10.x introduced breaking changes. While `vite-plugin-checker` adds support for ESLint v10.x, older configurations or ESLint plugins might not be compatible.","severity":"gotcha","affected_versions":">=0.13.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Migrate your Vite configuration file (`vite.config.js` or `vite.config.ts`) to use ES module syntax (`import ... from '...'`). Ensure `package.json` has `\"type\": \"module\"` if not using `.mjs` file extension.","cause":"Attempting to use `require()` to import `vite-plugin-checker` in a CommonJS context.","error":"Error: require() of ES Module ... is not supported. Instead change the require of ... to a dynamic import()"},{"fix":"Verify ESLint is installed (`npm install -D eslint`). Check your `.eslintrc.*` configuration. Ensure the `lintCommand` in `vite-plugin-checker` accurately targets your source files (e.g., `eslint \"./src/**/*.{js,jsx,ts,tsx,vue}\"`).","cause":"ESLint is either not installed, not configured, or the `lintCommand` in `checker` options is incorrect or points to non-existent files.","error":"No ESLint output found. Please make sure ESLint is configured correctly."},{"fix":"Install TypeScript (`npm install -D typescript`). Ensure a `tsconfig.json` file exists in your project root with correct configuration.","cause":"TypeScript is not installed in the project or `typescript: true` is enabled in checker options without a valid `tsconfig.json`.","error":"TypeScript checker is not running. Did you install `typescript`?"},{"fix":"Ensure `vue-tsc` is installed (`npm install -D vue-tsc`). Check the `peerDependencies` of `vite-plugin-checker` for compatible `vue-tsc` versions. Try enabling `vueTsc: true` in the checker options.","cause":"Incompatible versions of `vue-tsc` and `vite-plugin-checker`, or incorrect configuration for `vue-tsc`.","error":"TypeError: Cannot read properties of undefined (reading 'Diagnostics') when using `vue-tsc`."},{"fix":"Ensure all ESLint/Stylelint/Biome configurations and their respective plugins are correctly installed as dev dependencies. For example, `npm install -D eslint-config-prettier` if that's the missing piece. Double-check your config files (`.eslintrc`, `.stylelintrc`, `biome.json`) for correct `extends` paths.","cause":"A common issue where ESLint or other linters cannot find their required configurations or plugins, often due to missing installations or incorrect paths.","error":"ERROR: Failed to load config \"prettier\" from \"eslint-config-prettier\""}],"ecosystem":"npm"}