VS Code Documentation
One of the core features of web components is the ability to create
custom elements,
which allow developers to reuse custom functionality defined in their components.
When Stencil compiles a project, it generates a custom element for each component in the project.
Each of these
custom elements has an associated
tag
name that allows the custom
element to be used in HTML files.
By default, integrated development environments (IDEs) like VS Code are not aware of a project's custom elements when authoring HTML. In order to enable more intelligent features in VS Code, such as auto-completion, hover tooltips, etc., developers need to inform it of their project's custom elements.
The docs-vscode
output target tells Stencil to generate a JSON file containing this information.
This is an opt-in feature and will save a JSON file containing custom data in a directory specified by the output target. Once the feature is enabled and VS Code is informed of the JSON file's location, HTML files can gain code editing features similar to TSX files.
Enabling
To generate custom element information for VS Code, add the docs-vscode
output target to your stencil.config.ts
:
import { Config } from '@stencil/core';
export const config: Config = {
outputTargets: [
{
type: 'docs-vscode',
file: 'vscode-data.json',
}
]
};
where file
is the name & location of the file to be generated.
By default, Stencil assumes that the file will be generated in the project's root directory.
To generate the JSON file, have Stencil build your project.
Configuring VS Code
Once the
docs-vscode
output target has been enabled and the JSON file generated, VS Code needs to be informed of it.
Recent versions of VS Code have a settings option named html.customData
, which resolves to a list of JSON files to
use when augmenting the default list of HTML elements.
Add the path to the generated JSON file for your project's types to be added:
{
"html.customData": [
"./vscode-data.json"
]
}
Contributors
Thanks for your interest!
We just need some basic information so we can send the guide your way.