2021-07-21 18:13:58 +02:00
|
|
|
# LSP web extension Example
|
|
|
|
|
|
|
|
|
|
A LSP server that runs in a web extension
|
|
|
|
|
|
|
|
|
|
## Functionality
|
|
|
|
|
|
|
|
|
|
This Language Server add color decorators to plain text files.
|
|
|
|
|
|
|
|
|
|
- create a plain text file
|
|
|
|
|
- enter text that contains colors in hex format (#rrggbb)
|
|
|
|
|
- color decorators
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
It also includes an End-to-End test.
|
|
|
|
|
|
|
|
|
|
## Structure
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
.
|
|
|
|
|
├── client // Language Client
|
|
|
|
|
│ ├── src
|
|
|
|
|
│ │ └── browserClientMain.ts // Language Client entry point
|
|
|
|
|
├── package.json // The extension manifest.
|
|
|
|
|
└── server // Language Server
|
|
|
|
|
└── src
|
|
|
|
|
└── browserServerMain.ts // Language Server entry point
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## Running the Sample
|
|
|
|
|
|
|
|
|
|
- Run `npm install` in this folder. This installs all necessary npm modules in both the client and server folder
|
|
|
|
|
- Open VS Code on this folder.
|
|
|
|
|
- Press Ctrl+Shift+B to compile the client and server.
|
|
|
|
|
- Switch to the Debug viewlet.
|
2024-02-02 12:14:21 +01:00
|
|
|
- Select `Run Web Extension` from the drop down.
|
2021-07-21 18:13:58 +02:00
|
|
|
- Run the launch config.
|
|
|
|
|
- In the [Extension Development Host] instance of VSCode, open a document in 'plain text' language mode.
|
2024-03-04 14:18:10 +01:00
|
|
|
- Type #00ff00 or any other color in hex format.
|
|
|
|
|
- color decorators will appear.
|
|
|
|
|
- You can set breakpoints in the client or server code.
|
2024-02-02 12:14:21 +01:00
|
|
|
|
|
|
|
|
|
|
|
|
|
You can also run and debug the extension in a browser
|
|
|
|
|
- `npm run chrome`
|
|
|
|
|
- use browser dev tools to set breakpoints
|