https://github.com/github/eslint-plugin-custom-elements

A series of lint rules for best practices with Custom Elements
https://github.com/github/eslint-plugin-custom-elements

Last synced: about 1 month ago
JSON representation

A series of lint rules for best practices with Custom Elements

• Host: GitHub
• URL: https://github.com/github/eslint-plugin-custom-elements
• Owner: github
• License: mit
• Archived: true
• Created: 2021-03-10T11:24:16.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-09-18T13:44:02.000Z (about 1 year ago)
• Last Synced: 2024-09-25T21:08:13.886Z (about 1 month ago)
• Language: JavaScript
• Size: 550 KB
• Stars: 58
• Watchers: 133
• Forks: 12
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md
  • Codeowners: CODEOWNERS
  • Security: SECURITY.md

Awesome Lists containing this project

• awesome-eslint - Custom Elements - Rules by GitHub for Custom Elements. (Plugins / Frameworks)

README

        
# eslint-plugin-custom-elements (archived)

> [!WARNING]\

> This project has been merged with [eslint-plugin-wc](https://github.com/43081j/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

```sh

$ 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:

```json

{

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

}

```

### Rules

- [Define Tag After Class Definition](./docs/rules/define-tag-after-class-definition.md)

- [Expose Class on Global](./docs/rules/expose-class-on-global.md)

- [Extends Correct Class](./docs/rules/extends-correct-class.md)

- [File Name Matches Element](./docs/rules/file-name-matches-element.md)

- [No Constructor](./docs/rules/no-constructor.md)

- [No Customized Built in Elements](./docs/rules/no-customized-built-in-elements.md)

- [No DOM Traversal in Attributechangedcallback](./docs/rules/no-dom-traversal-in-attributechangedcallback.md)

- [No DOM Traversal in Connectedcallback](./docs/rules/no-dom-traversal-in-connectedcallback.md)

- [No Exports with Element](./docs/rules/no-exports-with-element.md)

- [No Method Prefixed with on](./docs/rules/no-method-prefixed-with-on.md)

- [No Unchecked Define](./docs/rules/no-unchecked-define.md)

- [One Element Per File](./docs/rules/one-element-per-file.md)

- [Tag Name Matches Class](./docs/rules/tag-name-matches-class.md)

- [Valid Tag Name](./docs/rules/valid-tag-name.md)

## Development

```

npm install

npm test

```

## License

Distributed under the MIT license. See LICENSE for details.