https://github.com/genesiscommunitysuccess/custom-elements-lsp
Web component autocompletion plugins
https://github.com/genesiscommunitysuccess/custom-elements-lsp
autocompletion code-completion custom-elements diagnostics intellij-plugin intellisense language-server-protocol lsp vim-plugin vscode-plugin web-components
Last synced: 8 months ago
JSON representation
Web component autocompletion plugins
- Host: GitHub
- URL: https://github.com/genesiscommunitysuccess/custom-elements-lsp
- Owner: genesiscommunitysuccess
- License: mit
- Created: 2023-05-04T16:57:33.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-02-14T13:52:11.000Z (over 1 year ago)
- Last Synced: 2025-02-02T00:24:41.519Z (8 months ago)
- Topics: autocompletion, code-completion, custom-elements, diagnostics, intellij-plugin, intellisense, language-server-protocol, lsp, vim-plugin, vscode-plugin, web-components
- Language: TypeScript
- Homepage: https://genesis.global/platform
- Size: 13.1 MB
- Stars: 19
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
- Security: SECURITY.md
Awesome Lists containing this project
README
The [Genesis Global](https://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](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_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](./packages/core/custom-elements-lsp/README.md#vscode) |
| Vim/NeoVim | :white_check_mark: | :white_check_mark: | :white_check_mark: | Requires configuration as an LSP client for TypeScript. [Setup](./packages/core/custom-elements-lsp/README.md#nvim) |
| JetBrains (IntelliJ/Webstorm/etc...) | :heavy_minus_sign: | :white_check_mark: | :x: | JetBrains IDEs [currently](https://youtrack.jetbrains.com/issue/WEB-62815/Ability-to-use-tsserver-to-implement-all-LSP-functionality-from-TypeScript) only have partial support as an LSP client. [Setup](./packages/core/custom-elements-lsp/README.md#jetbrains) |
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](https://www.loom.com/share/3dfdb245cbfc4fc1a166df8b19c123a5?sid=c478ca86-f0ba-4cfe-af9d-7ee6d30e26c6), try our pre-setup [Example Project](https://github.com/genesiscommunitysuccess/cep-setup-example), and see the [Changeset](https://github.com/genesiscommunitysuccess/cep-setup-example/pull/2/files) required to enable the LSP in the example project.
## Packages
### Custom Elements LSP Plugin
[](https://www.npmjs.com/package/@genesiscommunitysuccess/custom-elements-lsp) [](https://github.com/genesiscommunitysuccess/custom-elements-lsp/blob/master/LICENSE)
```shell
npm i @genesiscommunitysuccess/custom-elements-lsp --save-dev
```
The [CEP](./packages/core/custom-elements-lsp/README.md) 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
[](https://www.npmjs.com/package/@genesiscommunitysuccess/cep-fast-plugin) [](https://github.com/genesiscommunitysuccess/custom-elements-lsp/blob/master/LICENSE)
```shell
npm i @genesiscommunitysuccess/cep-fast-plugin --save-dev
```
The [FAST Plugin](./packages/core/cep-fast-plugin/README.md) 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
[](https://www.npmjs.com/package/@genesiscommunitysuccess/analyzer-import-alias-plugin) [](https://github.com/genesiscommunitysuccess/custom-elements-lsp/blob/master/LICENSE)
```shell
npm i @genesiscommunitysuccess/analyzer-import-alias-plugin --save-dev
```
The [Analyzer Plugin](./packages/core/analyzer-import-alias-plugin/README.md) is a plugin for the [custom elements analyzer](https://custom-elements-manifest.open-wc.org/analyzer/getting-started/) which enhances its support for import aliases.
### Showcase Example
The private [showcase example](./packages/showcase/example/README.md) 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](./packages/showcase/example-lib/README.md) 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](./CONTRIBUTING.md).
## License
See [here](./LICENSE).