1. Getting Started
  2. Editor Setup

Getting Started

Editor Setup

This section will look at editor plugins and settings that can improve the developer experience when working with Vidstack.

TypeScript

We've written the player library with TypeScript, and we distribute all types with the vidstack package. VSCode will detect them by default, but global DOM APIs will not be automatically updated:

        // ❌ The type will default to `Element` instead of `MediaElement`.
const media = document.querySelector('vds-media');

      

You can resolve this by adding the following to your TypeScript configuration file:

tsconfig.json
        {
  "compilerOptions": {
    "types": ["vidstack/globals"]
  }
}

      

VSCode

VSCode provides support for extending the known HTML entities through VSCode Custom Data. Once set up, it enables autocomplete suggestions for custom player elements and on-hover information such as documentation and type data.

Before and after screenshot difference of using the VSCode custom data extension.

  1. Create Settings File

    Create a VSCode settings JSON file at the root of your project directory.

    terminal
            touch .vscode/settings.json
    
          
  2. Add Custom HTML Data

    Add the custom HTML data file path to html.customData inside the newly created settings file.

    .vscode/setting.json
            {
      "html.customData": ["./node_modules/vidstack/vscode.html-data.json"]
    }