@d0whc3r/eslint-plugin-stencil

ESLint rules specific to Stencil JS projects.

Installation

Install the following deps in your stencil project:

npm i eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react @d0whc3r/eslint-plugin-stencil --save-dev

Usage

.eslintrc.json configuration file:

{
  "parserOptions": {
    "project": "./tsconfig.json"
  },
  "extends": [
    "plugin:@d0whc3r/stencil/recommended"
  ]
}

Add a new lint script to the package.json:

{
  "scripts": {
    "lint": "eslint src/**/*{.ts,.tsx}"
  }
}

Lint all your project:

npm run lint

Supported Rules

• @d0whc3r/stencil/async-methods

This rule catches Stencil public methods that are not async.

• @d0whc3r/stencil/ban-prefix

This rule catches Stencil Component banned tag name prefix.

• @d0whc3r/stencil/class-pattern

This rule catches Stencil Component class name not matching configurable pattern.

• @d0whc3r/stencil/decorators-context

This rule catches Stencil decorators in bad locations.

• @d0whc3r/stencil/decorators-style

This rule catches Stencil decorators style usage.

• @d0whc3r/stencil/element-type

This rule catches Stencil Element decorator have the correct type.

• @d0whc3r/stencil/host-data-deprecated

This rule catches Stencil method hostData.

• @d0whc3r/stencil/lifecycle-order

This rule catches Stencil lifecycle written order.

• @d0whc3r/stencil/methods-must-be-public

This rule catches Stencil Methods marked as private or protected.

• @d0whc3r/stencil/no-unused-watch

This rule catches Stencil Watchthys with non existing Props or States.

• @d0whc3r/stencil/own-methods-must-be-private

This rule catches own class methods marked as public.

• @d0whc3r/stencil/own-props-must-be-private

This rule catches own class properties marked as public.

• @d0whc3r/stencil/prefer-vdom-listener

This rule catches Stencil Listen with vdom events.

• @d0whc3r/stencil/props-must-be-public

This rule catches Stencil Props marked as private or protected.

• @d0whc3r/stencil/props-must-be-readonly

This rule is recommended to be "off" because it will trigger a bad autogenerated components.d.ts more details here

This rule catches Stencil Props marked as non readonly, excluding mutable ones.

• @d0whc3r/stencil/render-returns-host

This rule catches Stencil Render returning array instead of Host tag.

• @d0whc3r/stencil/required-jsdoc

This rule catches Stencil Props, Methods and Events to define jsdoc.

• @d0whc3r/stencil/required-prefix

This rule catches Stencil Component required tag name prefix.

• @d0whc3r/stencil/reserved-member-names

This rule catches Stencil Prop names that share names of Global HTML Attributes.

• @d0whc3r/stencil/single-export

This rule catches modules that expose more than just the Stencil Component itself.

• @d0whc3r/stencil/strict-mutable

This rule catches Stencil Prop marked as mutable but not changing value in code.

Recommended rules

{
  "@d0whc3r/stencil/async-methods": "error",
  "@d0whc3r/stencil/ban-prefix": ["error", ["stencil", "stnl", "st"]],
  "@d0whc3r/stencil/decorators-context": "error",
  "@d0whc3r/stencil/decorators-style": [
    "error", {
      "prop": "inline",
      "state": "inline",
      "element": "inline",
      "event": "inline",
      "method": "multiline",
      "watch": "multiline",
      "listen": "multiline"
    }],
  "@d0whc3r/stencil/element-type": "error",
  "@d0whc3r/stencil/host-data-deprecated": "error",
  "@d0whc3r/stencil/lifecycle-order": ["error", "call-order"],
  "@d0whc3r/stencil/methods-must-be-public": "error",
  "@d0whc3r/stencil/no-unused-watch": "error",
  "@d0whc3r/stencil/own-methods-must-be-private": "error",
  "@d0whc3r/stencil/own-props-must-be-private": "error",
  "@d0whc3r/stencil/prefer-vdom-listener": "error",
  "@d0whc3r/stencil/props-must-be-public": "error",
  "@d0whc3r/stencil/props-must-be-readonly": "off",
  "@d0whc3r/stencil/render-returns-host": "error",
  "@d0whc3r/stencil/required-jsdoc": "error",
  "@d0whc3r/stencil/reserved-member-names": "error",
  "@d0whc3r/stencil/single-export": "error",
  "@d0whc3r/stencil/strict-mutable": "error"
}

Contributing

When submitting new rules please:

• Describe your new rule in the README.md
• Provide a suite of unit tests for your rule
• Follow ESLint Rule guidelines (the eslint-rule yeoman generator is good for this)

All contributions welcome.

Licence

• MIT