vite-plugin-checker

What is vite-plugin-checker?

vite-plugin-checker is a Vite plugin that provides various types of code checking functionalities, such as TypeScript, VLS (Vetur Language Server), and ESLint. It helps developers catch errors and enforce coding standards during the development process.

What are vite-plugin-checker's main functionalities?

TypeScript Checking

This feature enables TypeScript checking in your Vite project. It ensures that TypeScript errors are caught during the development process.

import { defineConfig } from 'vite';
import Checker from 'vite-plugin-checker';

export default defineConfig({
  plugins: [
    Checker({ typescript: true })
  ]
});

VLS (Vetur Language Server) Checking

This feature integrates VLS (Vetur Language Server) checking into your Vite project, which is particularly useful for Vue.js projects. It helps catch errors and enforce coding standards for Vue components.

import { defineConfig } from 'vite';
import Checker from 'vite-plugin-checker';

export default defineConfig({
  plugins: [
    Checker({ vls: true })
  ]
});

ESLint Checking

This feature enables ESLint checking in your Vite project. It helps enforce coding standards and catch linting errors in your JavaScript/TypeScript code.

import { defineConfig } from 'vite';
import Checker from 'vite-plugin-checker';

export default defineConfig({
  plugins: [
    Checker({ eslint: { files: ['./src'] } })
  ]
});

Other packages similar to vite-plugin-checker

vite-plugin-eslint

vite-plugin-eslint is a Vite plugin that specifically focuses on integrating ESLint into your Vite project. It provides similar ESLint checking functionalities as vite-plugin-checker but does not offer TypeScript or VLS checking.

vite-plugin-ts-checker

vite-plugin-ts-checker is a Vite plugin that focuses on TypeScript type checking. It provides similar TypeScript checking functionalities as vite-plugin-checker but does not offer ESLint or VLS checking.

vite-plugin-vue

vite-plugin-vue is a Vite plugin that provides Vue.js support, including VLS (Vetur Language Server) integration. It offers similar VLS checking functionalities as vite-plugin-checker but does not provide TypeScript or ESLint checking.

README

vite-plugin-checker

A Vite plugin that can run TypeScript, VLS, vue-tsc, ESLint in worker thread.

Features

• ⚡️ Speeds up TypeScript, vue-tsc, ESLint, etc. checks by running in worker thread in serve mode
• 🍀 Works good with vanilla JS / TS, React, Vue2, Vue3
• 💬 Prompt errors in an overlay UI and terminal
• 🌗 Works both in Vite serve and build mode

History version documentations 0.1, 0.2, 0.3. It's highly recommended to use latest version before 1.0.0, although there's some breaking changes, the plugin configuration is quite simple.

Online playground

Examples	StackBlitz
Vue3 + vue-tsc	⚡️ StackBlitz
React + TypeScript	⚡️ StackBlitz
ESLint	⚡️ StackBlitz
Vue2 + VLS	⚡️ StackBlitz
Multiple	⚡️ StackBlitz

Getting Started

1. Install plugin.

   pnpm add vite-plugin-checker -D
   

2. Add plugin to Vite config file. Add the checker property you need. We add TypeScript below for example. See all available checkers here.

   // vite.config.js
   import checker from 'vite-plugin-checker'
   
   export default {
     plugins: [checker({ typescript: true })], // e.g. use TypeScript check
   }
   

3. Open localhost page and start development 🚀.

💡 Caveats:

1. It's recommended to open browser for a better terminal flush, see #27.
2. server.ws.on is introduced to Vite in 2.6.8. vite-plugin-checker relies on server.ws.on to bring diagnostics back after a full reload and it' not available for older version of Vite.

Available checkers

You can add following supported checkers. Detailed configuration for each checker is in advanced config section.

TypeScript

1. Make sure typescript is installed as a peer dependency.

2. Add typescript field to plugin config.

export default {
  plugins: [checker({ typescript: true } /** TS options */)],
}

VLS (Vetur)

1. Make sure vls is installed as a peer dependency, plugin will use vls as the check server.

   pnpm add vls -D
   

2. Add vls field to plugin config.

   module.exports = {
     plugins: [checker({ vls: true })],
   }
   

vue-tsc (Volar)

1. Make sure vue-tsc & TypeScript are installed as a peer dependency of your Vite project. The vue-tsc version must meet ^0.33.5.

   pnpm add vue-tsc typescript -D
   

2. Add vueTsc field to plugin config.

3. (Optional for Vue2 user) The type check is powered by vue-tsc so it supports Vue2 according to the documentation, you need to install @vue/runtime-dom by yourself.

   export default {
     plugins: [checker({ vueTsc: true })],
   }
   

