wapitis-plugin

Logo

Syntax highlighting, type checking and code completion for Wapitis

➤ Disclaimer

This plugin is an adaptation of lit-plugin. It was created to work with wapitis and add wapitis specifics configurations.

Prefer lit-plugin to work with any other configuration than wapitis.

All features are provided by these three libraries:

ts-wapitis-plugin a fork of ts-lit-plugin: The typescript plugin that powers the logic through the typescript language service (code completion, type checking, eg.).
vscode-lit-html: Provides highlighting for the html template tag.
vscode-styled-components: Provides highlighting for the css template tag.

This library couples it all together and synchronizes relevant settings between vscode and ts-wapitis-plugin.

➤ Rules

All the rules are the same as lit-plugin, but the default severity are changed as described below.

The default severity of each rule depend on the strict configuration option. Strict mode is enabled as default.

Each rule can have severity of off, warning or error. You can toggle rules as you like.

Validating custom elements

Rule	Description	Severity normal	Severity strict
no-unknown-tag-name	The existence of tag names are checked. Be aware that not all custom elements from libraries will be found out of the box.	off	error
no-missing-import	When using custom elements in HTML it is checked if the element has been imported and is available in the current context.	off	error
no-unclosed-tag	Unclosed tags, and invalid self closing tags like custom elements tags, are checked.	warning	error

Validating binding names

Rule	Description	Severity normal	Severity strict
no-unknown-attribute no-unknown-property	You will get a warning whenever you use an unknown attribute or property within your `lit-html` template.	off	error
no-unknown-event	When using event bindings it's checked that the event names are fired.	off	error
no-unknown-slot	Using the "@slot" jsdoc tag on your custom element class, you can tell which slots are accepted for a particular element.	off	warning

Validating binding types

Rule	Description	Severity normal	Severity strict
no-invalid-boolean-binding	Disallow boolean attribute bindings on non-boolean types.	error	error
no-expressionless-property-binding	Disallow property bindings without an expression.	error	error
no-noncallable-event-binding	Disallow event listener bindings with a noncallable type.	error	error
no-boolean-in-attribute-binding	Disallow attribute bindings with a boolean type.	error	error
no-complex-attribute-binding	Disallow attribute bindings with a complex type.	error	error
no-nullable-attribute-binding	Disallow attribute bindings with nullable types such as "null" or "undefined".	error	error
no-incompatible-type-binding	Disallow incompatible type in bindings.	error	error
no-invalid-directive-binding	Disallow using built-in directives in unsupported bindings.	error	error
no-unintended-mixed-binding	Disallow mixed value bindings where a character `'`, `"`, `}` or `/` is unintentionally included in the binding.	warn	warn

Validating LitElement / Wapitis Element

Rule	Description	Severity normal	Severity strict
no-incompatible-property-type	When using the @property decorator in Typescript, the property option `type` is checked against the declared property Typescript type	error	error
no-invalid-attribute-name	When using the property option `attribute`, the value is checked to make sure it's a valid attribute name.	error	error
no-invalid-tag-name	When defining a custom element the tag name is checked to make sure it's valid.	error	error

Validating CSS

Rule	Description	Severity normal	Severity strict
no-invalid-css	CSS within the tagged template literal `css` will be validated.	warning	error

➤ Configuration

With the exception of the section and the strict default which is true, all the configuration is the same as the section Configuration of lit-plugin.

You can configure this plugin by going to VS Code Settings > Extension > wapitis-plugin.

Note: You can also configure the plugin using a tsconfig.json file (see ts-lit-plugin).

Available options

Option	Description	Type	Default
`strict`	Enabling strict mode will change which rules are applied as default (see list of rules)	`boolean`	true
`rules`	Enable/disable individual rules or set their severity. Example: `{"no-unknown-tag-name": "off"}`	`{"rule-name": "off" \\| "warn" \\| "error"}`	The default rules enabled depend on the `strict` option
`disable`	Completely disable this plugin.	`boolean`	false
`dontShowSuggestions`	This option sets strict as	`boolean`	false
`htmlTemplateTags`	List of template tags to enable html support in.	`string[]`	["html", "raw"]
`cssTemplateTags`	This option sets strict as	`string[]`	["css"]
`globalTags`	List of html tag names that you expect to be present at all times.	`string[]`
`globalAttributes`	List of html attributes names that you expect to be present at all times.	`string[]`
`globalEvents`	List of event names that you expect to be present at all times	`string[]`
`customHtmlData`	This plugin supports the custom vscode html data format through this setting.	Vscode Custom HTML Data Format. Supports arrays, objects and relative file paths

➤ Other features

You can find all the other features in the section other features of lit-plugin.

➤ Contributors


Nicolas Boyer	Rune Mehlsen	Andreas Mehlsen

➤ License

Licensed under MIT.

Nicolas Boyer