Repository navigation
v0.25.0
The language server now checks your templates the way lit-analyzer does, and
goes past it: lit-devtools check type-checks every binding with your own
TypeScript, and the editor runs the same check when you save. Unknown tags,
attributes, properties and slots, bindings Lit reads differently than
written, misplaced directives and mistakes in a component's declarations are
reported as you type, in Lit templates and for custom elements in JSX,
Astro, MDX and HTML, and fail an Oxlint run alike. Several of the new rules
are on by default, so an upgrade may show new warnings: each can be set in
diagnostics or silenced with a lit-ignore comment.
Editors & language server
- Added —
lit-devtools checktype-checks your bindings. Every
.prop=${…},attr=${…},?bool=${…}and@event=${…}expression is
checked by your project's TypeScript, 5 or 7, against what the element
takes, so.size=${this.name}fails CI whensizeis'small' | 'large'
andnameany string; the valueslive(…)andifDefined(…)pass on are
checked too. - Added — Binding type errors show in the editor when you save. The
checklit-devtools checkmakes runs in the background for the saved file,
so.size=${this.name}is underlined without waiting for CI. Set
checkOnSave: falseto turn it off. - Added —
lit-devtools checkfits your project as it is. Run at a
monorepo's root it checks every package with its own settings; a Vite
project'stsconfig.app.jsonis found behind atsconfig.jsonthat only
lists references; thebinding-typeseverity decides whether problems
fail the run, and elements missing fromHTMLElementTagNameMapare listed
instead of passing unchecked. - Added — Unknown elements, attributes and properties are warnings. A
tag, attribute or.propertynothing defines is reported with the name you
probably meant, and so is a component's attribute written with a value
outside its type,size="huge", in Lit templates and for custom elements
in JSX, Astro, MDX and HTML.ignoreTagsandignoreAttributesnow
silence them. - Added — A slot the parent component doesn't have is a warning.
<h2 slot="heder">in a card with aheaderslot is reported, with the
slot you probably meant or the ones it has. - Added — Literal values that can't fit a binding are errors. A string
in?hidden=${'no'},trueintitle=${true}, a number in@click=${1},
or a value outside a property's union,.size=${'huge'}, is reported as
you type under the newbinding-typerule. - Added — Templates Lit reads differently than written are reported. A
component closed with/>or never closed, a.,?or@binding
without${…}, a stray quote next to an expression, and Polymer's
name$=are flagged as you type. - Added — A Lit directive where Lit can't apply it is an error.
classMapoutsideclass,styleMapoutsidestyle,ifDefinedon a
property,liveon a listener,refin an attribute, andrepeator
unsafeHTMLanywhere but between tags are reported before they throw. - Added — Component declarations are checked. A tag
customElements.definewould refuse, anattribute:name HTML lowercases
away, and a property whosetypeoption doesn't fit its type, or a number
or boolean without one, are reported in the component's file.
property-visibility, off by default, flags@property()on private
fields and@state()on public ones. - Added — A field that replaces an element's own method is an error.
@state() afteror@property() removereplacesafter()orremove()
on the element, and a field namedupdateorrenderRootbreaks Lit's
updates;shadowed-memberreports them, in JavaScript too. - Added — A component missing from
HTMLElementTagNameMapis a
warning, with a fix. Without the entry TypeScript can't tell what
document.createElement('x-button')returns, andlit-devtools checkcan't
check the element's bindings. The quick fix, oroxlint --fix, writes the
declare globalblock. - Added —
missing-importreports components a file never imports.
Turn it on to catch a tag used where nothing imports its definition, with a
quick fix that adds the import;entriesnames an app entry whose imports
count for every file. - Added — Silence a problem with a
lit-ignorecomment.
<!-- lit-ignore -->before an element in a template,
// lit-ignore-next-lineabove a line, or// lit-ignore-filefor the
file, each optionally naming the rules, in the editor, in Oxlint and in
lit-devtools check. - Added — The
manifestssetting is read. List a manifest, a path or
a URL, for components whose package ships none, and the editor completes,
documents and checks them like any other. - Fixed — Completion and hover see what you just typed in another
file. A component added to one buffer was sometimes missing from
completion in the next for a moment. - Fixed — No false CSS problems around expressions in a
css
template. A selector or a whole block body written as${…}made the
rules around it report errors. - Fixed — Code in an indented MDX fence stays code. A fenced block
under a list item was read as markup.