For the end-user documentation, click here.
This documentation is intended for developers who would like to contribute to or modify the code on their own.
VSCode Elements is based on the Lit library. The local development environment requires NodeJS 22
or newer. If you want to use a local copy of the library in your codebase, you can use the npm link
command. First, navigate to the VSCode Elements directory and run:
npm link
Then, go to the library where you want to use it and run:
npm link @vscode-elements/elements
[!WARNING]
Multiple packages must be linked with a single command. For example:
npm link @vscode-elements/elements @vscode-elements/webview-playground
Don't forget to run the build script before using the package.
Install dependencies:
npm ci
Each script can be run using the npm run <script_name>
format. Wireit is used to cache the script
results.
Build everything. This command generates all the files that will be included in the package. These include:
- Transpiled JavaScript files with type definitions and source maps.
- The custom elements manifest file.
- VSCode custom data files.
- The entire library as a single, minified JavaScript file.
Transpiles TypeScript files into standard ES6 JavaScript, without minification. These files can then be imported and optimized in the end-user application.
Same as the above, but the TypeScript compiler run in watch mode and recompile the modified files automatically.
Removes the generated files.
Code style check with ESLint.
Automatically fixing code style issues.
Checks code formatting with Prettier.
Automatically fixing code format issues.
Generates a custom elements manifest file. This file is shipped with the package, and it is the file on which the API view in the documentation site is based.
Start the Web Test Runner development server.
Start the development server and the TypeScript compiler in watch mode, then opens the default browser. This is the most used command during the development.
Compiles the test files and runs them. Because tests are written in TypeScript, a transpilation step is also needed.
Same as above, but it also generates coverage.
Watches the transpiled test files and runs them if any changes are detected. This script does not compile the test files; the build:watch
script needs to be run in a separate terminal. However, it can also be run in parallel with the start
script instead of build:watch.
Displays the file size of the bundled library (dist/bundled.js) in bytes.
Generates icon list for the documentation site
Generates HTML and CSS custom data format for VSCode code completions.