eslint-plugin-qwik

Qwik comes with its own set of ESLint rules to help developers write better code.

Usage

Install the plugin:

1npm add -D eslint-plugin-qwik
2pnpm add -D eslint-plugin-qwik
3yarn add -D eslint-plugin-qwik

eslint-plugin-qwik uses the tsc typechecker to type information. You must include the tsconfigRootDir in the parserOptions.

Configurations

Flat config (recommended)

1// eslint.config.js
2import js from '@eslint/js';
3import globals from 'globals';
4import tseslint from 'typescript-eslint';
5import { globalIgnores } from 'eslint/config';
6import { qwikEslint9Plugin } from 'eslint-plugin-qwik';
7
8export const qwikConfig = tseslint.config(
9  globalIgnores(['node_modules/*', 'dist/*', 'server/*', 'tmp/*']),
10  js.configs.recommended,
11  tseslint.configs.recommended,
12  qwikEslint9Plugin.configs.recommended,
13  {
14    files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
15    languageOptions: {
16      globals: {
17        ...globals.serviceworker,
18        ...globals.browser,
19        ...globals.node,
20      },
21      parserOptions: {
22        projectService: true,
23        tsconfigRootDir: import.meta.dirname,
24      },
25    },
26  }
27);

Legacy config (eslint < 9)

1// .eslintrc.js
2module.exports = {
3  env: {
4    browser: true,
5    es2021: true,
6    node: true,
7  },
8  extends: [
9    'eslint:recommended',
10    'plugin:@typescript-eslint/recommended',
11    'plugin:qwik/recommended',
12  ],
13  parser: '@typescript-eslint/parser',
14  parserOptions: {
15    tsconfigRootDir: __dirname,
16    project: ['./tsconfig.json'],
17    ecmaVersion: 2021,
18    sourceType: 'module',
19    ecmaFeatures: {
20      jsx: true,
21    },
22  },
23  plugins: ['@typescript-eslint'],
24};

To ignore files, you must use the .eslintignore file.

List of supported rules

• Warn in 'recommended' ruleset — ✔️
• Error in 'recommended' ruleset — ✅
• Warn in 'strict' ruleset — 🔒
• Error in 'strict' ruleset — 🔐
• Typecheck — 💭

Rule	Description	Ruleset
qwik/valid-lexical-scope	Used the tsc typechecker to detect the capture of unserializable data in dollar ($) scopes.	✅ 🔐 💭
qwik/use-method-usage	Detect invalid use of use hook.	✅ 🔐
qwik/no-react-props	Disallow usage of React-specific className/htmlFor props.	✅ 🔐
qwik/loader-location	Detect declaration location of loader$.	✔️ 🔐
qwik/prefer-classlist	Enforce using the classlist prop over importing a classnames helper. The classlist prop accepts an object { [class: string]: boolean } just like classnames.	✔️ 🔐
qwik/jsx-no-script-url	Disallow javascript: URLs.	✔️ 🔐
qwik/jsx-key	Disallow missing key props in iterators/collection literals.	✔️ 🔐
qwik/unused-server	Detect unused server$() functions.	✅ 🔐
qwik/jsx-img	For performance reasons, always provide width and height attributes for <img> elements, it will help to prevent layout shifts.	✔️ 🔐
qwik/jsx-a	For a perfect SEO score, always provide href attribute for <a> elements.	✔️ 🔐
qwik/no-use-visible-task	Detect useVisibleTask$() functions.	✔️ 🔒