tessl/npm-eslint-plugin-qwik

ESLint plugin providing comprehensive linting rules specifically designed for the Qwik framework with performance-focused development patterns

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Core Framework Rules

Name: tessl/npm-eslint-plugin-qwik
Author: tessl

Essential rules for Qwik framework patterns including dollar functions, hooks, and serialization validation.

Capabilities

Valid Lexical Scope

Uses the TypeScript compiler to detect capture of unserializable data in dollar ($) scopes.

/**
 * Detects capture of unserializable data in dollar ($) scopes using TypeScript type checking
 * @param options Configuration for the rule
 * @param options.allowAny Whether to allow 'any' type captures (default: true)
 */
validLexicalScope: Rule<[{ allowAny?: boolean }]>;

interface DetectorOptions {
  allowAny: boolean;
}

Rule Configuration:

Type: problem rule with TypeScript type checking
Category: Variables
Recommended: error level
Strict: error level

Options Schema:

{
  type: 'object',
  properties: {
    allowAny: {
      type: 'boolean',
      default: true
    }
  },
  additionalProperties: false
}

Error Messages:

referencesOutside: When referencing variables inside different scopes requiring serialization
invalidJsxDollar: When using functions as event handlers without proper wrapping
mutableIdentifier: When capturing mutable identifiers that can't be serialized

Usage Example:

// ❌ Invalid: capturing non-serializable closure
function component() {
  const callback = () => console.log('hello');
  
  return <button onClick$={callback} />; // Error: functions not serializable
}

// ✅ Valid: proper dollar wrapping
function component() {
  const callback = $(() => console.log('hello'));
  
  return <button onClick$={callback} />;
}

Use Method Usage

Detects invalid use of use hooks in Qwik components.

/**
 * Detects invalid use of use hooks
 * Targets CallExpression with callee.name matching /^use[A-Z]/
 */
useMethodUsage: Rule;

Rule Configuration:

Type: problem rule
Category: Variables
Recommended: error level
Strict: error level

Usage Example:

// ❌ Invalid: incorrect hook usage
function component() {
  const state = useState(); // Error: improper hook call
  return <div>{state}</div>;
}

// ✅ Valid: proper hook usage
export default component$(() => {
  const state = useSignal(0);
  return <div>{state.value}</div>;
});

Unused Server

Detects unused server$() functions in the codebase.

/**
 * Detects unused server$() functions
 */
unusedServer: Rule;

Rule Configuration:

Type: problem rule
Category: Variables
Recommended: error level
Strict: error level

Usage Example:

// ❌ Invalid: unused server function
const unusedServerFunction = server$(() => {
  return { data: 'unused' };
}); // Error: server function defined but never used

// ✅ Valid: used server function
const getServerData = server$(() => {
  return { data: 'server data' };
});

export default component$(() => {
  const serverData = useResource$(getServerData);
  return <div>{serverData.value?.data}</div>;
});

Error Handling

Common Error Patterns

Lexical Scope Violations:

Capturing DOM elements in dollar functions
Referencing non-serializable objects (functions, classes, symbols)
Using variables from outer scopes that contain unserializable data

Hook Usage Errors:

Calling hooks outside of component functions
Conditional hook calls
Hook calls in regular functions instead of component$

Server Function Issues:

Defining server$ functions that are never called
Unused imports of server functions
Dead code containing server$ calls

TypeScript Integration

The valid-lexical-scope rule requires TypeScript compiler integration:

Required Setup:

// ESLint configuration must include TypeScript parser options
parserOptions: {
  projectService: true, // or project: ['./tsconfig.json']
  tsconfigRootDir: import.meta.dirname,
}

Type Checking Process:

Rule accesses TypeScript Program from parser services
Performs type analysis on captured variables
Validates serializability based on TypeScript types
Reports violations with detailed error messages

Types

// Rule type definitions (standardized to TSESLint)  
type Rule<TOptions = any> = TSESLint.RuleModule<string, TOptions>;

// TypeScript integration types
interface DetectorOptions {
  allowAny: boolean;
}

// ESLint rule context
interface RuleContext {
  report(descriptor: ReportDescriptor): void;
  getSourceCode(): SourceCode;
  parserServices?: {
    program: ts.Program;
    esTreeNodeToTSNodeMap: WeakMap<any, ts.Node>;
  };
}

// Error reporting
interface ReportDescriptor {
  node: any;
  messageId: string;
  data?: Record<string, any>;
  fix?: (fixer: RuleFixer) => Fix | Fix[];
}