Code Completion

Code Completion provides intelligent autocomplete suggestions for code within Mattercraft script editors. It analyzes file context to generate relevant completions for TypeScript, CSS, and GLSL code.

Usage

Code Completion activates automatically when:

• Typing in the script editor
• Cursor is positioned after incomplete code
• Context suggests a completion is beneficial
• Sufficient file context is available

To use:

1. Begin typing code in any script editor
2. Pause at completion points
3. Review suggested completions (displayed as gray text)
4. Accept with Tab key or continue typing to dismiss

Completion Types

Single Line

Completes the current line based on context:

// Type: "const position = "

Multi-line Blocks

Generates complete functions or code blocks:

// Comment: "// create a click handler"

API-Specific

Provides Mattercraft API completions:

// Type: "this.zcomponent."

Best Practices

Comment-Driven Development

Use comments to guide completions:

// Create a rotation animation that loops infinitely

Descriptive Variable Names

Use clear variable names for better context:

const rotationSpeed = // Better context for suggestions
const x = // Less context available

Type Annotations

Include types for more accurate completions:

const myComponent: MyCustomComponent = // Provides component-specific suggestions

Example Completions

TypeScript Function

Input: // create a function that rotates an object

Completion:

private rotateObject(object: Node, speed: number): void {
  const transform = object.getComponent(Transform);
  transform.rotation.y += speed * Time.deltaTime;
}

CSS Animation

Input: /* smooth button hover effect */

Completion:

.button:hover {
  transform: scale(1.05);
  transition: transform 0.2s ease-in-out;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

GLSL Shader

Input: // vertex shader for wave effect

Completion:

attribute vec3 position;
uniform float time;
uniform float amplitude;

void main() {
  vec3 pos = position;
  pos.y += sin(pos.x * 10.0 + time) * amplitude;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
}