vite-esbuild-typescript-checker v1.0.0

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

This plugin is written based on the plugin from Type Strong for the webpack (https://github.com/TypeStrong/fork-ts-checker-webpack-plugin).

Attention! The plugin is currently being tested. Please report any problems found in the Issue.

Features

• Speeds up TypeScript type checking and ESLint linting (by moving each to a separate process) 🏎
• 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

This plugin requires minimum Node.js 10, Vite 2, EsBuild 0.12, Webpack 4, TypeScript 2.7 and optionally ESLint 6

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

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

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

All plugin settings are suitable from the webpack version, follow the link https://github.com/TypeStrong/fork-ts-checker-webpack-plugin.

Playground:

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

EsBuild

cd example/esbuild
pnpm install
pnpm start

EsBuild multiple entry points

cd example/esbuild2entry
pnpm install
pnpm start

Vite

cd example/vite
pnpm install
pnpm dev | pnpm build

Vite example

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

export default defineConfig({
    plugins: [vue(), VitePlugin({
        vite: {
            overlay: true
        },
        checker: {
            typescript: {
                extensions: {
                    vue: {
                        enabled: true,
                        compiler: '@vue/compiler-sfc'
                    }
                }
            }
        }
    })]
})

Esbuild example

const esbuild = require('esbuild');
const {nodeExternalsPlugin} = require('esbuild-node-externals');
const {EsbuildPlugin} = require('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({
            checker: {
                typescript: {
                    configFile: './src/tsconfig.json',
                    extensions: {
                        vue: {
                            enabled: true,
                            compiler: '@vue/compiler-sfc'
                        }
                    }
                }
            }
        })
    ],
}).catch(() => process.exit(1));

Credits

I express my great gratitude to TypeStrong, the author of the plugin for webpack (https://github.com/TypeStrong/fork-ts-checker-webpack-plugin).

License

MIT License