@stencil-community/eslint-plugin

@stencil-community/eslint-plugin

ESLint rules specific to Stencil JS projects.

Installation

If you're using npm v7+, you only need to install this package. Its peer dependencies will be automatically installed.

npm i --save-dev @stencil-community/eslint-plugin

If you're using npm v6 or lower, you will need to install this package and its peer dependencies in your stencil project:

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

Usage

Configuration (legacy: .eslintrc*)

.eslintrc.json configuration file:

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

Configuration (new: eslint.config.*)

The plugin exports 3 flat configs for use with eslint >= 9:

• flat.base
• flat.recommended
• flat.strict

// eslint.config.js
const stencilLint = require('@stencil-community/eslint-plugin');

module.exports = [
  ...
  stencilLint.configs.flat.recommended,
  ...
];

Alternatively:

// eslint.config.mjs
import stencilLint from '@stencil-community/eslint-plugin';

export default [
  ...
  stencilLint.configs.flat.recommended,
  ...
];

By default, ESLint will ignore your node_modules/ directory. Consider adding a .eslintignore file at the root of your project with any output target directories to avoid false positive errors from ESLint.

# place any directories created by the Stencil compilation process here
dist
loader
www

Lint all your project:

npm run lint

Supported Rules

• @stencil-community/async-methods

This rule catches Stencil public methods that are not async.

• @stencil-community/ban-default-true

This rule catches Stencil Props with a default value of true.

• @stencil-community/ban-prefix

This rule catches Stencil Component banned tag name prefix.

• @stencil-community/class-pattern

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

• @stencil-community/decorators-context

This rule catches Stencil decorators in bad locations.

• @stencil-community/decorators-style

This rule catches Stencil decorators style usage.

• @stencil-community/element-type

This rule catches Stencil Element decorator have the correct type.

• @stencil-community/host-data-deprecated

This rule catches Stencil method hostData.

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

This rule catches Stencil Methods marked as private or protected.

• @stencil-community/no-unused-watch

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

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

This rule catches own class methods marked as public.

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

This rule catches own class properties marked as public.

• @stencil-community/prefer-vdom-listener

This rule catches Stencil Listen with vdom events.

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

This rule catches Stencil Props marked as private or protected.

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

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

• @stencil-community/render-returns-host

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

• @stencil-community/required-jsdoc

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

• @stencil-community/required-prefix

This rule catches Stencil Component required tag name prefix.

• @stencil-community/reserved-member-names

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

• @stencil-community/single-export

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

• @stencil-community/strict-mutable

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

Recommended rules

{
  "@stencil-community/async-methods": "error",
  "@stencil-community/ban-prefix": ["error", ["stencil", "stnl", "st"]],
  "@stencil-community/decorators-context": "error",
  "@stencil-community/decorators-style": [
    "error", {
      "prop": "inline",
      "state": "inline",
      "element": "inline",
      "event": "inline",
      "method": "multiline",
      "watch": "multiline",
      "listen": "multiline"
    }],
  "@stencil-community/element-type": "error",
  "@stencil-community/host-data-deprecated": "error",
  "@stencil-community/methods-must-be-public": "error",
  "@stencil-community/no-unused-watch": "error",
  "@stencil-community/own-methods-must-be-private": "error",
  "@stencil-community/own-props-must-be-private": "error",
  "@stencil-community/prefer-vdom-listener": "error",
  "@stencil-community/props-must-be-public": "error",
  "@stencil-community/props-must-be-readonly": "error",
  "@stencil-community/render-returns-host": "error",
  "@stencil-community/required-jsdoc": "error",
  "@stencil-community/reserved-member-names": "error",
  "@stencil-community/single-export": "error",
  "@stencil-community/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.

License

• MIT