eslint-plugin-wc

ESLint plugin for Web Components.

Install

Assuming you already have ESLint installed, run:

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

# yarn
yarn add eslint-plugin-wc --dev

Usage

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.recommended,

  // or if you want to specify `files`, or other options
  {
    ...configs.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
    }
  }
}

Custom Configuration

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"
  }
}

Supported Rules

Possible Errors (Recommended)

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

Best Practice

• 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

Preference/convention

• 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

Recommended

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"]
}

Best Practices

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.

License

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