@gorazdo/eslint-plugin-preact

Installation

You'll first need to install ESLint:

npm i eslint --save-dev
# yarn add eslint -D

Next, install @gorazdo/eslint-plugin-preact:

npm install @gorazdo/eslint-plugin-preact --save-dev
# yarn add @gorazdo/eslint-plugin-preact -D

Configuration

Add @gorazdo/preact to the plugins section of your .eslintrc configuration file. You can omit the eslint-plugin- prefix:

{
    "plugins": [
        "@gorazdo/preact"
    ]
}

Then configure the rules you want to use under the rules section.

{
    "rules": {
        "@gorazdo/preact/forbid-render-arguments": 2,
        "@gorazdo/preact/prefer-classname": 2
    }
}

Supported Rules

forbid-render-arguments

Preact allows you to consume props and state in Class-based components directly from the arguments of render() method like this: render(props, state).

Although, it is possible it has downsides:

• It is incompatible with React library;
• It is required to re-type arguments in Typescript like this: render(props: MyProps, state: MyState);
• On Typescript page of Preact docs authors of the library use this.props.

prefer-classname

Preact allows you to use class as JSX Attribute. With preact/compat it is possible to use className.

There is a great discussion why Preact uses class and React className. Although, consider the following theses:

• class is still a reserved word in Javascript, which means that the syntax is limited;
• className has a wider usage over class.