ESLint plugin for Web Components.

Assuming you already have ESLint installed, run:

# npm npm install eslint-plugin-wc --save-dev # yarn yarn add eslint-plugin-wc --dev

Then extend the recommended eslint config:

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

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

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)

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

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

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

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

• 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

• 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

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

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

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

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:

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

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

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