Security News
NIST Misses 2024 Deadline to Clear NVD Backlog
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
vite-plugin-checker
Advanced tools
Vite plugin that runs TypeScript type checker on a separate process.
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.
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'] } })
]
});
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 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 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.
A Vite plugin that can run TypeScript, VLS, vue-tsc, ESLint in worker thread.
History version documentations 0.1, 0.2, 0.3. It's highly recommended to use latest version before 1.0.0, although there's some breaking changes, the plugin configuration is quite simple.
Install plugin.
pnpm add vite-plugin-checker -D
Add it to Vite config file. Add the checker property you need. We add TypeScript below for example.
// 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 🚀.
💡 Caveats:
server.ws.on
is introduced to Vite in 2.6.8. vite-plugin-checker relies on server.ws.on
to bring diagnostics back after a full reload and it' not available for older version of Vite.You can add following supported checkers. Detailed configuration for each checker is in advanced config section.
Make sure typescript is installed as a peer dependency.
Add typescript
field to plugin config.
export default {
plugins: [checker({ typescript: true } /** TS options */)],
}
Make sure vls is installed as a peer dependency, plugin will use vls as the check server.
pnpm add vls -D
Add vls
field to plugin config.
module.exports = {
plugins: [checker({ vls: true })],
}
Only support checking in build mode since vue-tsc
doesn't support watch mode for now.
Make sure vue-tsc is installed as a peer dependency.
pnpm add vue-tsc -D
Add vueTsc
field to plugin config.
(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 })],
}
Make sure eslint is installed as a peer dependency.
Add eslint
field to plugin config, the lintCommand
is required, it's quite like the lint command of your project. The default root of the command uses Vite's root.
export default {
plugins: [
checker({
eslint: {
lintCommand: 'eslint "./src/**/*.{ts,tsx}"',
},
}),
],
}
Plugin can accept an object with detailed configuration.
export default {
plugins: [checker(config /** Object config below */)],
}
{
/**
* Show overlay on UI view when there are errors or warnings in dev mode.
* - Set `true` to show overlay
* - Set `false` to disable overlay
* - Set with a object to customize overlay
*
* @defaultValue `true`
*/
overlay:
| boolean
| {
/**
* Set this true if you want the overlay to default to being open if errors/warnings are found
* @defaultValue `true`
*/
initialIsOpen?: boolean
/**
* The position of the vite-plugin-checker badge to open and close the diagnostics panel
* @default `bl`
*/
position?: 'tl' | 'tr' | 'bl' | 'br'
/**
* Use this to add extra style to the badge button, see details of [Svelte style](https://svelte.dev/docs#template-syntax-element-directives-style-property)
* For example, if you want to hide the badge, you can pass `display: none;` to the badgeStyle property
*/
badgeStyle?: string
}
/**
* stdout in terminal which starts the Vite server in dev mode.
* - Set `true` to enable
* - Set `false` to disable
*
* @defaultValue `true`
*/
terminal: boolean
/**
* Enable checking in build mode
* @defaultValue `true`
*/
enableBuild: boolean
}
For each checker config fields below:
true
to use checker with it's default values.false
to disable the checker.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 |
buildMode | boolean | false | Add --build to tsc flag, note that noEmit does NOT work if buildMode is true (#36917) |
field | Type | Default value | Description |
---|---|---|---|
lintCommand | string | This value is required | lintCommand will be executed at build mode, and will also be used as default config for dev mode when eslint.dev.eslint is nullable. |
dev.overrideConfig | ESLint.Options | undefined | (Only in dev mode) You can override the options of the translated from lintCommand . Config priority: const eslint = new ESLint({cwd: root, ...translatedOptions, ...pluginConfig.eslint.dev?.overrideConfig, }) . |
dev.logLevel | ('error' | 'warning')[] | ['error', 'warning'] | (Only in dev mode) Which level of ESLint should be emitted to terminal and overlay in dev mode |
VLS configuration accepts the same values that can be configured in VS code with keys that start with vetur
.
These are configured with nested objects rather than dotted string notation. TypeScript intellisense is available.
See initParams.ts
for a comprehensive list of the defaults that can be overridden. Vetur unfortunately does not provide a single comprehensive document of all its options.
For example, to performing checking only the <script>
block:
checker({
vls: {
vetur: {
validation: {
template: false,
templateProps: false,
interpolation: false,
style: false,
},
},
},
}),
no available params for now.
Run projects in playground/*
to try it out.
pnpm i
pnpm run build
cd ./playground/<one_exapmple> # choose one example
pnpm run dev # test in serve mode
pnpm run build # test in build mode
MIT License © 2022 fi3ework
FAQs
Vite plugin that runs TypeScript type checker on a separate process.
The npm package vite-plugin-checker receives a total of 851,176 weekly downloads. As such, vite-plugin-checker popularity was classified as popular.
We found that vite-plugin-checker demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.