eslint-plugin-lit

ESLint plugin for Lit.

Install

Assuming you already have ESLint installed, run:

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

# yarn
yarn add eslint-plugin-lit --dev

Usage

Then extend the recommended eslint config:

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

Or if you're using (flat) config files, add to your eslint.config.js:

import {configs} from 'eslint-plugin-lit';

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

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

You can also specify settings that will be shared across all the plugin rules.

{
  settings: {
    lit: {
      elementBaseClasses: ['ClassExtendingLitElement'] // Recognize `ClassExtendingLitElement` as a sub-class of LitElement
    }
  }
}

Custom Configuration

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

{
  "plugins": [
    // ...
    "lit"
  ],
  "rules": {
    // ...
    "lit/no-legacy-template-syntax": "error",
    "lit/no-template-arrow": "warn"
  }
}

List of supported rules

• lit/attribute-names
• lit/attribute-value-entities
• lit/ban-attributes
• lit/binding-positions
• lit/lifecycle-super
• lit/no-classfield-shadowing
• lit/no-duplicate-template-bindings
• lit/no-invalid-escape-sequences
• lit/no-invalid-html
• lit/no-legacy-imports
• lit/no-legacy-template-syntax
• lit/no-native-attributes
• lit/no-private-properties
• lit/no-property-change-update
• lit/no-template-arrow
• lit/no-template-bind
• lit/no-template-map
• lit/no-this-assign-in-render
• lit/no-useless-template-literals
• lit/no-value-attribute
• lit/prefer-nothing
• lit/prefer-query-decorators
• lit/prefer-static-styles
• lit/quoted-expressions
• lit/value-after-constraints

Shareable configurations

Recommended

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

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

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

Usage with eslint-plugin-wc

We highly recommend you also depend on eslint-plugin-wc as it will provide additional rules for web components in general:

npm i -D eslint-plugin-wc

Then extend the recommended eslint config:

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

License

MIT