Neighborly Package Megalodon

    vite-plugin-checker
    TypeScript icon, indicating that this package has built-in type declarations

    0.3.4 • Public • Published

    vite-plugin-checker

    A Vite plugin that can run TypeScript, VLS, vue-tsc, ESLint in worker thread.

    npm version downloads/month Unit Test codecov

    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 Vite HMR overlay and terminal console
    • 🌗 Support both serve and build mode

    screenshot

    History version documentations 0.1 | 0.2

    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 })], // e.g. use TypeScript check
    }

    Open localhost page and start development 🚀.

    It's recommended to open browser for a better terminal display, see #27.

    Configuration

    Detailed configuration is 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. Make sure vls is installed as a peer dependency, plugin will use vls as the check server.
    yarn add vls -D
    1. 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.

    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.

    export default {
      plugins: [
        checker({
          eslint: {
            files: ['./src'],
            extensions: ['.ts'],
          },
        }),
      ],
    }

    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 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 a falsy value to disable the checker
    • Enable with an object advanced 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

    config.vls

    coming soon.

    field Type Default value Description

    config.vueTsc

    coming soon.

    field Type Default value Description

    config.eslint

    field Type Default value Description
    files string | string[] This value is required The lint target files. This can contain any of file paths, directory paths, and glob patterns. (Details).
    extensions string[] ['.js'] Specify linted file extensions, 'extensions' must be an array of non-empty strings, e.g. ['.jsx', '.js']. (Details).

    Playground

    Run projects in playground/* to try it out.

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

    License

    MIT License © 2021 fi3ework

    Install

    npm i vite-plugin-checker

    DownloadsWeekly Downloads

    3,491

    Version

    0.3.4

    License

    MIT

    Unpacked Size

    99.6 kB

    Total Files

    44

    Last publish

    Collaborators

    • fi3ework