packages/eslint-plugin-qwik/README.md
Qwik comes with its own set of ESLint rules to help developers write better code.
Install the plugin:
npm add -D eslint-plugin-qwik
pnpm add -D eslint-plugin-qwik
yarn add -D eslint-plugin-qwik
eslint-plugin-qwikuses the tsc typechecker to type information. You must include thetsconfigRootDirin theparserOptions.
// eslint.config.js
import js from '@eslint/js';
import globals from 'globals';
import tseslint from 'typescript-eslint';
import { globalIgnores } from 'eslint/config';
import { qwikEslint9Plugin } from 'eslint-plugin-qwik';
export const qwikConfig = tseslint.config(
globalIgnores(['node_modules/*', 'dist/*', 'server/*', 'tmp/*']),
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,
},
},
}
);
eslint < 9)// .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'],
};
To ignore files, you must use the
.eslintignorefile.
| 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 `` 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. | ✔️ 🔒 |