18 |
19 | [TypeScript] Found 1 error. Watching for file changes.",
20 | ]
21 | `;
22 |
--------------------------------------------------------------------------------
/playground/config-terminal-false/__tests__/__snapshots__/test.spec.ts.snap:
--------------------------------------------------------------------------------
1 | // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2 |
3 | exports[`config-terminal-false > serve > should not log into terminal 1`] = `"[{"checkerId":"ESLint","frame":" 1 | import { text } from './text'/n 2 |/n > 3 | var hello = 'Hello'/n | ^^^^^^^^^^^^^^^^^^^/n 4 |/n 5 | const rootDom = document.querySelector('#root')! as HTMLElement/n 6 | rootDom.innerHTML = hello + text","id":"
/playground-temp/config-terminal-false/src/main.ts","level":1,"loc":{"column":1,"file":"/playground-temp/config-terminal-false/src/main.ts","line":3},"message":"Unexpected var, use let or const instead. (no-var)","stack":""},{"checkerId":"ESLint","frame":" 3 | var hello = 'Hello'/n 4 |/n > 5 | const rootDom = document.querySelector('#root')! as HTMLElement/n | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^/n 6 | rootDom.innerHTML = hello + text/n 7 |/n 8 | export {}","id":"/playground-temp/config-terminal-false/src/main.ts","level":0,"loc":{"column":17,"file":"/playground-temp/config-terminal-false/src/main.ts","line":5},"message":"Forbidden non-null assertion. (@typescript-eslint/no-non-null-assertion)","stack":""}]"`;
4 |
5 | exports[`config-terminal-false > serve > should not log into terminal 2`] = `[]`;
6 |
--------------------------------------------------------------------------------
/playground/vls-vue2/__tests__/test.spec.ts:
--------------------------------------------------------------------------------
1 | import stringify from 'fast-json-stable-stringify'
2 | import { describe, expect, it } from 'vitest'
3 |
4 | import {
5 | diagnostics,
6 | editFile,
7 | expectStderrContains,
8 | isBuild,
9 | isServe,
10 | log,
11 | resetReceivedLog,
12 | sleepForEdit,
13 | sleepForServerReady,
14 | stripedLog,
15 | } from '../../testUtils'
16 |
17 | describe('vue2-vls', () => {
18 | describe.runIf(isServe)('serve', () => {
19 | it('get initial error and subsequent error', async () => {
20 | await sleepForServerReady()
21 | expect(stringify(diagnostics)).toMatchSnapshot()
22 | expect(stripedLog).toMatchSnapshot()
23 |
24 | console.log('-- edit file --')
25 | resetReceivedLog()
26 | editFile('src/components/HelloWorld.vue', (code) => code.replace('msg1', 'msg2'))
27 | await sleepForEdit()
28 |
29 | expect(stringify(diagnostics)).toMatchSnapshot()
30 | expect(stripedLog).toMatchSnapshot()
31 | })
32 | })
33 |
34 | // As per https://github.com/vuejs/vetur/issues/3686
35 | // We may remove VLS in the future to push the community to Vue 3 & Vue Language Tools.
36 | // describe.runIf(isBuild)('build', () => {
37 | // it('should fail', async () => {
38 | // expectStderrContains(log, `Property 'msg1' does not exist on type`)
39 | // })
40 | // })
41 | })
42 |
--------------------------------------------------------------------------------
/playground/config-initialIsOpen-error/__tests__/test.spec.ts:
--------------------------------------------------------------------------------
1 | import { describe, expect, it } from 'vitest'
2 |
3 | import {
4 | editFile,
5 | getHmrOverlay,
6 | getHmrOverlayText,
7 | isServe,
8 | pollingUntil,
9 | sleep,
10 | sleepForEdit,
11 | sleepForServerReady,
12 | } from '../../testUtils'
13 |
14 | describe('config-initialIsOpen-error', () => {
15 | describe.runIf(isServe)('serve', () => {
16 | it('-- should find overlay with error --', async () => {
17 | await sleepForServerReady()
18 | const [message1, file1, frame1] = await getHmrOverlayText()
19 | expect(message1).toMatchSnapshot()
20 | expect(file1).toMatchSnapshot()
21 | expect(frame1).toMatchSnapshot()
22 |
23 | console.log('-- overlay remains after fix error --')
24 | editFile('src/main.ts', (code) => code.replace('var hello', `const hello`))
25 | await sleepForEdit()
26 | await pollingUntil(getHmrOverlay, (dom) => !!dom)
27 | const [, , frame2] = await getHmrOverlayText()
28 | expect(frame2).toMatchSnapshot()
29 |
30 | console.log('-- overlay dismiss after fix warning --')
31 | editFile('src/main.ts', (code) => code.replace('! as', ` as`))
32 | await sleep(6000)
33 | await expect(getHmrOverlayText()).rejects.toThrow(
34 | 'Invariant failed: .message-body is expected in shadow root'
35 | )
36 | })
37 | })
38 | })
39 |
--------------------------------------------------------------------------------
/packages/vite-plugin-checker/src/glob.ts:
--------------------------------------------------------------------------------
1 | import { type Stats, statSync } from 'node:fs'
2 | import { join, relative, resolve } from 'node:path'
3 | import picomatch from 'picomatch'
4 |
5 | export function createIgnore(_root: string, pattern: string | string[] = []) {
6 | const paths = Array.isArray(pattern) ? pattern : [pattern]
7 | const root = _root.replace(/\\/g, '/')
8 |
9 | const globs = paths
10 | .flatMap((f) => {
11 | const resolvedPath = resolve(root, f)
12 | const relativePath = relative(root, resolvedPath).replace(/\\/g, '/')
13 | try {
14 | const isDirectory =
15 | !relativePath.includes('*') && statSync(resolvedPath).isDirectory()
16 | if (isDirectory) {
17 | return [relativePath, join(relativePath, '**/*').replace(/\\/g, '/')]
18 | }
19 | } catch {}
20 | return [relativePath]
21 | })
22 | .filter(Boolean)
23 |
24 | const matcher = picomatch(globs, { cwd: root })
25 |
26 | return (path: string, _stats?: Stats) => {
27 | if (path.includes('node_modules')) {
28 | return true
29 | }
30 | const relativePath = relative(root, path).replace(/\\/g, '/')
31 | try {
32 | return (
33 | !!relativePath &&
34 | !matcher(relativePath) &&
35 | !(_stats ?? statSync(path)).isDirectory()
36 | )
37 | } catch {
38 | // do not ignore files that have been deleted as the watcher is iterating on them
39 | return false
40 | }
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/playground/backend-integration/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/playground/config-overlay-changes/__tests__/test.spec.ts:
--------------------------------------------------------------------------------
1 | import { describe, expect, it } from 'vitest'
2 |
3 | import {
4 | editFile,
5 | getHmrOverlay,
6 | getHmrOverlayText,
7 | isServe,
8 | pollingUntil,
9 | sleep,
10 | sleepForEdit,
11 | sleepForServerReady,
12 | } from '../../testUtils'
13 |
14 | describe('config-overlay-changes', () => {
15 | describe.runIf(isServe)('serve', () => {
16 | it('get initial error from overlay and overlay error content changes on modifying', async () => {
17 | await sleepForServerReady()
18 | const [message1, file1, frame1] = await getHmrOverlayText()
19 | expect(message1).toMatchSnapshot()
20 | expect(file1).toMatchSnapshot()
21 | expect(frame1).toMatchSnapshot()
22 |
23 | console.log('-- overlay update after edit --')
24 | editFile('src/main.ts', (code) => code.replace('Hello', 'Hello1'))
25 | await sleepForEdit()
26 | await pollingUntil(getHmrOverlay, (dom) => !!dom)
27 | const [, , frame2] = await getHmrOverlayText()
28 | expect(frame2).toMatchSnapshot()
29 |
30 | console.log('-- overlay dismiss after fix error --')
31 | editFile('src/main.ts', (code) => code.replace('var hello', `const hello`))
32 | editFile('src/main.ts', (code) => code.replace('! as', ` as`))
33 | await sleep(6000)
34 | await expect(getHmrOverlayText()).rejects.toThrow(
35 | 'Invariant failed: .message-body is expected in shadow root'
36 | )
37 | })
38 | })
39 | })
40 |
--------------------------------------------------------------------------------
/playground/backend-integration/src/index.css:
--------------------------------------------------------------------------------
1 | :root {
2 | font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
3 | font-size: 16px;
4 | line-height: 24px;
5 | font-weight: 400;
6 |
7 | color-scheme: light dark;
8 | color: rgba(255, 255, 255, 0.87);
9 | background-color: #242424;
10 |
11 | font-synthesis: none;
12 | text-rendering: optimizeLegibility;
13 | -webkit-font-smoothing: antialiased;
14 | -moz-osx-font-smoothing: grayscale;
15 | -webkit-text-size-adjust: 100%;
16 | }
17 |
18 | a {
19 | font-weight: 500;
20 | color: #646cff;
21 | text-decoration: inherit;
22 | }
23 | a:hover {
24 | color: #535bf2;
25 | }
26 |
27 | body {
28 | margin: 0;
29 | place-items: center;
30 | min-width: 320px;
31 | min-height: 100vh;
32 | }
33 |
34 | h1 {
35 | font-size: 3.2em;
36 | line-height: 1.1;
37 | }
38 |
39 | button {
40 | border-radius: 8px;
41 | border: 1px solid transparent;
42 | padding: 0.6em 1.2em;
43 | font-size: 1em;
44 | font-weight: 500;
45 | font-family: inherit;
46 | background-color: #1a1a1a;
47 | cursor: pointer;
48 | transition: border-color 0.25s;
49 | }
50 | button:hover {
51 | border-color: #646cff;
52 | }
53 | button:focus,
54 | button:focus-visible {
55 | outline: 4px auto -webkit-focus-ring-color;
56 | }
57 |
58 | @media (prefers-color-scheme: light) {
59 | :root {
60 | color: #213547;
61 | background-color: #ffffff;
62 | }
63 | a:hover {
64 | color: #747bff;
65 | }
66 | button {
67 | background-color: #f9f9f9;
68 | }
69 | }
70 |
--------------------------------------------------------------------------------
/playground/config-overlay-position-style/__tests__/test.spec.ts:
--------------------------------------------------------------------------------
1 | import { sleepForServerReady, getHmrOverlay, isServe } from '../../testUtils'
2 | import { describe, expect, it } from 'vitest'
3 |
4 | describe('config-overlay-position-style', () => {
5 | describe.runIf(isServe)('serve', () => {
6 | it('find badge in right top corner and customized by badgeStyle', async () => {
7 | await sleepForServerReady()
8 | const shadowRoot = await getHmrOverlay()
9 | const badge = await shadowRoot!.$('.badge-base')
10 |
11 | const { bgColor, top, right } = await badge!.evaluate((el) => {
12 | const bgColor = window.getComputedStyle(el).getPropertyValue('background-color')
13 | const top = window.getComputedStyle(el).getPropertyValue('top')
14 | const right = window.getComputedStyle(el).getPropertyValue('right')
15 | return { bgColor, top, right }
16 | })
17 |
18 | expect(bgColor).toBe('rgb(231, 153, 176)')
19 | expect(top).toBe('0px')
20 | expect(right).toBe('0px')
21 | })
22 |
23 | it('panel be customized by panelStyle', async () => {
24 | await sleepForServerReady()
25 | const shadowRoot = await getHmrOverlay()
26 | const panel = await shadowRoot!.$('.window')
27 |
28 | const { bgColor } = await panel!.evaluate((el) => {
29 | const bgColor = window.getComputedStyle(el).getPropertyValue('background-color')
30 | return { bgColor }
31 | })
32 |
33 | expect(bgColor).toBe('rgb(164, 193, 255)')
34 | })
35 | })
36 | })
37 |
--------------------------------------------------------------------------------
/playground/eslint-default/__tests__/test.spec.ts:
--------------------------------------------------------------------------------
1 | import stringify from 'fast-json-stable-stringify'
2 | import { describe, expect, it } from 'vitest'
3 | import {
4 | diagnostics,
5 | editFile,
6 | expectStderrContains,
7 | isBuild,
8 | isServe,
9 | log,
10 | resetReceivedLog,
11 | sleepForEdit,
12 | sleepForServerReady,
13 | stripedLog,
14 | } from '../../testUtils'
15 |
16 | describe('eslint-default', () => {
17 | describe.runIf(isServe)('serve', () => {
18 | it('get initial error and subsequent error', async () => {
19 | await sleepForServerReady()
20 | expect(stringify(diagnostics)).toMatchSnapshot()
21 | expect(stripedLog).toMatchSnapshot()
22 |
23 | console.log('-- edit error file --')
24 | resetReceivedLog()
25 | editFile('src/main.ts', (code) => code.replace(`'Hello'`, `'Hello~'`))
26 | await sleepForEdit()
27 | expect(stringify(diagnostics)).toMatchSnapshot()
28 | expect(stripedLog).toMatchSnapshot()
29 |
30 | console.log('-- edit non error file --')
31 | resetReceivedLog()
32 | editFile('src/text.ts', (code) => code.replace(`Vanilla`, `vanilla`))
33 | await sleepForEdit()
34 | expect(stringify(diagnostics)).toMatchSnapshot()
35 | expect(stripedLog).toMatchSnapshot()
36 | })
37 | })
38 |
39 | describe.runIf(isBuild)('build', () => {
40 | const expectedMsg = 'Unexpected var, use let or const instead'
41 |
42 | it('should fail', async () => {
43 | expectStderrContains(log, expectedMsg)
44 | })
45 | })
46 | })
47 |
--------------------------------------------------------------------------------
/playground/multiple-hmr/src/favicon.svg:
--------------------------------------------------------------------------------
1 |
16 |
--------------------------------------------------------------------------------
/playground/typescript-react/src/favicon.svg:
--------------------------------------------------------------------------------
1 |
16 |
--------------------------------------------------------------------------------
/playground/vue-tsc-vue3/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
1 |
2 | {{ msg }}
3 |
4 |
5 | Recommended IDE setup:
6 | VSCode
7 | +
8 | Vetur
12 | or
13 | Volar
14 | (if using
15 | <script setup>)
16 |
17 |
18 | See README.md for more information.
19 |
20 |
21 | Vite Docs |
22 | Vue 3 Docs
23 |
24 |
25 |
26 |
27 | Edit
28 | components/HelloWorld.vue to test hot module replacement.
29 |
30 |
31 |
32 |
48 |
49 |
66 |
--------------------------------------------------------------------------------
/docs/introduction/getting-started.md:
--------------------------------------------------------------------------------
1 | # Getting Started
2 |
3 | 1. Install plugin (pnpm recommended 🚀).
4 |
5 | ```bash
6 | pnpm add vite-plugin-checker -D
7 | ```
8 |
9 | If you are using Yarn or NPM
10 |
11 | ```bash
12 | yarn add vite-plugin-checker -D
13 | npm i vite-plugin-checker -D
14 | ```
15 |
16 | 2. Add plugin to Vite config file and config the checker you need. We add TypeScript here as an example. See all available checkers [here](/checkers/overview).
17 |
18 | ```ts
19 | // vite.config.js
20 | import checker from 'vite-plugin-checker'
21 | export default {
22 | plugins: [
23 | checker({
24 | // e.g. use TypeScript check
25 | typescript: true,
26 | }),
27 | ],
28 | }
29 | ```
30 |
31 | ::: tip
32 | If you'd prefer to not run the checkers during unit testing with Vitest, you can alter the config based on that. Example:
33 |
34 | ```ts
35 | // vite.config.js
36 | import checker from 'vite-plugin-checker'
37 | export default {
38 | plugins: [!process.env.VITEST ? checker({ typescript: true }) : undefined],
39 | }
40 | ```
41 |
42 | :::
43 |
44 | 3. You're all set. Open localhost page and start development 🚀.
45 |
46 | ::: tip
47 | It's recommended to open a browser for a better terminal flush, see [#27](https://github.com/fi3ework/vite-plugin-checker/pull/27).
48 | :::
49 |
50 | ::: warning
51 | `server.ws.on` is introduced to Vite in [2.6.8](https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md#268-2021-10-18). vite-plugin-checker relies on `server.ws.on` to make overlay visible after opening a new browser tab.
52 | :::
53 |
--------------------------------------------------------------------------------
/packages/vite-plugin-checker/__tests__/vlsConfig.spec.ts:
--------------------------------------------------------------------------------
1 | import path from 'node:path'
2 | import { describe, expect, it } from 'vitest'
3 | import { ShutdownRequest } from 'vscode-languageserver/node'
4 | import { URI } from 'vscode-uri'
5 |
6 | import {
7 | logLevel2Severity,
8 | prepareClientConnection,
9 | } from '../src/checkers/vls/diagnostics'
10 |
11 | async function testVslConfig(overrideConfig?: any) {
12 | const workspaceUri = URI.file(path.join(__dirname, 'fixtures'))
13 | const { clientConnection, serverConnection, vls, up, down } =
14 | await prepareClientConnection(workspaceUri, logLevel2Severity.WARN, {
15 | watch: false,
16 | verbose: false,
17 | config: overrideConfig || null,
18 | })
19 |
20 | // @ts-expect-error
21 | expect(vls.workspaceConfig).toMatchSnapshot()
22 |
23 | // TODO: this test case will let Jest hang with out --forceExit option
24 | // current enable forceExit but we should find which resource is not released
25 | await clientConnection.sendRequest(ShutdownRequest.type)
26 | clientConnection.dispose()
27 | clientConnection.end()
28 | serverConnection.dispose()
29 | up.destroy()
30 | down.destroy()
31 | vls.dispose()
32 | }
33 |
34 | describe('VLS config', () => {
35 | it('default config', async () => {
36 | await testVslConfig()
37 | })
38 |
39 | it('customized config', async () => {
40 | await testVslConfig({
41 | vetur: {
42 | validation: {
43 | template: false,
44 | templateProps: false,
45 | interpolation: false,
46 | style: false,
47 | },
48 | },
49 | })
50 | })
51 | })
52 |
--------------------------------------------------------------------------------
/packages/runtime/src/ws.ts:
--------------------------------------------------------------------------------
1 | // #region
2 | // NOTE: sync modification with packages/vite-plugin-checker/client/index.ts
3 | const WS_CHECKER_ERROR_EVENT = 'vite-plugin-checker:error'
4 | const WS_CHECKER_RECONNECT_EVENT = 'vite-plugin-checker:reconnect'
5 | // #endregion
6 |
7 | const onCustomMessage: any[] = []
8 | const onReconnectMessage: any[] = []
9 |
10 | export function listenToCustomMessage(cb: (data: any) => any) {
11 | onCustomMessage.push(cb)
12 | }
13 |
14 | export function listenToReconnectMessage(cb: (data: any) => any) {
15 | onReconnectMessage.push(cb)
16 | }
17 |
18 | export function prepareListen() {
19 | const onMessage = async (data: any) => {
20 | switch (data.event) {
21 | case WS_CHECKER_ERROR_EVENT:
22 | for (const callbackfn of onCustomMessage) {
23 | callbackfn(data.data)
24 | }
25 |
26 | break
27 | case WS_CHECKER_RECONNECT_EVENT:
28 | for (const callbackfn of onReconnectMessage) {
29 | callbackfn(data.data)
30 | }
31 |
32 | break
33 | }
34 | }
35 |
36 | return {
37 | startListening: () => {
38 | if (import.meta.hot) {
39 | // listen server -> client messages
40 | import.meta.hot.on('vite-plugin-checker', (data: any) => {
41 | onMessage(data)
42 | })
43 |
44 | // told server that vite-plugin-checker runtime has loaded
45 | // then server should send stored diagnostics to display overlay
46 | // NOTE: sync modification with packages /packages/vite-plugin-checker/src/main.ts
47 | import.meta.hot.send('vite-plugin-checker', { event: 'runtime-loaded' })
48 | }
49 | },
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/playground/vue-tsc-buildmode/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
1 |
2 | {{ msg }}
3 |
4 |
5 | Recommended IDE setup:
6 | VSCode
7 | +
8 | Vetur
12 | or
13 | Volar
14 | (if using
15 | <script setup>)
16 |
17 |
18 | See README.md for more information.
19 |
20 |
21 | Vite Docs |
22 | Vue 3 Docs
23 |
24 |
25 |
26 |
27 | Edit
28 | components/HelloWorld.vue to test hot module replacement.
29 |
30 |
31 |
32 |
50 |
51 |
68 |
--------------------------------------------------------------------------------
/docs/checkers/vls.md:
--------------------------------------------------------------------------------
1 | # VLS
2 |
3 | You can use VLS checker for your Vue2 project. If you're using Vue3, choose [vue-tsc](/checkers/vue-tsc) checker.
4 |
5 | ## Installation
6 |
7 | 1. Make sure [vls](https://www.npmjs.com/package/vls) and [vti](https://www.npmjs.com/package/vti) are installed as peer dependencies, plugin will use vls on dev mode and vti on build mode.
8 |
9 | ```bash
10 | pnpm add vls vti -D
11 | ```
12 |
13 | 2. Add `vls` field to plugin config.
14 |
15 | ```js
16 | module.exports = {
17 | plugins: [checker({ vls: true })],
18 | }
19 | ```
20 |
21 | ## Configuration
22 |
23 | Advanced object configuration of `options.vls`
24 |
25 | VLS configuration accepts the same values that can be configured in VS code with keys that start with `vetur`.
26 | These are configured with nested objects rather than dotted string notation. TypeScript intellisense is available.
27 |
28 | See [`initParams.ts`](https://github.com/fi3ework/vite-plugin-checker/blob/8fc5d7f4a908a4c80d1cb978e0acf1d4e5700e6a/packages/vite-plugin-checker/src/checkers/vls/initParams.ts#L33) for a comprehensive list of the defaults that can be overridden. Unfortunately, Vetur does not provide a single comprehensive document of all its options.
29 |
30 | For example, to performing checking only the `
29 |
30 |
31 |
32 |
33 |
34 |
35 | `
36 | )
37 | res.status(200).set({ 'Content-Type': 'text/html' }).send(html)
38 | })
39 |
40 | app.use('/', createProxyMiddleware({ target: 'http://127.0.0.1:5173', changeOrigin: true }))
41 |
42 | return { app, viteDevServer }
43 | }
44 |
45 | const isTest = process.env.VITEST
46 |
47 | if (!isTest) {
48 | createServer().then(({ app, viteDevServer }) => {
49 | viteDevServer.listen()
50 | app.listen(port, () => {
51 | console.log('http://localhost:5173')
52 | })
53 | })
54 | }
55 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.yaml:
--------------------------------------------------------------------------------
1 | name: "\U0001F680 New feature proposal"
2 | description: Suggest an idea for this project
3 | body:
4 | - type: markdown
5 | attributes:
6 | value: |
7 | Thanks for your interest in the project and taking the time to fill out this feature report!
8 | - type: textarea
9 | id: feature-description
10 | attributes:
11 | label: Is your feature request related to a problem? Please describe.
12 | description: "A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]"
13 | validations:
14 | required: true
15 | - type: textarea
16 | id: suggested-solution
17 | attributes:
18 | label: Describe the solution you'd like
19 | description: A clear and concise description of what you want to happen.
20 | validations:
21 | required: true
22 | - type: textarea
23 | id: alternative
24 | attributes:
25 | label: Describe alternatives you've considered
26 | description: A clear and concise description of any alternative solutions or features you've considered.
27 | - type: textarea
28 | id: additional-context
29 | attributes:
30 | label: Additional context
31 | description: Add any other context or screenshots about the feature request here.
32 | - type: checkboxes
33 | id: checkboxes
34 | attributes:
35 | label: Validations
36 | description: Before submitting the issue, please make sure you do the following
37 | options:
38 | - label: Read the [docs](https://github.com/fi3ework/vite-plugin-checker#readme).
39 | required: true
40 | - label: Read the [Contributing Guidelines](https://github.com/fi3ework/vite-plugin-checker/blob/main/CONTRIBUTING.md).
41 | required: true
42 | - label: Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.
43 | required: true
44 |
--------------------------------------------------------------------------------
/playground/eslint-flat/__tests__/__snapshots__/test.spec.ts.snap:
--------------------------------------------------------------------------------
1 | // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2 |
3 | exports[`eslint > serve > get initial error and subsequent error 1`] = `"[{"checkerId":"ESLint","frame":" > 1 | const a = /"hello/"/n | ^/n > 2 |/n | ^","id":"/playground-temp/eslint-flat/src/index.js","level":1,"loc":{"column":18,"file":"/playground-temp/eslint-flat/src/index.js","line":1},"message":"Missing semicolon. (semi)","stack":""}]"`;
4 |
5 | exports[`eslint > serve > get initial error and subsequent error 2`] = `
6 | [
7 | " ERROR(ESLint) Missing semicolon. (semi)
8 | FILE /playground-temp/eslint-flat/src/index.js:1:18
9 |
10 | > 1 | const a = "hello"
11 | | ^
12 | > 2 |
13 | | ^
14 | ",
15 | "[ESLint] Found 1 error and 0 warning",
16 | ]
17 | `;
18 |
19 | exports[`eslint > serve > get initial error and subsequent error 3`] = `"[{"checkerId":"ESLint","frame":" > 1 | const a = /"hello/"/n | ^/n > 2 |/n | ^","id":"/playground-temp/eslint-flat/src/index.js","level":1,"loc":{"column":18,"file":"/playground-temp/eslint-flat/src/index.js","line":1},"message":"Missing semicolon. (semi)","stack":""},{"checkerId":"ESLint","frame":" > 1 | const a = /"hello/"/n | ^/n > 2 |/n | ^","id":"/playground-temp/eslint-flat/src/index.js","level":1,"loc":{"column":18,"file":"/playground-temp/eslint-flat/src/index.js","line":1},"message":"Missing semicolon. (semi)","stack":""}]"`;
20 |
21 | exports[`eslint > serve > get initial error and subsequent error 4`] = `
22 | [
23 | " ERROR(ESLint) Missing semicolon. (semi)
24 | FILE /playground-temp/eslint-flat/src/index.js:1:18
25 |
26 | > 1 | const a = "hello"
27 | | ^
28 | > 2 |
29 | | ^
30 | ",
31 | "[ESLint] Found 1 error and 0 warning",
32 | ]
33 | `;
34 |
--------------------------------------------------------------------------------
/playground/vitestGlobalSetup.ts:
--------------------------------------------------------------------------------
1 | import { rmSync } from 'node:fs'
2 | import fs from 'node:fs/promises'
3 | import os from 'node:os'
4 | import path from 'node:path'
5 | import { chromium } from 'playwright-chromium'
6 |
7 | import type { BrowserServer } from 'playwright-chromium'
8 | const DIR = path.join(os.tmpdir(), 'vitest_playwright_global_setup')
9 |
10 | let browserServer: BrowserServer | undefined
11 |
12 | export async function setup(): Promise {
13 | browserServer = await chromium.launchServer({
14 | headless: !process.env.VITE_DEBUG_SERVE,
15 | args: process.env.CI ? ['--no-sandbox', '--disable-setuid-sandbox'] : undefined,
16 | })
17 |
18 | await fs.mkdir(DIR, { recursive: true })
19 | await fs.writeFile(path.join(DIR, 'wsEndpoint'), browserServer.wsEndpoint())
20 |
21 | const tempDir = path.resolve(__dirname, '../playground-temp')
22 | await fs.rm(tempDir, { force: true, recursive: true })
23 | await fs.mkdir(tempDir, { recursive: true })
24 | await fs
25 | .cp(path.resolve(__dirname, '../playground'), tempDir, {
26 | dereference: false,
27 | recursive: true,
28 | filter(file) {
29 | const _file = file.replace(/\\/g, '/')
30 | return !_file.includes('__tests__') && !file.match(/dist(\/|$)/)
31 | },
32 | })
33 | .catch(async (error) => {
34 | if (error.code === 'EPERM' && error.syscall === 'symlink') {
35 | throw new Error(
36 | 'Could not create symlinks. On Windows, consider activating Developer Mode to allow non-admin users to create symlinks by following the instructions at https://docs.microsoft.com/en-us/windows/apps/get-started/enable-your-device-for-development.'
37 | )
38 | } else {
39 | throw error
40 | }
41 | })
42 | }
43 |
44 | export async function teardown(): Promise {
45 | browserServer?.close()
46 | if (!process.env.VITE_PRESERVE_BUILD_ARTIFACTS) {
47 | rmSync(path.resolve(__dirname, '../playground-temp'), { force: true, recursive: true })
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/docs/checkers/oxlint.md:
--------------------------------------------------------------------------------
1 | # oxlint
2 |
3 | ## Installation
4 |
5 | 1. Make sure [oxlint](https://www.npmjs.com/package/oxlint) is installed as a dependency.
6 |
7 | 2. Add `oxlint` field to plugin config. Valid options are either `true` or a configuration object.
8 |
9 | ```js
10 | // e.g.
11 | export default defineConfig({
12 | plugins: [
13 | checker({
14 | oxlint: true,
15 | // or
16 | oxlint: {
17 | lintCommand: "oxlint -D correctness",
18 | },
19 | }),
20 | ],
21 | });
22 | ```
23 |
24 | ## Configuration
25 |
26 | Advanced object configuration table of `options.oxlint`
27 |
28 | | field | Type | Default value | Description |
29 | | :----------------- | ---------------------------------------------------------------------------------------------------------- | ---------------------- |------------------------------------------------------------------------------------------------------------------------|
30 | | lintCommand | `string` | `oxlint` | `lintCommand` will be executed at build mode. |
31 | | watchPath | `string \| string[]` | `undefined` | **(Only in dev mode)** Configure path to watch files for oxlint. If not specified, will watch the entire project root. |
32 | | dev.logLevel | `('error' \| 'warning')[]` | `['error', 'warning']` | **(Only in dev mode)** Which level of oxlint should be emitted to terminal and overlay in dev mode. |
33 |
34 |
--------------------------------------------------------------------------------
/packages/vite-plugin-checker/src/checkers/stylelint/argv.ts:
--------------------------------------------------------------------------------
1 | // copied from https://github.com/jonschlinkert/is-plain-object/blob/master/is-plain-object.js
2 | // to make less breaking change, we'll make it a dependency before v1.0.0
3 |
4 | export { parseArgsStringToArgv as default, parseArgsStringToArgv }
5 | function parseArgsStringToArgv(
6 | value: string,
7 | env?: string,
8 | file?: string,
9 | ): string[] {
10 | // ([^\s'"]([^\s'"]*(['"])([^\3]*?)\3)+[^\s'"]*) Matches nested quotes until the first space outside of quotes
11 |
12 | // [^\s'"]+ or Match if not a space ' or "
13 |
14 | // (['"])([^\5]*?)\5 or Match "quoted text" without quotes
15 | // `\3` and `\5` are a backreference to the quote style (' or ") captured
16 | const myRegexp =
17 | // @ts-expect-error Bypass typescript validation
18 | // biome-ignore lint/complexity/noUselessEscapeInRegex: Bypass validation
19 | /([^\s'"]([^\s'"]*(['"])([^\3]*?)\3)+[^\s'"]*)|[^\s'"]+|(['"])([^\5]*?)\5/gi
20 | const myString = value
21 | const myArray: string[] = []
22 | if (env) {
23 | myArray.push(env)
24 | }
25 | if (file) {
26 | myArray.push(file)
27 | }
28 | let match: RegExpExecArray | null
29 | do {
30 | // Each call to exec returns the next regex match as an array
31 | match = myRegexp.exec(myString)
32 | if (match !== null) {
33 | // Index 1 in the array is the captured group if it exists
34 | // Index 0 is the matched text, which we use if no captured group exists
35 | myArray.push(firstString(match[1], match[6], match[0])!)
36 | }
37 | } while (match !== null)
38 |
39 | return myArray
40 | }
41 |
42 | // Accepts any number of arguments, and returns the first one that is a string
43 | // (even an empty string)
44 | // @ts-ignore
45 | function firstString(...args: Array): string | undefined {
46 | // eslint-disable-next-line @typescript-eslint/prefer-for-of
47 | for (let i = 0; i < args.length; i++) {
48 | const arg = args[i]
49 | if (typeof arg === 'string') {
50 | return arg
51 | }
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/packages/vite-plugin-checker/src/checkers/vueTsc/languagePlugins.cjs:
--------------------------------------------------------------------------------
1 | const path = require('node:path')
2 |
3 | const vueTscDir = path.dirname(require.resolve('vue-tsc/package.json'))
4 | const vue =
5 | /** @type {typeof import('@vue/language-core') & { resolveVueCompilerOptions?: any }} */ (
6 | require(require.resolve('@vue/language-core', { paths: [vueTscDir] }))
7 | )
8 | const windowsPathReg = /\\/g
9 |
10 | const removeEmitGlobalTypesRegexp =
11 | /^[^\n]*__VLS_globalTypesStart[\w\W]*__VLS_globalTypesEnd[^\n]*\n?$/gm
12 |
13 | /**
14 | * @param dts {string}
15 | * @returns {string}
16 | */
17 | function removeEmitGlobalTypes(dts) {
18 | return dts.replace(removeEmitGlobalTypesRegexp, '')
19 | }
20 |
21 | const getDefaultCompilerOptions =
22 | vue.getDefaultCompilerOptions || (() => vue.resolveVueCompilerOptions({}))
23 |
24 | // #region copied from https://github.com/vuejs/language-tools/blob/0781998a29f176ad52c30d3139d5c78a5688bd5d/packages/tsc/index.ts
25 | /**
26 | * @param {typeof import('typescript')} ts
27 | * @param {import('typescript').CreateProgramOptions} options
28 | */
29 | exports.getLanguagePlugins = (ts, options) => {
30 | const { configFilePath } = options.options
31 | const vueOptions =
32 | typeof configFilePath === 'string'
33 | ? vue.createParsedCommandLine(
34 | ts,
35 | ts.sys,
36 | configFilePath.replace(windowsPathReg, '/'),
37 | ).vueOptions
38 | : getDefaultCompilerOptions()
39 |
40 | if (vue.writeGlobalTypes) {
41 | vue.writeGlobalTypes(vueOptions, ts.sys.writeFile)
42 | } else {
43 | const host = /** @type {import('typescript').CompilerHost} */ (options.host)
44 | const writeFile = host.writeFile.bind(host)
45 | host.writeFile = (fileName, contents, ...args) => {
46 | return writeFile(fileName, removeEmitGlobalTypes(contents), ...args)
47 | }
48 | }
49 | const vueLanguagePlugin = vue.createVueLanguagePlugin(
50 | ts,
51 | options.options,
52 | vueOptions,
53 | (id) => id,
54 | )
55 | return [vueLanguagePlugin]
56 | }
57 | // #endregion
58 |
--------------------------------------------------------------------------------
/docs/checkers/typescript.md:
--------------------------------------------------------------------------------
1 | # TypeScript
2 |
3 | You can use TypeScript checker for vanilla TypeScript project or React project.
4 |
5 | ## Installation
6 |
7 | 1. Make sure [typescript](https://www.npmjs.com/package/typescript) is installed as a peer dependency.
8 |
9 | 2. Add `typescript` field to plugin config.
10 |
11 | ```js
12 | export default {
13 | plugins: [checker({ typescript: true /** or an object config */ })],
14 | }
15 | ```
16 |
17 | ## Configuration
18 |
19 | Advanced object configuration table of `options.typescript`.
20 |
21 | | field | Type | Default value | Description |
22 | | :----------- | --------- | ----------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
23 | | root | `string` | [Vite config](https://vitejs.dev/config/#root) `root` | Root path to find tsconfig file |
24 | | tsconfigPath | `string` | `"tsconfig.json"` | Relative tsconfig path to `root` |
25 | | buildMode | `boolean` | `false` | Add [`--build`](https://www.typescriptlang.org/docs/handbook/project-references.html) to `tsc` flag, note that `noEmit` does NOT work if `buildMode` is `true` ([#36917](https://github.com/microsoft/TypeScript/issues/36917)) |
26 |
--------------------------------------------------------------------------------
/playground/oxlint-default/__tests__/test.spec.ts:
--------------------------------------------------------------------------------
1 | import stringify from 'fast-json-stable-stringify'
2 | import { describe, expect, it } from 'vitest'
3 | import {
4 | diagnostics,
5 | editFile,
6 | expectStderrContains,
7 | isBuild,
8 | isServe,
9 | log,
10 | resetDiagnostics,
11 | resetReceivedLog,
12 | sleepForEdit,
13 | sleepForServerReady,
14 | stripedLog,
15 | } from '../../testUtils'
16 |
17 | describe('oxlint-default', () => {
18 | describe.runIf(isServe)('serve', () => {
19 | it('should display initial errors', async () => {
20 | await sleepForServerReady()
21 |
22 | expect(stringify(diagnostics)).toMatchSnapshot()
23 | expect(stripedLog).toMatchSnapshot()
24 | })
25 |
26 | it('should react to project file change', async () => {
27 | await sleepForServerReady()
28 |
29 | expect(stringify(diagnostics)).toMatchSnapshot()
30 | expect(stripedLog).toMatchSnapshot()
31 |
32 | editFile('src/main.ts', (code) =>
33 | code.replace('const unusedVariable1 = 42;', ''),
34 | )
35 | await sleepForEdit()
36 |
37 | resetReceivedLog()
38 | resetDiagnostics()
39 |
40 | expect(stringify(diagnostics)).toMatchSnapshot()
41 | expect(stripedLog).toMatchSnapshot()
42 | })
43 |
44 | it('should react to oxlint config file change', async () => {
45 | await sleepForServerReady()
46 |
47 | expect(stringify(diagnostics)).toMatchSnapshot()
48 | expect(stripedLog).toMatchSnapshot()
49 |
50 | resetReceivedLog()
51 | resetDiagnostics()
52 |
53 | editFile('.oxlintrc.json', (code) =>
54 | code.replace('"correctness": "error"', '"correctness": "warn"'),
55 | )
56 | await sleepForEdit()
57 |
58 | expect(stringify(diagnostics)).toMatchSnapshot()
59 | expect(stripedLog).toMatchSnapshot()
60 | })
61 | })
62 |
63 | describe.runIf(isBuild)('build', () => {
64 | it('should fail', async () => {
65 | expectStderrContains(
66 | log,
67 | "Variable 'unusedVariable1' is declared but never used.",
68 | )
69 | })
70 | })
71 | })
72 |
--------------------------------------------------------------------------------
/biome.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://biomejs.dev/schemas/2.1.2/schema.json",
3 | "assist": { "actions": { "source": { "organizeImports": "on" } } },
4 | "vcs": {
5 | "enabled": true,
6 | "defaultBranch": "main",
7 | "clientKind": "git",
8 | "useIgnoreFile": true
9 | },
10 | "files": {
11 | "includes": [
12 | "**",
13 | "!**/*.vue",
14 | "!**/playground",
15 | "!**/packages/vite-plugin-checker/src/checkers/eslint/options.ts",
16 | "!**/packages/vite-plugin-checker/src/checkers/stylelint/options.ts",
17 | "!**/playground/**/*/src/**/*.*"
18 | ],
19 | "ignoreUnknown": true
20 | },
21 | "formatter": {
22 | "indentStyle": "space"
23 | },
24 | "javascript": {
25 | "formatter": {
26 | "semicolons": "asNeeded",
27 | "quoteStyle": "single"
28 | }
29 | },
30 | "linter": {
31 | "enabled": true,
32 | "rules": {
33 | "recommended": true,
34 | "style": {
35 | "noNonNullAssertion": "off",
36 | "useFilenamingConvention": {
37 | "level": "error",
38 | "options": {
39 | "filenameCases": ["camelCase", "PascalCase", "export"]
40 | }
41 | },
42 | "noParameterAssign": "error",
43 | "useAsConstAssertion": "error",
44 | "useDefaultParameterLast": "error",
45 | "useEnumInitializers": "error",
46 | "useSelfClosingElements": "error",
47 | "useSingleVarDeclarator": "error",
48 | "noUnusedTemplateLiteral": "error",
49 | "useNumberNamespace": "error",
50 | "noInferrableTypes": "error",
51 | "noUselessElse": "error"
52 | },
53 | "suspicious": {
54 | "noExplicitAny": "off",
55 | "noConfusingVoidType": "off"
56 | },
57 | "performance": {
58 | "noDelete": "off"
59 | }
60 | }
61 | },
62 | "overrides": [
63 | {
64 | "includes": ["packages/runtime/src/vite-env.d.ts"],
65 | "linter": {
66 | "rules": {
67 | "style": {
68 | "useFilenamingConvention": "off"
69 | }
70 | }
71 | }
72 | }
73 | ]
74 | }
75 |
--------------------------------------------------------------------------------
/playground/config-default/__tests__/__snapshots__/test.spec.ts.snap:
--------------------------------------------------------------------------------
1 | // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2 |
3 | exports[`config-default > serve > get initial error 1`] = `"[{"checkerId":"ESLint","frame":" 1 | import { text } from './text'/n 2 |/n > 3 | var hello = 'Hello'/n | ^^^^^^^^^^^^^^^^^^^/n 4 |/n 5 | const rootDom = document.querySelector('#root')! as HTMLElement/n 6 | rootDom.innerHTML = hello + text","id":"/playground-temp/config-default/src/main.ts","level":1,"loc":{"column":1,"file":"/playground-temp/config-default/src/main.ts","line":3},"message":"Unexpected var, use let or const instead. (no-var)","stack":""},{"checkerId":"ESLint","frame":" 3 | var hello = 'Hello'/n 4 |/n > 5 | const rootDom = document.querySelector('#root')! as HTMLElement/n | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^/n 6 | rootDom.innerHTML = hello + text/n 7 |/n 8 | export {}","id":"/playground-temp/config-default/src/main.ts","level":0,"loc":{"column":17,"file":"/playground-temp/config-default/src/main.ts","line":5},"message":"Forbidden non-null assertion. (@typescript-eslint/no-non-null-assertion)","stack":""}]"`;
4 |
5 | exports[`config-default > serve > get initial error 2`] = `
6 | [
7 | " ERROR(ESLint) Unexpected var, use let or const instead. (no-var)
8 | FILE /playground-temp/config-default/src/main.ts:3:1
9 |
10 | 1 | import { text } from './text'
11 | 2 |
12 | > 3 | var hello = 'Hello'
13 | | ^^^^^^^^^^^^^^^^^^^
14 | 4 |
15 | 5 | const rootDom = document.querySelector('#root')! as HTMLElement
16 | 6 | rootDom.innerHTML = hello + text
17 | ",
18 | " WARNING(ESLint) Forbidden non-null assertion. (@typescript-eslint/no-non-null-assertion)
19 | FILE /playground-temp/config-default/src/main.ts:5:17
20 |
21 | 3 | var hello = 'Hello'
22 | 4 |
23 | > 5 | const rootDom = document.querySelector('#root')! as HTMLElement
24 | | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
25 | 6 | rootDom.innerHTML = hello + text
26 | 7 |
27 | 8 | export {}
28 | ",
29 | "[ESLint] Found 1 error and 1 warning",
30 | ]
31 | `;
32 |
--------------------------------------------------------------------------------
/docs/.vitepress/config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vitepress'
2 |
3 | export default defineConfig({
4 | lang: 'en-US',
5 | title: 'vite-plugin-checker',
6 | description:
7 | 'Vite plugin that provide checks of TypeScript, ESLint, Biome, vue-tsc, and more.',
8 | lastUpdated: true,
9 | themeConfig: {
10 | outline: 'deep',
11 | sidebar: {
12 | '/': sidebar(),
13 | },
14 | editLink: {
15 | pattern:
16 | 'https://github.com/fi3ework/vite-plugin-checker/edit/main/docs/:path',
17 | text: 'Edit this page on GitHub',
18 | },
19 | socialLinks: [
20 | {
21 | icon: 'github',
22 | link: 'https://github.com/fi3ework/vite-plugin-checker',
23 | },
24 | {
25 | icon: 'npm',
26 | link: 'https://www.npmjs.com/package/vite-plugin-checker',
27 | },
28 | ],
29 | footer: {
30 | message: 'Released under the MIT License.',
31 | copyright: 'Copyright fi3ework',
32 | },
33 | },
34 | })
35 |
36 | function sidebar() {
37 | return [
38 | {
39 | text: 'Introduction',
40 | collapsible: true,
41 | items: [
42 | { text: 'Introduction', link: '/introduction/introduction' },
43 | { text: 'Getting Started', link: '/introduction/getting-started' },
44 | ],
45 | },
46 | {
47 | text: 'Checkers',
48 | collapsible: true,
49 | items: [
50 | { text: 'Overview', link: '/checkers/overview' },
51 | { text: 'TypeScript', link: '/checkers/typescript' },
52 | { text: 'vue-tsc', link: '/checkers/vue-tsc' },
53 | { text: 'ESLint', link: '/checkers/eslint' },
54 | { text: 'Biome', link: '/checkers/biome' },
55 | { text: 'Stylelint', link: '/checkers/stylelint' },
56 | { text: 'VLS', link: '/checkers/vls' },
57 | { text: 'oxlint', link: '/checkers/oxlint' },
58 | ],
59 | },
60 | {
61 | text: 'Configuration',
62 | collapsible: true,
63 | items: [{ text: 'Shared ', link: '/configuration/config' }],
64 | },
65 | {
66 | text: 'FAQs',
67 | collapsible: true,
68 | items: [{ text: 'Integration', link: '/faq/integration' }],
69 | },
70 | ]
71 | }
72 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "version": "0.0.0",
3 | "private": true,
4 | "scripts": {
5 | "build": "pnpm -r --filter='./packages/**' run build",
6 | "build:test": "pnpm -r --filter='./packages/**' run build:test",
7 | "clean": "pnpm -r --filter='./packages/**' run clean",
8 | "dev": "pnpm -r --filter='./packages/**' --parallel run dev",
9 | "docs:build": "pnpm --filter docs run build",
10 | "docs:dev": "pnpm --filter docs run dev",
11 | "format": "biome format . --write",
12 | "postinstall": "simple-git-hooks install",
13 | "lint": "biome check . --diagnostic-level=warn",
14 | "publint": "pnpm build && pnpm -r --filter='vite-plugin-checker' exec publint",
15 | "sort-package-json": "npx sort-package-json \"packages/*/package.json\"",
16 | "test": "pnpm test-unit && pnpm test-serve && pnpm test-build",
17 | "test-build": "VITE_TEST_BUILD=1 vitest run -c vitest.config.e2e.ts",
18 | "test-knip": "knip",
19 | "test-serve": "vitest run -c vitest.config.e2e.ts",
20 | "test-unit": "vitest run",
21 | "test-unit:watch": "vitest",
22 | "type-check": "pnpm -r --parallel --filter \"vite-plugin-checker\" exec tsc --noEmit"
23 | },
24 | "simple-git-hooks": {
25 | "pre-commit": "npx lint-staged"
26 | },
27 | "lint-staged": {
28 | "package.json": "sort-package-json",
29 | "packages/**/*.{js,ts}": [
30 | "biome check --write"
31 | ]
32 | },
33 | "devDependencies": {
34 | "@biomejs/biome": "^2.1.2",
35 | "@tsconfig/node20": "^20.1.8",
36 | "@tsconfig/strictest": "^2.0.8",
37 | "@types/babel__code-frame": "^7.0.6",
38 | "@types/node": "^20.19.9",
39 | "execa": "^9.6.0",
40 | "fast-json-stable-stringify": "^2.1.0",
41 | "knip": "^5.66.3",
42 | "lint-staged": "^16.1.6",
43 | "oxlint": "^1.18.0",
44 | "pkg-pr-new": "^0.0.60",
45 | "playwright-chromium": "^1.54.2",
46 | "publint": "^0.3.15",
47 | "simple-git-hooks": "^2.13.1",
48 | "sort-deep-object-arrays": "^1.1.2",
49 | "sort-package-json": "^3.4.0",
50 | "tiny-invariant": "^1.3.3",
51 | "tinyglobby": "^0.2.15",
52 | "typescript": "^5.8.3",
53 | "vite": "^7.1.11",
54 | "vitest": "^3.2.4"
55 | },
56 | "packageManager": "pnpm@9.15.9"
57 | }
58 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | lerna-debug.log*
8 |
9 | # Diagnostic reports (https://nodejs.org/api/report.html)
10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
11 |
12 | # Runtime data
13 | pids
14 | *.pid
15 | *.seed
16 | *.pid.lock
17 |
18 | # Directory for instrumented libs generated by jscoverage/JSCover
19 | lib-cov
20 |
21 | # Coverage directory used by tools like istanbul
22 | coverage
23 | *.lcov
24 |
25 | # nyc test coverage
26 | .nyc_output
27 |
28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
29 | .grunt
30 |
31 | # Bower dependency directory (https://bower.io/)
32 | bower_components
33 |
34 | # node-waf configuration
35 | .lock-wscript
36 |
37 | # Compiled binary addons (https://nodejs.org/api/addons.html)
38 | build/Release
39 |
40 | # Dependency directories
41 | node_modules/
42 | jspm_packages/
43 |
44 | # TypeScript v1 declaration files
45 | typings/
46 |
47 | # TypeScript cache
48 | *.tsbuildinfo
49 |
50 | # Optional npm cache directory
51 | .npm
52 |
53 | # Optional eslint cache
54 | .eslintcache
55 |
56 | # Microbundle cache
57 | .rpt2_cache/
58 | .rts2_cache_cjs/
59 | .rts2_cache_es/
60 | .rts2_cache_umd/
61 |
62 | # Optional REPL history
63 | .node_repl_history
64 |
65 | # Output of 'npm pack'
66 | *.tgz
67 |
68 | # Yarn Integrity file
69 | .yarn-integrity
70 |
71 | # dotenv environment variables file
72 | .env
73 | .env.test
74 |
75 | # parcel-bundler cache (https://parceljs.org/)
76 | .cache
77 |
78 | # Next.js build output
79 | .next
80 |
81 | # Nuxt.js build / generate output
82 | .nuxt
83 | dist
84 |
85 | # Gatsby files
86 | .cache/
87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js
88 | # https://nextjs.org/blog/next-9-1#public-directory-support
89 | # public
90 |
91 | # vuepress build output
92 | .vuepress/dist
93 |
94 | # Serverless directories
95 | .serverless/
96 |
97 | # FuseBox cache
98 | .fusebox/
99 |
100 | # DynamoDB Local files
101 | .dynamodb/
102 |
103 | # TernJS port file
104 | .tern-port
105 |
106 | # JetBrains IDEs
107 | .idea
108 |
109 | #
110 | lib/
111 | playground-temp/
112 | packages/runtime/public/build/bundle.js
113 | docs/.vitepress/cache
--------------------------------------------------------------------------------
/docs/introduction/introduction.md:
--------------------------------------------------------------------------------
1 | # About vite-plugin-checker
2 |
3 | A Vite plugin that can run TypeScript, VLS, vue-tsc, ESLint,
4 | Stylelint and oxlint in worker thread to **add type checking and linting support** for Vite.
5 |
6 |
12 |
13 |
14 | 
15 |
16 |
17 | > History version documentations [0.1](https://github.com/fi3ework/vite-plugin-checker/tree/v0.1.x), [0.2](https://github.com/fi3ework/vite-plugin-checker/tree/v0.2), [0.3](https://github.com/fi3ework/vite-plugin-checker/tree/v0.3.x), [0.4](https://github.com/fi3ework/vite-plugin-checker/tree/v0.4.x/docs). It's highly recommended to use latest version before 1.0.0, although there's some breaking changes in each version bumping, the plugin configuration is quite simple.
18 |
19 | ## Online playground
20 |
21 | | Examples | StackBlitz |
22 | | ------------------ | ---------------------------------------------------------------- |
23 | | Vue3 + vue-tsc | [⚡️ StackBlitz](https://stackblitz.com/edit/vitejs-vite-e8pddl) |
24 | | React + TypeScript | [⚡️ StackBlitz](https://stackblitz.com/edit/vitejs-vite-b4zcev) |
25 | | ESLint | [⚡️ StackBlitz](https://stackblitz.com/edit/vitejs-vite-l1ritu) |
26 | | Vue2 + VLS | [⚡️ StackBlitz](https://stackblitz.com/edit/vitejs-vite-kpffk5) |
27 | | Multiple | [⚡️ StackBlitz](https://stackblitz.com/edit/vitejs-vite-mb4ea6) |
28 |
--------------------------------------------------------------------------------
/.github/workflows/sync-volar.yml:
--------------------------------------------------------------------------------
1 | name: Create issue when sync up Volar is required
2 |
3 | on:
4 | schedule:
5 | - cron: '0 0 * * *'
6 | workflow_dispatch:
7 |
8 | jobs:
9 | check_file_changes:
10 | runs-on: ubuntu-latest
11 |
12 | steps:
13 | - name: Checkout repository
14 | uses: actions/checkout@v4
15 | with:
16 | repository: 'volarjs/volar.js'
17 | fetch-depth: 0
18 |
19 | - name: Check if runTsc.ts changed in last 24 hours
20 | id: check_changes
21 | run: |
22 | CHANGED=$(git log --name-only --since="24 hours ago" --pretty=format: | sort | uniq | grep -q "packages/typescript/lib/quickstart/runTsc.ts" && echo "true" || echo "false")
23 | echo "file_changed=${CHANGED}"
24 | echo "file_changed=${CHANGED}" >> $GITHUB_OUTPUT
25 |
26 | - name: Create issue if runTsc.ts changed
27 | if: steps.check_changes.outputs.file_changed == 'true'
28 | uses: actions/github-script@v7
29 | with:
30 | github-token: ${{ secrets.GITHUB_TOKEN }}
31 | script: |
32 | const { owner, repo } = context.repo;
33 |
34 | const date = new Date();
35 | const options = { year: 'numeric', month: '2-digit', day: '2-digit' };
36 | const formattedDate = date.toLocaleDateString('en-CA', options);
37 |
38 | const issueTitle = `Volar Change Detected in Last 24 Hours (${formattedDate})`;
39 | # write new line for each line in issueBody
40 | const issueBody = "## ✨ Sync up needed\n\nThe file [`packages/typescript/lib/quickstart/runTsc.ts`](https://github.com/volarjs/volar.js/blob/master/packages/typescript/lib/quickstart/runTsc.ts) in Volar has changed in the last 24 hours.\n\nFile [`packages/vite-plugin-checker/src/checkers/vueTsc/prepareVueTsc.ts`](https://github.com/fi3ework/vite-plugin-checker/blob/main/packages/vite-plugin-checker/src/checkers/vueTsc/prepareVueTsc.ts) contains some code copied from there, please help to sync up the modification from Volar.\n\nRemember to close this issue when is sync up is finished.";
41 |
42 | await github.rest.issues.create({
43 | owner,
44 | repo,
45 | title: issueTitle,
46 | body: issueBody,
47 | labels: ['vue-tsc']
48 | });
49 |
--------------------------------------------------------------------------------
/packages/vite-plugin-checker/src/checkers/oxlint/server.ts:
--------------------------------------------------------------------------------
1 | import path from 'node:path'
2 | import chokidar from 'chokidar'
3 | import type { FileDiagnosticManager } from '../../FileDiagnosticManager.js'
4 | import { filterLogLevel } from '../../logger.js'
5 | import { runOxlint } from './cli.js'
6 | import { dispatchDiagnostics } from './diagnostics.js'
7 | import type { ResolvedOptions } from './options.js'
8 | import type { DisplayTarget } from './types'
9 |
10 | export async function setupDevServer(
11 | root: string,
12 | options: ResolvedOptions,
13 | manager: FileDiagnosticManager,
14 | displayTargets: Set,
15 | ): Promise {
16 | const initial = await runOxlint(options.command, root)
17 | manager.initWith(initial)
18 | dispatchDiagnostics(
19 | filterLogLevel(manager.getDiagnostics(), options.logLevel),
20 | displayTargets,
21 | )
22 |
23 | const watcher = chokidar.watch(options.watchTarget, {
24 | cwd: root,
25 | ignored: (path: string) => path.includes('node_modules'),
26 | })
27 |
28 | watcher.on('change', async (filePath) => {
29 | await handleFileChange(root, options.command, filePath, manager)
30 | dispatchDiagnostics(
31 | filterLogLevel(manager.getDiagnostics(), options.logLevel),
32 | displayTargets,
33 | )
34 | })
35 |
36 | watcher.on('unlink', (filePath) => {
37 | handleFileUnlink(root, filePath, manager)
38 | dispatchDiagnostics(
39 | filterLogLevel(manager.getDiagnostics(), options.logLevel),
40 | displayTargets,
41 | )
42 | })
43 |
44 | watcher.add('.')
45 | }
46 |
47 | function handleFileUnlink(
48 | root: string,
49 | filePath: string,
50 | manager: FileDiagnosticManager,
51 | ) {
52 | const absPath = path.resolve(root, filePath)
53 | manager.updateByFileId(absPath, [])
54 | }
55 |
56 | async function handleFileChange(
57 | root: string,
58 | command: string,
59 | filePath: string,
60 | manager: FileDiagnosticManager,
61 | ) {
62 | const absPath = path.resolve(root, filePath)
63 |
64 | const isConfigFile = path.basename(absPath) === '.oxlintrc.json'
65 | if (isConfigFile) {
66 | const diagnostics = await runOxlint(`${command} ${root}`, root)
67 | manager.initWith(diagnostics)
68 | } else {
69 | const diagnostics = await runOxlint(`${command} ${absPath}`, root)
70 | manager.updateByFileId(absPath, diagnostics)
71 | }
72 | }
73 |
--------------------------------------------------------------------------------
/playground/multiple-hmr/__tests__/test.spec.ts:
--------------------------------------------------------------------------------
1 | import stringify from 'fast-json-stable-stringify'
2 | import stable from 'sort-deep-object-arrays'
3 | import { describe, expect, it } from 'vitest'
4 |
5 | import {
6 | diagnostics,
7 | editFile,
8 | expectStderrContains,
9 | isBuild,
10 | isServe,
11 | resetDiagnostics,
12 | resetReceivedLog,
13 | log,
14 | sleepForEdit,
15 | sleepForServerReady,
16 | stripedLog,
17 | } from '../../testUtils'
18 |
19 | describe('multiple-hmr', () => {
20 | describe.runIf(isServe)('serve', () => {
21 | it('get initial error and subsequent error', async () => {
22 | await sleepForServerReady()
23 | expect(stringify(stable(diagnostics))).toMatchSnapshot()
24 | expect(stable(stripedLog)).toMatchSnapshot()
25 |
26 | console.log('-- edit with error --')
27 | resetDiagnostics()
28 | resetReceivedLog()
29 | editFile('src/value.ts', (code) =>
30 | code.replace('export var value: string = 1', 'export var value: string = 2')
31 | )
32 | await sleepForEdit()
33 | expect(stringify(stable(diagnostics))).toMatchSnapshot()
34 | // don't know why striped log in disorder on Linux, while correct on mac and Windows
35 | // comment out for now to pass test cases stably and striped log is duplicated with diagnostics somehow.
36 | // Need help to figure out what went wrong. 😅
37 | // expect(stripedLog).toMatchSnapshot()
38 |
39 | console.log('-- fix typescript error --')
40 | resetDiagnostics()
41 | resetReceivedLog()
42 | editFile('src/value.ts', (code) =>
43 | code.replace('export var value: string = 2', `export var value = 2`)
44 | )
45 | await sleepForEdit()
46 | expect(stringify(stable(diagnostics))).toMatchSnapshot()
47 |
48 | console.log('-- fix eslint error --')
49 | resetDiagnostics()
50 | resetReceivedLog()
51 | editFile('src/value.ts', (code) => code.replace('var', 'const'))
52 | await sleepForEdit()
53 | expect(stringify(stable(diagnostics))).toMatchSnapshot()
54 | })
55 | })
56 |
57 | describe.runIf(isBuild)('build', () => {
58 | const expectedMsg = [
59 | 'Unexpected var, use let or const instead',
60 | `error TS2322: Type 'number' is not assignable to type 'string'`,
61 | ]
62 |
63 | it('should fail', async () => {
64 | expectStderrContains(log, expectedMsg)
65 | })
66 | })
67 | })
68 |
--------------------------------------------------------------------------------
4 | 
3 | 
8 | 
9 | 
10 | 
13 |