typescript | *.vue checker plugin for vite | esbuild | rollup

Features

• Speeds up TypeScript type checking
• Supports Vue Single File Component
• Displays nice error messages with the code frame formatter
• Prompt errors in Vite HMR overlay and terminal console
• Support both serve and build mode

Motivation: Vite and Esbuild are new and very fast build tools. But they do not have typescript type checking, as well as scripts in *.vue files. This plugin solves this problem. The "watch" mode is supported.

Installation

# with npm
npm install --save-dev vite-esbuild-typescript-checker

# with yarn
yarn add -D vite-esbuild-typescript-checker

Playground:

Examples of using the plugin are located in the "example" folder.

EsBuild

cd example/esbuild
yarn install
yarn start

EsBuild multiple entry points

cd example/esbuild2entry
yarn install
yarn start

Vite

cd example/vite
yarn install
yarn dev | yarn build

Vite example

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { VitePlugin }  from 'vite-esbuild-typescript-checker';

export default defineConfig(({ command, mode, ssrBuild }) => {
    return {
        plugins: [vue(), VitePlugin({
            basedir: __dirname,
            watch: command === 'serve',
            vue: {
                enabled: true
            }
        }) as PluginOption]
    }
});

Esbuild example

import * as esbuild from "esbuild";
import { nodeExternalsPlugin } from "esbuild-node-externals";
import { EsbuildPlugin } from "vite-esbuild-typescript-checker";

esbuild.build({
    tsconfig: "./src/tsconfig.json",
    target: ["esnext"],
    entryPoints: ["src/index.ts"],
    watch: false,
    bundle: true,
    minify: false,
    sourcemap: true,
    platform: "node",
    outfile: "dist/index.js",
    plugins: [
        nodeExternalsPlugin({}),
        EsbuildPlugin({
            basedir: import.meta.dirname,
            watch: false
        })
    ]
}).catch(() => process.exit(1));

License

MIT License