Skip to content

Commit a3f4d7d

Browse files
rcosta358rcosta358
committed
Add VS Code Extension Pages
1 parent 5b2e01f commit a3f4d7d

File tree

11 files changed

+191
-19
lines changed

11 files changed

+191
-19
lines changed

‎pages/getting-started/setup.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ dependencies {
4747

4848
The extension then provides real-time diagnostics, syntax highlighting for refinements, and more.
4949

50-
> You can find more about the extension [here]({{ '/vscode/' | relative_url }}).
50+
> You can find more about the extension [here]({{ '/vscode-extension/' | relative_url }}).
5151
5252
## Command-Line Interface
5353

‎pages/index.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ cards:
1616
url: /diagnostics/
1717
description: Understand LiquidJava errors and warnings.
1818
- title: VS Code Extension
19-
url: /vscode/
19+
url: /vscode-extension/
2020
description: Find out about real-time diagnostics, syntax highlighting, and more in the editor.
2121
- title: Command Line
2222
url: /cli/

‎pages/vscode-extension.md‎

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎pages/vscode-extension/autocomplete.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
title: Autocomplete for Refinements
3+
parent: VS Code Extension
4+
nav_order: 3
5+
permalink: /vscode-extension/autocomplete/
6+
---
7+
8+
# Autocomplete for Refinements
9+
10+
The VS Code extension provides context-aware autocomplete for LiquidJava refinements, using suggestions specific to the refinement language and the current context.
11+
12+
Autocomplete suggestions only appear when the cursor is inside a string literal that belongs to a LiquidJava annotation. These suggestions include variable in scope, fields, ghosts, states, aliases, and keywords like `this`, `old`, and `return`.
13+
14+
![Autocomplete Demo]({{ 'assets/vscode-extension/autocomplete.gif' | relative_url }})

‎pages/vscode-extension/commands.md‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
---
2+
title: Commands
3+
parent: VS Code Extension
4+
nav_order: 6
5+
permalink: /vscode-extension/commands/
6+
---
7+
8+
# Commands
9+
10+
The LiquidJava VS Code extension provides commands to control the extension lifecycle and trigger verification manually. These commands make it possible to recover from startup issues, stop background activity, or rerun verification on demand.
11+
12+
## Command Palette
13+
14+
The extension adds a command that opens a palette listing the available LiquidJava commands. This command is executed when the status bar indicator is clicked, giving users a quick way to access extension actions from a single place.
15+
16+
## Available Commands
17+
18+
The following commands available are:
19+
20+
| Command | Description |
21+
| --- | --- |
22+
| `Start` | Starts the LiquidJava language server and client |
23+
| `Stop` | Stops the LiquidJava language server and client |
24+
| `Restart` | Stops and then starts the LiquidJava extension |
25+
| `Verify` | Manually triggers verification |
26+
| `Show Logs` | Opens the output channel with LiquidJava logs |
27+
| `Show View` | Opens the LiquidJava webview |
28+
29+
![Commands Demo]({{ 'assets/vscode-extension/commands.gif' | relative_url }})

‎pages/vscode-extension/index.md‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
---
2+
title: VS Code Extension
3+
nav_order: 4
4+
has_children: true
5+
has_toc: false
6+
permalink: /vscode-extension/
7+
description: Use the LiquidJava VS Code extension for live diagnostics, syntax highlighting, and IDE feedback while editing Java code.
8+
cards:
9+
- title: Real-Time Diagnostic Feedback
10+
url: /vscode-extension/real-time-diagnostic-feedback/
11+
description: Real-time diagnostic reporting directly in the editor as you code.
12+
- title: Syntax Highlighting for Refinements
13+
url: /vscode-extension/syntax-highlighting/
14+
description: Easily read and interpret refinement predicates with syntax highlighting.
15+
- title: Autocomplete for Refinements
16+
url: /vscode-extension/autocomplete/
17+
description: Context-aware auto-completion support for refinement predicates.
18+
- title: Webview
19+
url: /vscode-extension/webview/
20+
description: VS Code webview with interactive diagnostic explorer, context debugger, and state machine visualizer.
21+
- title: Status Bar Indicator
22+
url: /vscode-extension/status-bar-indicator/
23+
description: Indicator to show the current state of LiquidJava.
24+
- title: Commands
25+
url: /vscode-extension/commands/
26+
description: Commands provided by the extension for various interactions.
27+
- title: Output Channel
28+
url: /vscode-extension/output-channel/
29+
description: Output channel for LiquidJava logs.
30+
---
31+
32+
# VS Code Extension
33+
34+
The LiquidJava VS Code extension integrates the verifier into the editor, with real-time diagnostic reporting, syntax highlighting and autocomplete for refinements, and more. It is built as a VS Code client and a language server that communicate through the Language Server Protocol (LSP).
35+
36+
> You start using the extension, you can follow the setup guide [here]({{ 'getting-started/setup/#vs-code-extension' | relative_url }}).
37+
38+
{% include card_grid.html cards=page.cards %}

‎pages/vscode-extension/output-channel.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
title: Output Channel
3+
parent: VS Code Extension
4+
nav_order: 7
5+
permalink: /vscode-extension/output-channel/
6+
---
7+
8+
# Output Channel
9+
10+
The extension provides an output channel for LiquidJava logs to inspect the extension and language server activity easily when debugging issues or unexpected behavior.
11+

‎pages/vscode-extension/real-time-diagnostic-feedback.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
title: Real-Time Diagnostic Feedback
3+
parent: VS Code Extension
4+
nav_order: 1
5+
permalink: /vscode-extension/real-time-diagnostic-feedback/
6+
---
7+
8+
# Real-Time Diagnostic Feedback
9+
10+
The LiquidJava VS Code extension runs verification from inside the editor and reports problems directly in VS Code, keeping the verification feedback close to the code as you edit. When a document is opened or modified, the language server performs the LiquidJava verification and publishes the diagnostics back to the client.
11+
12+
![Diagnostic Feedback Demo]({{ 'assets/vscode-extension/diagnostic-feedback.gif' | relative_url }})

‎pages/vscode-extension/status-bar-indicator.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
---
2+
title: Status Bar Indicator
3+
parent: VS Code Extension
4+
nav_order: 5
5+
permalink: /vscode-extension/status-bar-indicator/
6+
---
7+
8+
# Status Bar Indicator
9+
10+
The extension displays an indicator in the status bar in the bottom-left of the editor that shows the current LiquidJava state inside VS Code, with four possible states:
11+
12+
- `loading`: The extension is starting up
13+
- `passed`: The verification succeeded
14+
- `failed`: The verification found one or more problems
15+
- `stopped`: The extension either was stopped, failed to connect, or lost connection with the language server.
16+
17+
Clicking on this indicator shows the available LiquidJava commands, which is covered in the next section.

‎pages/vscode-extension/syntax-highlighting.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
---
2+
title: Syntax Highlighting for Refinements
3+
parent: VS Code Extension
4+
nav_order: 2
5+
permalink: /vscode-extension/syntax-highlighting/
6+
---
7+
8+
# Syntax Highlighting for Refinements
9+
10+
LiquidJava refinements are written inside Java string literals, which makes them easy to confuse with ordinary strings if the editor treats them as plain text. Syntax highlighting helps developers read and write these embedded specifications more confidently.
11+
12+
The extension implements refinement highlighting with an injection grammar. This grammar tokenizes the refinement language inside LiquidJava annotations and lets VS Code color those tokens according to the active theme.
13+
14+
To make refinements visually distinct from regular Java code, the highlighted refinement text is also rendered in italic. This helps separate the specification language from the surrounding Java syntax and reduces the chance of mentally mixing program code with refinement code.
15+
16+
![Syntax Highlighting Demo]({{ 'assets/vscode-extension/syntax-highlighting.gif' | relative_url }})

0 commit comments

Comments
 (0)