npm v1.0.1

@usevyre/eslint-plugin

ESLint plugin that catches invalid useVyre component usage at lint time — inline in your editor as you type. The same hallucination detection as the CLI, but integrated into your existing ESLint workflow.


Installation

npm install --save-dev @usevyre/eslint-plugin
# or
pnpm add -D @usevyre/eslint-plugin

Setup

ESLint 9+ (flat config)

// eslint.config.js
import vyrePlugin from '@usevyre/eslint-plugin';

export default [
  vyrePlugin.configs.recommended,
  // ...your other config
];

ESLint 8 (legacy config)

// .eslintrc.js
module.exports = {
  plugins: ['@usevyre'],
  extends: ['plugin:@usevyre/recommended'],
};

// or manually:
module.exports = {
  plugins: ['@usevyre'],
  rules: {
    '@usevyre/no-invalid-vyre-props': 'error',
  },
};

Rule: no-invalid-vyre-props

The plugin ships one rule that covers two categories of errors:

Invalid enum values

// ❌ ESLint error (red underline in editor)
<Button variant="blue" />
// 'blue' is not a valid value for Button variant. Valid: primary, secondary, ghost, accent, teal, danger

// ✅ Valid
<Button variant="accent" />

Hallucinated props

// ❌ ESLint error
<Badge color="green" />
// 'color' prop does not exist on Badge → Use variant= instead

// ✅ Valid
<Badge variant="success" />

Editor integration

Works with any editor that supports ESLint — VS Code (ESLint extension), WebStorm, Neovim, and more. Errors appear inline as you type, without running any CLI command.

Tip: Combine with validate-ai-context in CI for a two-layer guard — catch issues in the editor and block them in the pipeline.