eslint-plugin-custom-elements (archived)

Warning

This project has been merged with eslint-plugin-wc. Please head there for updates and maintenance.

This is an ESLint Plugin to help provide best practices for writing Custom Elements aka Web Components. It provides a set of custom rules which can be enforced for files that declare classes that extend from HTMLElement.

Requirements

Node 14.x

Installation

$ npm install --save-dev eslint eslint-plugin-custom-elements

Setup

Add custom-elements to your list of plugins in your ESLint config, and enable the rules you want or just add plugin:custom-elements/recommended to the extends array.

JSON ESLint config example:

{
  "extends": ["plugin:custom-elements/recommended"]
}

Rules

Define Tag After Class Definition
Expose Class on Global
Extends Correct Class
File Name Matches Element
No Constructor
No Customized Built in Elements
No DOM Traversal in Attributechangedcallback
No DOM Traversal in Connectedcallback
No Exports with Element
No Method Prefixed with on
No Unchecked Define
One Element Per File
Tag Name Matches Class
Valid Tag Name

Development

npm install
npm test

License

Distributed under the MIT license. See LICENSE for details.