eslint-plugin-lit


> ESLint plugin for Lit.

Install

Assuming you already have ESLint installed, run:

``sh


npm

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

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

`ts
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.

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

$3

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

`js
{
"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/quoted-expressions
- lit/value-after-constraints

Shareable configurations

$3

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

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

`js
{
"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:

`sh
npm i -D eslint-plugin-wc
`

Then extend the recommended eslint config:

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

License

MIT