Skip to main content

VS Code Extension

Docs for VS Code extension v0.3.0

The LiveDoc VS Code extension provides code snippets, data table formatting, and viewer integration to streamline BDD test authoring with @swedevtools/livedoc-vitest.

Features​

Code Snippets​

Type a snippet prefix and press Tab to scaffold BDD constructs instantly:

SnippetPurpose
ld-featureAdds a basic feature definition
ld-backgroundAdds a basic background definition
ld-scenarioAdds a basic scenario definition
ld-scenario-outlineAdds a basic scenario outline definition
ld-givenAdds a basic given step definition
ld-whenAdds a basic when step definition
ld-thenAdds a basic then step definition
ld-andAdds a basic and step definition
ld-butAdds a basic but step definition
ld-stepAdds a step where you choose the keyword type
ld-step-datatableAdds a step with a 2×1 data table
ld-step-datatable-4xAdds a step with a 4×1 data table
ld-step-docStringAdds a step with a docString block

Example: Scaffolding a Feature

  1. Open a .Spec.ts file
  2. Type ld-feature and press Tab
  3. Fill in the feature title, then use ld-scenario for test cases
  4. Add steps with ld-given, ld-when, ld-then

Result: A fully structured feature with proper imports in seconds.

Data Table Formatting​

The Format Data Tables command aligns and styles Gherkin data tables in your spec files. Pipe-delimited tables are padded for readability:

Before:

| name | age | active |
| Alice | 30 | true |
| Bob | 25 | false |

After:

| name  | age | active |
| Alice |  30 | true   |
| Bob   |  25 | false  |

Commands​

CommandDescription
LiveDoc: Format Data TablesFormats all data tables in the active document
LiveDoc: Open ViewerOpens the LiveDoc Viewer (shared UI webview)

Access commands via the Command Palette (Ctrl+Shift+P / Cmd+Shift+P).

Installation​

  1. Open VS Code
  2. Go to the Extensions view (Ctrl+Shift+X / Cmd+Shift+X)
  3. Search for "livedoc"
  4. Click Install

Usage​

Setting Up Your Project​

The extension works with the @swedevtools/livedoc-vitest testing library:

npm install --save-dev vitest@^4.0.16 @swedevtools/livedoc-vitest

Writing BDD Tests with Snippets​

  1. Create a new .Spec.ts file (e.g., UserAuth.Spec.ts)
  2. Type ld-feature and press Tab to scaffold the feature
  3. Fill in the feature title and description
  4. Use ld-scenario to add test scenarios
  5. Add steps with ld-given, ld-when, ld-then

Example Test​

import {
  feature, scenario, given, when, Then as then,
} from '@swedevtools/livedoc-vitest';

feature(`User Authentication
    As a user
    I want to log in to the system
    So that I can access my account
`, () => {

  scenario('Successful login with valid credentials', () => {
    given("I am on the login page", () => {
      // Navigate to login page
    });

    when("I enter valid credentials", () => {
      // Enter username and password
    });

    then("I should be logged in successfully", () => {
      expect(isLoggedIn).toBe(true);
    });
  });
});

Using the Viewer​

Run LiveDoc: Open Viewer from the Command Palette to open the LiveDoc Viewer directly inside VS Code as a webview panel. This connects to a running viewer instance and displays test results without leaving your editor.

Key Takeaways​

  • Snippets (ld-feature, ld-scenario, etc.) let you scaffold BDD tests in seconds
  • Format Data Tables keeps your Gherkin tables clean and aligned
  • Open Viewer brings the test dashboard into VS Code
  • Install from the Marketplace by searching "livedoc"

Next Steps​