### Setup and Development Commands

Source: https://github.com/fi3ework/vite-plugin-checker/blob/main/CONTRIBUTING.md

Ensure corepack is enabled, then install dependencies, build the project, and start the development server.

```bash
# Make sure that corepack(https://github.com/nodejs/corepack) is enabled.
corepack enable
pnpm i
pnpm build
pnpm dev
```

--------------------------------

### Install vite-plugin-checker with pnpm

Source: https://github.com/fi3ework/vite-plugin-checker/blob/main/docs/introduction/getting-started.md

Install the plugin using pnpm. This is the recommended package manager.

```bash
pnpm add vite-plugin-checker -D
```

--------------------------------

### Install vite-plugin-checker with Yarn or NPM

Source: https://github.com/fi3ework/vite-plugin-checker/blob/main/docs/introduction/getting-started.md

Install the plugin using Yarn or NPM if you are not using pnpm.

```bash
yarn add vite-plugin-checker -D
```

```bash
npm i vite-plugin-checker -D
```

--------------------------------

### Install vue-tsc and TypeScript

Source: https://github.com/fi3ework/vite-plugin-checker/blob/main/docs/checkers/vue-tsc.md

Install vue-tsc and TypeScript as development dependencies for your Vite project.

```bash
pnpm add vue-tsc@latest typescript -D
```

--------------------------------

### Configure Biome Plugin in Vite

Source: https://github.com/fi3ework/vite-plugin-checker/blob/main/docs/checkers/biome.md

Add the Biome checker plugin to your Vite configuration. Ensure @biomejs/biome is installed as a peer dependency. The 'command' option can be set to 'check'.

```javascript
export default {
  plugins: [
    checker({
      biome: {
        command: 'check',
      },
    }),
  ],
}
```

--------------------------------

### Nuxt3 Integration with Vite Plugin

Source: https://github.com/fi3ework/vite-plugin-checker/blob/main/docs/faq/integration.md

Configure vite-plugin-checker in nuxt.config.ts to use it as a normal Vite plugin. Ensure necessary devDependencies are installed.

```vue
// vite-plugin-checker.vue
<script setup>
import('/@vite-plugin-checker-runtime-entry')
</script>
```

```typescript
import { checker } from 'vite-plugin-checker'
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  vite: {
    plugins: [
      checker({
        vueTsc: true,
      }),
    ],
  },
})
```

```vue
<script setup lang="ts">
import Vpc from './vite-plugin-checker.vue'
</script>

<template>
  <!-- your app code -->
  <DevOnly>
    <ClientOnly>
      <Vpc />
    </ClientOnly>
  </DevOnly>
</template>
```

--------------------------------

### Run Development with vite-plugin-checker

Source: https://github.com/fi3ework/vite-plugin-checker/blob/main/packages/runtime/README.md

Execute this command to watch and compile bundled JS to ../vite-plugin-checker/dist/@runtime/main.js. This script is invoked when running 'pnpm dev' in the monorepo root.

```bash
pnpm dev
```

--------------------------------

### Run Local Development Commands

Source: https://github.com/fi3ework/vite-plugin-checker/blob/main/packages/runtime/README.md

Execute these commands for local development, watching and compiling code with mock diagnostics and HTML, independent of vite-plugin-checker.

```bash
pnpm dev-local
```

```bash
pnpm preview
```

--------------------------------

### Optimize Stylelint Performance

Source: https://github.com/fi3ework/vite-plugin-checker/blob/main/docs/checkers/stylelint.md

Use the watchPath option to limit file watching to specific directories, improving performance and avoiding 'EMFILE: too many open files' errors.

```js
export default {
  plugins: [
    checker({
      stylelint: {
        lintCommand: 'stylelint ./src/**/*.{css,vue}',
        // Single directory
        watchPath: './src',
        
        // Multiple directories
        // watchPath: ['./src', './components'],
      },
    }),
  ],
}
```

--------------------------------

### Configure ESLint Plugin

Source: https://github.com/fi3ework/vite-plugin-checker/blob/main/docs/checkers/eslint.md

Add the ESLint checker to your Vite configuration. Ensure the `lintCommand` is set to your project's ESLint command.

```js
export default {
  plugins: [
    checker({
      eslint: {
        // for example, lint .ts and .tsx
        lintCommand: 'eslint "./src/**/*.{ts,tsx}"',
      },
    }),
  ],
}
```

--------------------------------

### Manual Runtime Injection for Traditional Backends

Source: https://github.com/fi3ework/vite-plugin-checker/blob/main/docs/faq/integration.md

When integrating with a traditional backend, manually inject the vite-plugin-checker runtime script in development mode.

