custom-elements-lsp
custom-elements-lsp copied to clipboard
genesiscommunitysuccess
Web component autocompletion plugins
The Genesis Global Community Success initiative is committed to open-sourcing select technologies that we believe the open-source community would benefit from.
Custom Elements Monorepo
This repository contains multiple packages which can be used to work with Custom Elements.
| Editor | Completions | Diagnostics | Quickinfo | Info |
|---|---|---|---|---|
| VSCode | :white_check_mark: | :white_check_mark: | :white_check_mark: | Requires configuration to use local tsserver instance. Setup |
| Vim/NeoVim | :white_check_mark: | :white_check_mark: | :white_check_mark: | Requires configuration as an LSP client for TypeScript. Setup |
| JetBrains (IntelliJ/Webstorm/etc...) | :heavy_minus_sign: | :white_check_mark: | :x: | JetBrains IDEs currently only have partial support as an LSP client. Setup |
Any editor/IDE configured as an LSP client using the instance of tsserver which this plugin is installed to should be compatible.
Quickstart Example
Adding the LSP to your project takes less than 5 minutes. Follow along with our Setup Walkthrough Video, try our pre-setup Example Project, and see the Changeset required to enable the LSP in the example project.
Packages
Custom Elements LSP Plugin
npm i @genesiscommunitysuccess/custom-elements-lsp --save-dev
The CEP is the primary package of the monorepo, and is a plugin for the TypeScript language server which adds in support for custom elements.
Show more examples
CEP FAST Plugin
npm i @genesiscommunitysuccess/cep-fast-plugin --save-dev
The FAST Plugin for the CEP enables https://www.fast.design/ enhancements. Examples of this is using the :prop syntax for property bindings, and ?attr syntax for boolean attributes.
Show more examples
Analyzer Import Alias Plugin
npm i @genesiscommunitysuccess/analyzer-import-alias-plugin --save-dev
The Analyzer Plugin is a plugin for the custom elements analyzer which enhances its support for import aliases.
Showcase Example
The private showcase example application is a test harness application built with TypeScript and MS Fast and is used to test out the Custom Elements Plugin (CEP) locally inside the monorepo.
Showcase Example Library
The private showcase example library is an example library of web components. It can be used as a test harness for testing the Custom Elements Plugin (CEP) to demonstrate that it works with library code, and it is imported into the showcase example app to demonstrate that the CEP works with imported code.
Contributing
Thanks for taking interest in contributing to the Custom Elements Plugin. See the contributing guidelines.
License
See here.
Metadata
Owner
genesiscommunitysuccess
Metadata
Web component autocompletion plugins