The DÁP design system provides a file called vscode.html-custom-data.json that contains the code completion for the DÁP design system components. This file enables IntelliSense for HTML in Visual Studio Code. Read more here.

Usage:

• Install the DÁP design system from npm
• If it doesn't exist, create a folder called .vscode in the root of your project
• If it doesn't exist, create a file called settings.json in the .vscode folder
• Add the following code to the settings.json file:

{
  "html.customData": [
    "./node_modules/dap-design-system/dist/manifest/vscode.html-custom-data.json"
  ]
}

Maybe you have to restart Visual Studio Code to apply the changes.

For code completion we recommend to install the CSS Variable Autocomplete extension.

To use it create a .vscode folder in the root of your project and create a settings.json file in it. Add the following code to the settings.json file:

{
  "cssVariables.lookupFiles": [
    "**/*.css",
    "**/*.scss",
    "**/*.sass",
    "**/*.less",
    "node_modules/dap-design-system/dist/light.theme.css",
  ]
}

If you are using any JetBrains IDE, and you installed the the package from npm, the IDE will automatically detect the DÁP design system components web-types.json and provide code completion for them.

If you are using the package from CDN, you can download the web-types.json file from the DÁP design system repository and add it to the project.

Add the following lines to the package.json:

{
  ...
  "web-types": "./web-types.json"
  ...
}