Dope

Helps you write code faster and more easily. It offers features like autocompletion, quick navigation, refactoring tools, and useful code snippets to improve your workflow. It cuts down on repetitive work so you can focus on building features, writing clean code and reducing the likelihood of typos.

Installation

To install the extension, follow these simple steps:

1. Open Visual Studio Code.
2. Go to the Extensions view by using one of the the following shortcuts:
   • Ctrl+Shift+X (Windows/Linux)
   • Shift+Command+X (Mac)
   • Or go to View > Extensions
3. Search for "Dope".
4. Click on the "Install" button.

Usage

IntelliSense

Features

Dynamically generated global types:

• FeaturesInstancesMap maps each feature key to its instance type, which is useful when you need a plain object representing all features without any extra logic

export default class Jackpots extends Container {
  /** @type {Partial<FeaturesInstancesMap>} */ _features;
}

• FeaturesManagerWithTypes builds on top of it, combining both FeaturesManager and FeaturesInstancesMap, and is meant to be used in Scenario to provide full type safety across all registered features

export default class Scenario extends BaseScenario {
  /** @type {FeaturesManagerWithTypes} */ features;

  constructor() {
    super();
  }
}

Note: If FeaturesManagerWithTypes is not used in the Scenario, the extension will fall back to manually providing autocomplete suggestions for this.features, but without proper type information.

Animate

The animate object imported from loader (e.g., import { animate } from './core/loader') is fully typed for every exported FLA file.

• The constructor functions are correctly typed to return instances of their specific classes, such as MovieClip, Container, and others.
• All nested instances with an assigned instance name are exposed as typed properties on their parent class, no matter how deep they are in the display hierarchy
• Duplicate instance names are easy to spot, as they appear twice in the generated typings and will cause TypeScript errors

The global Loader.Animate namespace provides typings for each file, enabling precise IntelliSense and type checking in JSDoc. Example:

export default class Paytable extends Cover {
    /** @type {InstanceType<Loader.Animate.Paytable['paytableMc']>} */ anim;
}

Spine

The spine object imported from loader (e.g., import { spine } from './core/loader') is fully typed for every exported Spine asset.

• Each property is typed as SkeletonData for accurate type checking
• You can access every exported skeleton by name, and TypeScript will catch typos or missing assets

The global Loader.Spine namespace provides typings for each skeleton, enabling precise IntelliSense and type checking in JSDoc. Example:

export default class TrailEffect extends SpineCover {
    /** @type {Spine & Loader.Spine.trailEffect} */ anim;
}

Pixi

The global PIXI namespace is declared with actual PIXI class typings.

• Includes all exports (e.g., PIXI.Container, PIXI.Point, etc.)
• All existing JSDoc references to PIXI and PIXI.animate now work correctly, providing proper type support

Note: All these global types are only generated if the node_modules folder exists. Without it, they won’t be created and therefore won’t exist in your environment.

Commands

To bring up the Command Palette, use one of the following shortcuts:

• F1
• Ctrl+Shift+P (Windows/Linux)
• Shift+Command+P (Mac)
• Or go to View > Command Palette

Once open, type "Dope" to access the following commands:

• Create New Feature: Quickly create a new feature
• Jump To State Declaration: Navigate to a specific switch case state
• Jump To Feature Initialization: Navigate to a specific feature initialization
• Jump To Method Implementation: Navigate to a specific method

Navigation & Refactor

These commands and shortcuts work when your cursor is on any of the following:

• A feature name like this.features.someFeature
• A key inside this.addFeatures({ someFeature: ... })
• A key inside this.features.arrange(['someFeature'])

Rename Symbol (F2)

• All occurrences of the feature throughout the Scenario
• The feature's initialization name inside this.addFeatures({...})
• The feature's name key inside this.features.arrange([...])

Go To Definition (F12)

• Navigate to the feature’s initialization inside addFeatures

Go To Implementation (Ctrl+F12)

• Opens the file where the feature class is declared

Go To References (Shift+F12)

• Usages like this.features.someFeature
• Method calls, event handlers, and property access

Panels & Diagnostics

These panels help you identify feature-related issues and view logs generated by the extension during runtime.

Problems

Detects and highlights issues in Scenario, both inline and in the panel.

To open the panel quickly, you can use one of the the following shortcuts:

• Ctrl+Shift+M (Windows/Linux)
• Shift+Command+M (Mac)
• Or go to View > Problems

It reports:

• A features declared but not included in the arrange method (shown as hints)
• A features declared but never used outside their initialization (shown as warnings)
• A features declared multiple times in the same scope (shown as errors)

Note: Clicking any problem will jump directly to the relevant code location.

Note: To ignore a specific report, add @dope-ignore inside any kind of inline comment.

Output

Logs runtime messages and internal activity from the extension.

To open the panel quickly, you can use one of the the following shortcuts:

• Ctrl+Shift+U (Windows/Linux)
• Shift+Command+U (Mac)
• Or go to View > Output

Then select "Dope" from the dropdown in the top-right corner of the panel.

It includes:

• Issues while running commands
• Warnings or diagnostics not shown in the editor
• General internal messages or progress logs

Note: Use this panel when the extension isn’t behaving as expected and no visible error appears.

Code Snippets

The extension includes several helpful snippets that reduce boilerplate.

These are only available in the Scenario and will auto-complete as you type.

• event: Inserts a listener for a feature-specific event.
  • this.features.foo.on(features.Foo.events.EVENT, () => { });
• spin: Destructure data from currentSpin safely.
  • const { } = SpinData.currentSpin?.game || {};
• statget: Gets the status value for a given type
  • Status.get(Status.TYPES.BAR);
• statset: Sets the status value for a given type
  • Status.set(Status.TYPES.BAZ, value);