vite-plugin-checker

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

Features

⚡️ Speeds up TypeScript, VLS, etc. checkers by running in worker thread in serve mode
🌈 Works good with vanilla JS / TS, React, Vue2, Vue3
❄️ Prompt errors in Vite HMR overlay and terminal console
🌗 Support both serve and build mode

History version documentations 0.1 | 0.2

Getting Started

Install plugin.

yarn add vite-plugin-checker -D

Add it to Vite config file.

// vite.config.js
import checker from 'vite-plugin-checker'

export default {
  plugins: [checker({ typescript: true })], // e.g. use TypeScript check
}

Open localhost page and start development 🚀.

It's recommended to open browser for a better terminal display, see #27.

Configuration

Detailed configuration is in advanced config section.

React / Vanilla TypeScript

Make sure typescript is installed as a peer dependency.
Add typescript field to plugin config.

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

Vue (use Vetur / VLS)

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

yarn add vls -D

Add vls field to plugin config.

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

Vue (use Volar / vue-tsc)

Only support checking in build mode since vue-tsc doesn't support watch mode for now.

Make sure vue-tsc is installed as a peer dependency.
Add vueTsc field to plugin config.
(Optional) 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

Make sure eslint is installed as a peer dependency.
Add eslint field to plugin config.

export default {
  plugins: [
    checker({
      eslint: {
        files: ['./src'],
        extensions: ['.ts'],
      },
    }),
  ],
}

Advanced config

Plugin can accept an object configuration.

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

config.overlay

field	Type	Default value	Description
overlay	`boolean`	Same as `server.hmr.overlay`	Show Vite error overlay when there's an error

config.enableBuild

field	Type	Default value	Description
enableBuild	`boolean`	`true`	Enable checking in build mode

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 a falsy value to disable the checker
Enable with an object advanced 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.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

coming soon.

field	Type	Default value	Description

config.eslint

field	Type	Default value	Description
files	`string \| string[]`	This value is required	The lint target files. This can contain any of file paths, directory paths, and glob patterns. (Details).
extensions	`string[]`	`['.js']`	Specify linted file extensions, 'extensions' must be an array of non-empty strings, e.g. `['.jsx', '.js']`. (Details).
configFile	`string`	`undefined`	Specify path to ESLint config file, if you wish to override ESLint's default configuration discovery. Equivalent to ESLint's "--config" option.
maxWarnings	`number`	`undefined`	Fail a build if there are more than this many warnings.

Playground

Run projects in playground/* to try it out.

pnpm i
npm run build
cd ./playground/<ONE_EXAMPLE>   # ts / vls / vue-tsc / vanilla ts
npm run dev                     # test serve
npm run build                   # test build

ascott18 / vite-plugin-checker