```html
<!-- if development -->
<script type="module" src="http://localhost:5173/@vite/client"></script>
<script type="module" src="http://localhost:5173/main.js"></script>
<!-- add below for vite-plugin-checker -->
<script type="module" src="http://localhost:5173/@vite-plugin-checker-runtime-entry"></script>
```

--------------------------------

### TypeScript Configuration Object

Source: https://github.com/fi3ework/vite-plugin-checker/blob/main/docs/configuration/config.md

Defines the structure for configuring vite-plugin-checker. It includes options for the UI overlay, terminal output, build mode enablement, and the root directory.

```typescript
{
  /**
   * 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
    | {
        /**
         * Whether to default the overlay to being open
         * - Set `true` to initially open if errors/warnings are found
         * - Set `error` to initially open if errors are found
         * - Set `false` to initially collapse
         * @defaultValue `true`
         */
        initialIsOpen?: boolean | 'error'
        /**
         * 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 string to the badge button, the string format is
         * [HTML element's style property](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style)
         * For example, if you want to hide the badge,
         * you can pass `display: none;` to the badgeStyle property
         * @default no default value
         */
        badgeStyle?: string
        /**
         * Use this to add extra style string to the diagnostic panel, the string format is
         * [HTML element's style property:](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style)
         * For example, if you want to change the opacity of the panel,
         * you can pass `opacity: 0.8;` to the panelStyle property
         * @default no default value
         */
        panelStyle?: 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

  /**
   * Configure root directory of checkers
   * @defaultValue no default value
   */
  root?: boolean;
}
```

--------------------------------

### Configure Stylelint Checker

Source: https://github.com/fi3ework/vite-plugin-checker/blob/main/docs/checkers/stylelint.md

Add the stylelint field to your plugin configuration and specify the lintCommand. This command is used to lint CSS and Vue files.

```js
export default {
  plugins: [
    checker({
      stylelint: {
        // for example, lint .css and .vue
        lintCommand: 'stylelint ./src/**/*.{css,vue}',
      },
    }),
  ],
}
```

--------------------------------

### ESLint Performance Optimization with watchPath

Source: https://github.com/fi3ework/vite-plugin-checker/blob/main/docs/checkers/eslint.md

Use the `watchPath` option to limit file watching to specific directories, improving performance and preventing 'EMFILE: too many open files' errors. This is particularly useful in development mode.

```js
export default {
  plugins: [
    checker({
      eslint: {
        lintCommand: 'eslint "./src/**/*.{ts,tsx}"',
        // Single directory
        watchPath: './src',
        
        // Multiple directories
        // watchPath: ['./src', './lib'],
      },
    }),
  ],
}
```

--------------------------------

### Configure Oxlint with Vite Plugin

Source: https://github.com/fi3ework/vite-plugin-checker/blob/main/docs/checkers/oxlint.md

Add the oxlint checker to your Vite configuration. You can enable it with `true` or provide a custom configuration object for specific linting commands.

```javascript
export default defineConfig({
  plugins: [
    checker({
      oxlint: true,
      // or
      oxlint: {
        lintCommand: "oxlint -D correctness",
      },
    }),
  ],
});
```

--------------------------------

### Configure TypeScript checking in Vite

Source: https://github.com/fi3ework/vite-plugin-checker/blob/main/docs/introduction/getting-started.md

Add the checker plugin to your vite.config.js and enable TypeScript checking.

```javascript
import checker from 'vite-plugin-checker'
export default {
  plugins: [
    checker({
      // e.g. use TypeScript check
      typescript: true,
    }),
  ],
}
```

--------------------------------

### Conditional Checker Configuration for Vitest

Source: https://github.com/fi3ework/vite-plugin-checker/blob/main/docs/introduction/getting-started.md

Configure the checker plugin to exclude it when running Vitest unit tests.

```javascript
import checker from 'vite-plugin-checker'
export default {
  plugins: [!process.env.VITEST ? checker({ typescript: true }) : undefined],
}
```

--------------------------------

### Add TypeScript Checker Plugin

Source: https://github.com/fi3ework/vite-plugin-checker/blob/main/docs/checkers/typescript.md

Add the TypeScript checker to your Vite configuration. This can be a simple boolean true or an object for advanced configuration.

```javascript
export default {
  plugins: [checker({ typescript: true /** or an object config */ })]
}
```

--------------------------------

### Enable vue-tsc Checker in Vite Config

Source: https://github.com/fi3ework/vite-plugin-checker/blob/main/docs/checkers/vue-tsc.md

Enable the vue-tsc checker by adding it to your Vite plugin configuration. You can pass a boolean or an object for advanced settings.

```javascript
export default {
  plugins: [checker({ vueTsc: true /** or an object config */ })],
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.