ESLint

1. Make sure eslint is installed as a peer dependency.

2. (optional but highly recommended) Install optionator@^0.9.1 with your package manager. It's needed because of ESLint dependents on it. It's probably working fine even it's not installed as it's accessed as a phantom dependency(not recommended). But when you set hoist=false of pnpm. It won't be accessed anymore without explicit installation.

3. Add eslint field to plugin config, eslint.lintCommand is required, it's quite like the lint command of your project. The default root of the command uses Vite's root.

   export default {
     plugins: [
       checker({
         eslint: {
           lintCommand: 'eslint "./src/**/*.{ts,tsx}"', // for example, lint .ts & .tsx
         },
       }),
     ],
   }
   

Advanced configuration

Plugin can accept an object with detailed configuration.

export default {
  plugins: [checker(config /** Object config below */)],
}

Checker common config

{
  /**
   * Show overlay on UI view when there are errors or warnings in dev mode.
   * - Set `true` to show overlay
   * - Set `false` to disable overlay
   * - Set with a object to customize overlay
   *
   * @defaultValue `true`
   */
  overlay:
    | boolean
    | {
        /**
         * Set this true if you want the overlay to default to being open if errors/warnings are found
         * @defaultValue `true`
         */
        initialIsOpen?: boolean
        /**
         * The position of the vite-plugin-checker badge to open and close the diagnostics panel
         * @default `bl`
         */
        position?: 'tl' | 'tr' | 'bl' | 'br'
        /**
         * Use this to add extra style to the badge button, see details of [Svelte style](https://svelte.dev/docs#template-syntax-element-directives-style-property)
         * For example, if you want to hide the badge, you can pass `display: none;` to the badgeStyle property
         */
        badgeStyle?: string
      }
  /**
   * stdout in terminal which starts the Vite server in dev mode.
   * - Set `true` to enable
   * - Set `false` to disable
   *
   * @defaultValue `true`
   */
  terminal: boolean
  /**
   * Enable checking in build mode
   * @defaultValue `true`
   */
  enableBuild: boolean
}

---

For each checker config fields below:

• If the filed is not falsy. The corresponding checker server should be installed as a peer dependency.
• Set to true to use checker with it's default values.
• Leave the field blank or false to disable the checker.
• Enable with an advanced object config.

config.typescript

field	Type	Default value	Description
root	string	Vite config root	Root path to find tsconfig file
tsconfigPath	string	"tsconfig.json"	Relative tsconfig path to root
buildMode	boolean	false	Add --build to tsc flag, note that noEmit does NOT work if buildMode is true (#36917)

config.eslint

field	Type	Default value	Description
lintCommand	string	This value is required	lintCommand will be executed at build mode, and will also be used as default config for dev mode when eslint.dev.eslint is nullable.
dev.overrideConfig	ESLint.Options	undefined	(Only in dev mode) You can override the options of the translated from lintCommand. Config priority: const eslint = new ESLint({cwd: root, ...translatedOptions, ...pluginConfig.eslint.dev?.overrideConfig, }).
dev.logLevel	('error' | 'warning')[]	['error', 'warning']	(Only in dev mode) Which level of ESLint should be emitted to terminal and overlay in dev mode

config.vls

VLS configuration accepts the same values that can be configured in VS code with keys that start with vetur. These are configured with nested objects rather than dotted string notation. TypeScript intellisense is available.

See initParams.ts for a comprehensive list of the defaults that can be overridden. Vetur unfortunately does not provide a single comprehensive document of all its options.

For example, to performing checking only the <script> block:

checker({
  vls: {
    vetur: {
      validation: {
        template: false,
        templateProps: false,
        interpolation: false,
        style: false,
      },
    },
  },
}),

config.vueTsc

field	Type	Default value	Description
root	string	Vite config root	Root path to find tsconfig file
tsconfigPath	string	"tsconfig.json"	Relative tsconfig path to root

Playground

Run projects in playground/* to try it out.

pnpm i
pnpm run build
cd ./playground/<one_exapmple>    # choose one example
pnpm run dev                      # test in serve mode
pnpm run build                    # test in build mode

License

MIT License © 2022 fi3ework

Changelog

<small>0.4.4 (2022-03-24)</small>

• fix: add vue-tsc resolved path flag (7c4d97f)
• fix: svelte whitespace minification (c136c43)
• fix(vue-tsc): runtime error UI (6c561e8)
• build: exclude vue-tsc-typescript fixtures (740cedf)
• build: fix typescript version of vls (4769045)
• refactor: fix lint (996f6a7)
• test: add test for vue-tsc (e46d327)
• feat: support vue-tsc watch mode (6871f55)