💬A Vite plugin that runs TypeScript, VLS, vue-tsc and other checkers in worker thread.

Overview

vite-plugin-checker

A Vite plugin that runs TypeScript, VLS, vue-tsc and other checkers in worker thread.

npm version downloads/month Unit Test codecov

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

screenshot

Getting Started

Install plugin.

npm i 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 checker.
npm i vite-plugin-checker-vls -D
  1. Add vls field to plugin config.
import Checker from 'vite-plugin-checker'
import { VlsChecker } from 'vite-plugin-checker-vls'

module.exports = {
  plugins: [
    Checker({
      vls: VlsChecker(/** advanced VLS options */),
    }),
  ],
}

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

config.typescript

  • Set to true to use checker with all default values
  • Leave the field blank or set to false to disable the checker
  • Enable with an object config (all object keys are optional)
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

  • type: VlsChecker instance.

e.g.

import Checker from 'vite-plugin-checker'
import { VlsChecker } from 'vite-plugin-checker-vls'

module.exports = {
  plugins: [
    Checker({
      vls: VlsChecker(/** 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

Issues
  • Vue 2 support ?

    Vue 2 support ?

    Great Works. It seems use vue-tsc or tsc, does these work for vite + vue2 ?

    enhancement 
    opened by IndexXuan 29
  • vls checker console format error

    vls checker console format error

    image also, should the error message end with \n so that the codeframe works well. line 2 was at the end of the last line right now.

    Originally posted by @IndexXuan in https://github.com/fi3ework/vite-plugin-checker/issues/7#issuecomment-863807623

    bug 
    opened by fi3ework 7
  • vite-plugin-checker-vls should use default export as other plugins do

    vite-plugin-checker-vls should use default export as other plugins do

    As mention in vite-plugin-checker readme, vite-plugin-checker-vls should have a default export

    import VlsChecker from 'vite-plugin-checker-vls'
    
    opened by angus96 5
  • vite build hangs forever

    vite build hangs forever

    After adding Checker, my vite build began to hang forever. I tried multiple different options typescript: true, vueTsc: true (with the package installed), etc.

    The build runs fine, but when it is complete, it sits forever. CI deploy waited for ~15 minutes before timing out.

    Here is an example repo with a tag at the commit where it broke:

    https://github.com/bbugh/vue-tsx-tailwind-starter/releases/tag/checker

    bug 
    opened by bbugh 4
  • mac os Error: Cannot find module 'fs/promises'

    mac os Error: Cannot find module 'fs/promises'

    mac os Error: Cannot find module 'fs/promises'

    opened by zlyyyy 4
  • fix: add

    fix: add ".cmd" suffix on windows

    Background: When npm packages install a /.bin executable on Windows they get created with a .cmd suffix, e.g. tsc.cmd

    Issue: This currently causes the plugin to fail on Windows when child_process tries to spawn tsc, since no such executable exists.

    Fix: Check for the current platform being Windows, and add the .cmd suffix when necessary.

    opened by elwynelwyn 3
  • userConfig: { overlay: false } not working.

    userConfig: { overlay: false } not working.

    https://github.com/fi3ework/vite-plugin-checker/blob/1334c1817b9e8a61ef8dd90bddbc052294ba7dd3/packages/checker-vls/src/main.ts#L14

    It seems that overlay is assigned by never use. Am I wrong ?

    bug 
    opened by IndexXuan 3
  • Add chalk dependency

    Add chalk dependency

    vite-plugin-checker is missing its chalk dependency. When using the plugin using Yarn PnP, it was complaining about that.

    opened by stephtr 2
  • ESLint support

    ESLint support

    Any plans on ESlint support?

    enhancement 
    opened by fgblomqvist 2
  • Show prompt in browser console

    Show prompt in browser console

    LGTM

    enhancement 
    opened by fi3ework 0
  • VLS checker did not watch JS/TS file change

    VLS checker did not watch JS/TS file change

    client side should implement this.lspConnection.onDidChangeWatchedFiles like vscode client does.

    VLS bug 
    opened by fi3ework 0
  • [email protected](Jul 17, 2021)

    Features

    • support ESLint
    • log absolute error source path
    • unify all checkers log format

    Bug Fixes

    • correct HMR overlay format
    • log in color

    Breaking change

    • vite-plugin-checker-vls is deprecated. You should manually install peer dependency for each checker.
    Source code(tar.gz)
    Source code(zip)
⚡ Fast Vue Language Support Extension

Volar is a Language Support plugin built specifically for Vue 3. It's based on @vue/reactivity to calculate TypeScript on-demand to optimize performance similar to the native TypeScript language service.

Johnson Chu 1.1k Jul 25, 2021
A fast Vue renderer for Notion pages

An unofficial Notion renderer Features · Install · Docs · Examples · Credits A Vue renderer for Notion pages. Use Notion as CMS for your blog, documen

Jannik 432 Jul 25, 2021
Vue 2.x component based on embed.js https://github.com/ritz078/embed.js

vue-embed Embed component is based on embed.js for Vue 2.x. Embed.js is a lightweight JavaScript plugin to embed emojis, media, maps, tweets, code and

Thomas Marrec 59 Jul 1, 2021
Custom your personal dashboard from some component

Dashboard Custom your personal dashboard from some components. Writed by Vue3, Vite, Typescript. Simple Demo from Github pages Simple Demo from author

Leon-kfd 12 Jul 23, 2021
Generates a cloud out of the words.

VueWordCloud Generates a cloud out of the words. demo Try it out! setup npm npm i vuewordcloud ES module Register the component globally. import Vue f

Sergej Sintschilin 300 Jul 22, 2021
Matteo Bruni 2.1k Jul 26, 2021
A repository to bootstrap Figma low code projects

Figma-Low-Code Figma-Low-Code is an OpenSource project, that allows to use Figma designs directly in VUE.js applications. The low code approach reduce

Klaus Schaefers 418 Jul 23, 2021
Simple calculator using Vue 3, Vite, Typescript and TailwindCSS

A simple calculator app built to explore new features on Vue 3, like the composition API, in use with Typescript, and tailwind CSS.

Lucas S. Policarpo 5 May 17, 2021
Credit card component made with Vue.js

Vue Paycard Credit card component made with Vue.js This component is based on Vue Interactive Paycard. All the credits for the component (idea, design

Igor Guastalla 57 Jul 25, 2021
💬 Responsive Vue.js comment system plugin that built with CSS Grid and Firebase REST API + Authentication. https://tugayyaldiz.github.io/vue-comment-grid

Vue.js Comment Grid Table of Contents Introduction Installation Downloading Plugin Dependencies Include Plugin Creating Firebase Project Setting Up Si

Tugay Yaldız 147 Jul 19, 2021
A complete course on Vue.js 3. Options/Composition API, Vuex + Vue Router.

Complete Vue.js 3 (Inc Options + Composition API, Vue Router and Vuex) Hi! Welcome to my course on Vue.js 3. Let's have a great time learning Vue.js 3

Lachlan Miller 18 Jul 10, 2021
An easy-to-use web installer for Android-based operating systems.

Android web installer This is an easy-to-use web installer for Android-based operating systems that runs entirely in the browser. It uses WebUSB, whic

Danny Lin 90 Jul 14, 2021
⚡ A beautiful Lanyard visualizer tool to display your Discord status online! Works with Spotify and all RPCs!

A service to see your Discord status online easy and for free with the help of the Lanyard API! To use this service, you have to be in Lanyard's Discord server so that it could monitor you, you can find the invite link in Lanyard's GitHub repository.

EGGSY 22 Jul 20, 2021
A Vue.js directive for animating an element from height: auto; to height: 0px; and vice-versa.

v-show-slide A Vue.js directive for animating an element from height: auto to height: 0px and vice-versa. ?? 3kb (1kb gzipped) ?? No dependencies ?? T

Pete Hegman 94 Jun 5, 2021