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 `MediaPlayerElement`.
const player = document.querySelector('media-player');

      

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

        {
  "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.

1. # Create Settings File

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

   terminal

   Copied

   Copy

           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

   Copied

   Copy

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