kimtth/vscode-extension-lsp-pfx

🤯💯Visual Studio Code Extension Demo for DSL using Language Server Protocol.

Visual Code Extension using LSP

• Generic programming languages are often complex and have many features, which makes it challenging to learn the skills for developing the Visual Studio Code extension using LSP (Language Server Protocol). To simplify this, the code defines a toy language called Power Fx Alpha, which is based on Power Fx syntax.
• PowerFxAlpha simplifies complex types and adds syntax for imports and custom-defined functions. PowerFxAlpha supports only parser.
  • The samples are in the syntaxes/powerfx-script-sample directory.
  • Power Fx is a low-code language used in the Microsoft Power Platform, mainly in Power Apps, which is a low-code application development tool.
  • The PowerFxAlpha lexer, parser, and TextMate grammar were generated using GPT. The grammar files are based on Power Fx expression-grammar.grammar from the official Power Fx documentation.

Important: The code in this repository is intended for proof-of-concept purposes only.

Visual Code extension overview

• VS Code <-> Type script: Extension & LSP Client (nodejs) <-- LSP -- > Python: LSP Server (pygls) <-> Parser

sequenceDiagram
    participant VSCode as VS Code
    participant TS as TypeScript: <br/> Extension & LSP Client (nodejs)
    participant Python as Python: <br/> LSP Server <br/> (pygls)
    participant Parser as Parser

    autonumber
    VSCode->>TS: Request
    TS->>Python: Forward Request
    Python->>Parser: Parse or Process
    Parser-->>Python: Return Results
    Python-->>TS: Send Response
    TS-->>VSCode: Deliver Results

Loading

Example Implementations:

• Extension & LSP Client - ANSI C Example: The src\languageServer directory in the repository is actually an LSP client.
• Language Server (LSP Backend & Parser) - ANSI C Example: The VS Code extension officially supports the Node SDK for the LSP server. However, the repository implements the LSP server using C#. The official documentation for the VS Code extension states that The language server can be implemented in any language, as long as it can communicate with the language client using the Language Server Protocol.
• Video Overview on YouTube

Language Definition & Configuration

• package.json: add your new language support configuration in the "contributes" section.
• Language Configuration (Optional): If you want to add additional features like comment toggling, create a language-configuration.json file.
• PowerFxAlphaLexer.g4: PowerFxAlpha lexer
• PowerFxAlphaParser.g4: PowerFxAlpha parser
• PowerFxAlpha.tmLanguage.json: TextMate grammar
• expression-grammar.grammar: official Power Fx expression grammar

Rename vscode-client/src/config.template.json to vscode-client/src/config.json and fill out the values in the config.

Server and Client Setup

Server

To start the server, run the following command in your terminal:

python server/lsp_server.py

Client

To run the client, follow these steps:

1. Open the project in Visual Studio Code.
2. Navigate to vscode-client/src/extension.ts.
3. Click on the Run menu in Visual Studio Code.
4. Select Start Debugging (F5).

Debug Mode

• If you set debugMode to true in vscode-client/src/config.json, the server and client will connect via TCP at 127.0.0.1 on port 8080. otherwise, the client will automatically launch the server as a child process using the defined Python path in vscode-client/src/config.json.

Features

vscode-pfx.mp4

1. Hover (Echo): Show info when hovering over code elements.
2. Rename Function: Rename function's name in the code context.
3. Custom Notification: Create a command for notifications through user input from client-server communication.
4. Client Notification: Enable the client to pop up a hello-world notification by command.
5. Syntax Highlighting: Implement syntax highlighting.
6. Chat: A chat UI implementation that displays responses from the server.

References

1. Create Your First Extension
2. VS Code Extension API > VS Code Extension Samples & Example language server
3. Language Server Protocol Samples
4. Language Server Protocol Documentation > Template for VS Code Python Tools Extensions
5. Integrate Language-Server with VS-Code extension
6. Python extension for Visual Studio Code
7. Readthedocs.io
8. Power Fx kernel for .NET Interactive
9. pygls: A Pythonic generic implementation of the Language Server Protocol. The SDK is designed for a JSON-RPC interface and is not specific to the Python programming language. (pygls v2.0) git