eslint-plugin-wc


> ESLint plugin for Web Components.

Install

Assuming you already have ESLint installed, run:

``sh


npm

`js
{
"extends": [
// ...
"plugin:wc/recommended"
]
}
`

Or if you're using ESLint flat configs, add this to your eslint.config.js:

`ts
import {configs} from 'eslint-plugin-wc';

export default [
configs['flat/recommended'],

// or if you want to specify files, or other options
{
...configs['flat/recommended'],
files: ['test/*/.js']
}
];
`

You should also specify settings that will be shared across all the plugin rules. (More about eslint shared settings)

`jsonc
{
"settings": {
"wc": {
"elementBaseClasses": ["LitElement"] // Recognize LitElement as a Custom Element base class
}
}
}
`

$3

If you want more fine-grained configuration, you can instead add a snippet like this to your ESLint configuration file:

`js
{
"plugins": [
// ...
"wc"
],
"rules": {
// ...
"wc/no-invalid-element-name": "error",
"wc/no-typos": "warn"
}
}
`

Supported Rules

$3

- wc/no-constructor-attributes
- wc/no-invalid-element-name
- wc/no-self-class

$3

- wc/attach-shadow-constructor
- wc/guard-super-call
- wc/no-child-traversal-in-attributechangedcallback
- wc/no-child-traversal-in-connectedcallback
- wc/no-closed-shadow-root
- wc/no-constructor-params
- wc/no-customized-built-in-elements
- wc/no-invalid-extends
- wc/no-typos
- wc/require-listener-teardown

$3

- wc/define-tag-after-class-definition
- wc/expose-class-on-global
- wc/file-name-matches-element
- wc/guard-define-call
- wc/max-elements-per-file
- wc/no-constructor
- wc/no-exports-with-element
- wc/no-method-prefixed-with-on
- wc/tag-name-matches-class

Shareable configurations

$3

This plugin exports a recommended configuration that enforces WebComponent good practices.

To enable this configuration use the extends property in your .eslintrc config file:

`js
{
"extends": ["eslint:recommended", "plugin:wc/recommended"]
}
`

$3

This plugin exports a best-practice configuration that enforces WebComponent best practices.

To enable this configuration use the extends property in your .eslintrc config file:

`js
{
"extends": ["eslint:recommended", "plugin:wc/best-practice"]
}
`

Note: These configurations will enable sourceType: 'module' in parser options.

License

eslint-plugin-wc` is licensed under the MIT License.