VSCode Elements

VSCode Elements includes a testing suite written in TypeScript.

• npm run test: Compiles test files and runs them.
• npm run test:coverage: Runs tests and generates code coverage.
• npm run test:watch: Watches for file changes and runs tests automatically when modifications are detected.

For active development, use the start command. This starts the development server and the TypeScript compiler in watch mode, then automatically opens your default browser.

Alternatively, you can use npm run serve to start the Web Test Runner development server, or npm run wtr:watch to start the web-test-runner in watch mode without rebuilding files (useful for running in a separate terminal to catch errors quickly).

npm run start

If you want to use a local copy of the VSCode Elements library in your own codebase for development, you can use npm link.

Prerequisites:

• Ensure you have NodeJS 22 or newer installed.
• Run the build script in the VSCode Elements directory before linking.

Steps:

1. Navigate to the VSCode Elements directory and run npm link.
2. Navigate to your target project directory and run npm link @vscode-elements/elements.

Note: If you are working with multiple packages, you must link them in a single command:

npm link @vscode-elements/elements @vscode-elements/webview-playground

npm link
# In your project directory:
npm link @vscode-elements/elements

Use the build scripts to generate the necessary files for the package.

• npm run build: Generates everything included in the package, including transpiled JavaScript (with type definitions and source maps), the custom elements manifest file, VSCode custom data files, and a single minified JavaScript bundle.
• npm run built:ts: Transpiles TypeScript files into standard ES6 JavaScript without minification. Use this if you want to import files into an end-user application for further optimization.
• npm run build:watch: Runs the TypeScript compiler in watch mode, automatically recompiling modified files.

When developing your elements, you can use the following HTML templates as starting points. Each template provides a different environment configuration:

• _template.html: The default template. It includes access to all VSCode theme variables, codicons, and components.
• _template-csp.html: A template with strict Content Security Policy (CSP) settings. It still provides access to all VSCode theme variables, codicons, and components.
• _template-fallback-styles.html: A template used for demoing default styles. It provides access to codicons and all components, but does not include VSCode theme variables.

The vscode-textarea component is a multi-line text input designed to mimic the VSCode editor experience. It supports form participation, validation, and can be styled to match VSCode themes.

Key Features

• Form Integration: Implements AssociatedFormControl, allowing it to participate in native HTML forms and support :invalid pseudo-classes.
• Monospace Mode: Enabling the monospace property applies font settings (family, weight, size, and color) consistent with the VSCode code editor.
• Validation: Supports standard HTML validation attributes like required, minlength, and maxlength.
• Events: Fires input and change events when the text content is modified.

<vscode-textarea 
  label="Description"
  placeholder="Enter text here..."
  rows="4"
  monospace
></vscode-textarea>

The vscode-button provides two named slots for placing content around the main label/icon area:

• content-before: Content placed before the main icon and label.
• content-after: Content placed after the main label and icon-after.

The vscode-split-layout component provides a resizable divider (sash) to split a container into two panes: a start pane and an end pane. It supports both vertical and horizontal orientations and allows for minimum size constraints on the panes.

Usage Pattern

Place your content into the named slots start and end:

<vscode-split-layout split="vertical" min-start="100px">
  <div slot="start">Left Pane Content</div>
  <div slot="end">Right Pane Content</div>
</vscode-split-layout>

<vscode-split-layout split="vertical">
  <div slot="start">Start Content</div>
  <div slot="end">End Content</div>
</vscode-split-layout>