or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

configuration.mdcore-rules.mdindex.mdjsx-rules.mdquality-rules.md
tile.json

tessl/npm-eslint-plugin-qwik

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/eslint-plugin-qwik@1.16.x

To install, run

npx @tessl/cli install tessl/npm-eslint-plugin-qwik@1.16.0

index.mddocs/

ESLint Plugin Qwik

ESLint Plugin Qwik provides comprehensive linting rules specifically designed for the Qwik framework. It includes 11 specialized rules that help developers write better Qwik code by detecting improper use of framework-specific patterns, enforcing best practices for component development, and preventing common performance pitfalls.

Package Information

  • Package Name: eslint-plugin-qwik
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install -D eslint-plugin-qwik

Core Imports

ESLint 9+ (Flat Config - Recommended)

import { qwikEslint9Plugin } from 'eslint-plugin-qwik';

Legacy ESLint (< v9)

// In extends array
'plugin:qwik/recommended'

Basic Usage

Flat Config Setup (ESLint 9+)

// eslint.config.js
import js from '@eslint/js';
import globals from 'globals';
import tseslint from 'typescript-eslint';
import { qwikEslint9Plugin } from 'eslint-plugin-qwik';

export const qwikConfig = tseslint.config(
  js.configs.recommended,
  tseslint.configs.recommended,
  qwikEslint9Plugin.configs.recommended,
  {
    files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
    languageOptions: {
      globals: {
        ...globals.serviceworker,
        ...globals.browser,
        ...globals.node,
      },
      parserOptions: {
        projectService: true,
        tsconfigRootDir: import.meta.dirname,
      },
    },
  }
);

Legacy Config (ESLint < v9)

// .eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:qwik/recommended',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    tsconfigRootDir: __dirname,
    project: ['./tsconfig.json'],
    ecmaVersion: 2021,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  plugins: ['@typescript-eslint'],
};

Architecture

ESLint Plugin Qwik is built around several key components:

  • ESLint Plugin Structure: Standard ESLint plugin with rules, configs, and metadata
  • Type-Aware Linting: Uses TypeScript compiler API for sophisticated type checking in the valid-lexical-scope rule
  • Framework-Specific Rules: Specialized rules targeting Qwik patterns like dollar functions, hooks, and JSX patterns
  • Configuration Presets: Pre-configured rule sets (recommended/strict) for different strictness levels
  • Dual Config Support: Compatible with both legacy ESLint configurations and modern flat config

Capabilities

Plugin Configuration

Core plugin exports for configuring ESLint with Qwik-specific rules and recommended settings.

// Main plugin exports
export const rules: Rules;
export const configs: Record<string, TSESLint.ClassicConfig.Config>;
export const qwikEslint9Plugin: {
  configs: {
    recommended: TSESLint.FlatConfig.ConfigArray;
    strict: TSESLint.FlatConfig.ConfigArray;
  };
  meta: {
    name: string;
    version: string;
  };
  rules: Rules;
};

// Legacy configurations
interface Rules {
  'valid-lexical-scope': Rule;
  'use-method-usage': Rule;
  'no-react-props': Rule;
  'loader-location': Rule;
  'prefer-classlist': Rule;
  'jsx-no-script-url': Rule;
  'jsx-key': Rule;
  'unused-server': Rule;
  'jsx-img': Rule;
  'jsx-a': Rule;
  'no-use-visible-task': Rule;
}

Plugin Configuration

Core Framework Rules

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

// Type-aware lexical scope validation
validLexicalScope: Rule<[{ allowAny?: boolean }]>;

// Hook usage validation  
useMethodUsage: Rule;

// Server function usage
unusedServer: Rule;

Core Framework Rules

JSX and Component Rules

Rules specifically for JSX patterns, React compatibility, and component best practices in Qwik.

// React compatibility
noReactProps: Rule;

// JSX best practices
jsxKey: Rule;
jsxImg: Rule;
jsxAtag: Rule;
jsxNoScriptUrl: Rule;

JSX and Component Rules

Code Quality Rules

Rules for enforcing Qwik-specific code quality patterns and performance optimizations.

// Qwik-specific patterns
preferClasslist: Rule;
loaderLocation: Rule;
noUseVisibleTask: Rule;

Code Quality Rules

Configuration Presets

Recommended Preset

  • Error Level: valid-lexical-scope, use-method-usage, no-react-props, unused-server
  • Warning Level: All other rules

Strict Preset

  • Error Level: All rules except no-use-visible-task
  • Warning Level: no-use-visible-task

Types

// ESLint rule type from @typescript-eslint/utils
type Rule = TSESLint.RuleModule<any, any>;

// Plugin rule collection
type Rules = NonNullable<TSESLint.FlatConfig.Plugin['rules']>;

// Legacy config type
interface Config extends TSESLint.ClassicConfig.Config {
  plugins: string[];
  rules: TSESLint.FlatConfig.Rules;
}