eslint-plugin-lit-a11y
Accessibility linting plugin for lit-html.
Most of the rules are ported from eslint-plugin-jsx-a11y.
Installation
You'll first need to install ESLint:
$ npm i eslint --save-dev
Next, install eslint-plugin-lit-a11y
:
$ npm install eslint-plugin-lit-a11y --save-dev
Note: If you installed ESLint globally (using the -g
flag) then you must also install eslint-plugin-lit-a11y
globally.
Usage
Add lit-a11y
to the plugins section of your .eslintrc
configuration file. You can omit the eslint-plugin-
prefix:
{
"plugins": ["lit-a11y"]
}
Then configure the rules you want to use under the rules section.
{
"rules": {
"lit-a11y/rule-name": 2
}
}
Configuration
You may also extend the recommended configuration like so:
{
"extends": ["plugin:lit-a11y/recommended"]
}
By default, only templates imported from 'lit-html'
or 'lit-element'
are linted. It may be the case, however, that you're importing lit-html's html
template tag function from a package that re-exports lit-html, like for example @apollo-elements/lit-apollo
does.
In this case, you can configure @apollo-elements/lit-apollo
as a valid lit-html source like so:
{
"settings": {
"litHtmlSources": ["@apollo-elements/lit-apollo"]
}
}
The reason for this check is that project may make use of multiple rendering libraries, which may have similar apis, like for example htm
, which also uses a html
tagged template literal, but handles syntax differently.
If you wish, you can disable this check by passing false
. In that case, every tagged-template-literal whose tag name is html
will be considered a lit-html template. This is not recommended in most cases.
{
"settings": {
"litHtmlSources": false
}
}
Supported Rules