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 an overlay UI and terminal console
• 🌗 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.

Getting Started

1. Install plugin.

   pnpm add vite-plugin-checker -D
   

2. Add it to Vite config file. Add the checker property you need. We add TypeScript below for example.

   // 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.

Available checkers

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

TypeScript (React / Vanilla TS)

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 */)],
}

Vue (use Vetur / VLS)

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 (use Volar / vue-tsc)

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

1. Make sure vue-tsc is installed as a peer dependency.

   pnpm add vue-tsc -D
   

2. Add vueTsc field to plugin config.

3. (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

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

2. Add eslint field to plugin config, the 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}"',
         },
       }),
     ],
   }
   

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
         * For example, if you want to want with react-query devtool, you can pass 'margin-left: 100px;' to avoid the badge overlap with the react-query's
         */
        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

no available params for now.

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