vite-plugin-ts-checker

vite-plugin-ts-checker

Vite plugin that runs TypeScript type checker on a separate process.

Features

• ⚡️ Out of the box
• 💚 Support Vue3 with vue-tsc (build mode only for now)
• 🚥 Vite HMR overlay
• 🎳 Serve & build mode (TypeScript)

Usage

Install

Install plugin

npm i vite-plugin-ts-checker -D

# yarn add vite-plugin-ts-checker -D
# pnpm i vite-plugin-ts-checker -D

Install peer dependencies

vite-plugin-ts-checker requires

• typescript (when checker: 'tsc')
• vue-tsc (when checker: 'vue-tsc')

to be installed as peer dependency.

Add to vite.config.js

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

export default {
  plugins: [TsChecker()],

  // or use options
  // plugins: [TsChecker({ ...options })], // see options
}

Options

export interface PluginOptions {
  /**
   * Use `"tsc"` or `"vue-tsc"`
   * @defaultValue `"tcs"`
   */
  checker: 'tsc' | 'vue-tsc'
  /**
   * Throw in build mode if has error
   * @defaultValue `true`
   */
  enableBuild: boolean
  /**
   * Show overlay when has TypeScript error
   * @defaultValue
   * Same as [Vite config](https://vitejs.dev/config/#root)
   */
  overlay: boolean
  /**
   * Root path to find tsconfig file
   * @defaultValue
   * Same as Vite https://vitejs.dev/config/#root
   */
  root: string
  /**
   * Relative tsconfig path to {@link (PluginOptions:interface).root}
   * @defaultValue `"tsconfig.json"`
   */
  tsconfigPath: string
}

Examples

Run projects in examples/* to try it out.

pnpm i
cd ./examples/<ONE_EXAMPLE>
npm run dev

Roadmap

• Support Vue2 by VLS (draft PR)
• Support project reference
• Wait for vue-tsc to support watch mode

License

MIT