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 runs TypeScript, VLS, vue-tsc and other checkers in worker thread.

Features

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

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

Open localhost page and start development (it's recommended to open browser for a better terminal display, see #27).

Configuration

See detail options in advanced config section.

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

Vue (use Vetur / VLS)

1. Install vls, plugin uses vls as the check server.

yarn add vls -D

1. Add vls field to plugin config.

import checker from 'vite-plugin-checker'

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.

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

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 config fields below:

• Set to true to use checker with it's default values
• Leave the field blank or set to false to disable the checker
• Enable with an object advanced config (all keys are optional)

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

config.vls

If vls filed is not falsy. vls must be installed as a peer dependency to provide VLS needed dependencies.

field	Type	Default value	Description
todo	string	todo	todo

e.g.

import checker from 'vite-plugin-checker'

module.exports = {
  plugins: [
    checker({
      vls: {
        /** No options for now */
      },
    }),
  ],
}

config.vueTsc

• type: boolean

Playground

Run projects in playground/* to try it out.

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

License

MIT License © 2021 fi3ework