TypeScript & JavaScript Support

Glass provides comprehensive TypeScript and JavaScript support through language server integration, offering intelligent completions, type checking, and extensive test framework automation.

LSP Servers

Glass supports multiple TypeScript language servers:

typescript-language-server (Default)
vtsls (Alternative)

The default language server, providing:

TypeScript and JavaScript support
JSX/TSX with React support
Automatic TypeScript version detection
Integration with project’s node_modules/typescript

Installed automatically from npm:

Package: typescript-language-server
Requires: typescript package

A faster alternative TypeScript language server:

{
  "languages": {
    "TypeScript": {
      "language_servers": ["vtsls", "..."]
    }
  }
}

Features:

Better performance on large projects
Same protocol as typescript-language-server
Drop-in replacement

Installation

Automatic (Recommended)
Project-local Server
Global Installation

Glass automatically installs the language server:

Downloads latest versions of:
- typescript-language-server
- typescript
Installs to: ~/.local/share/zed/languages/typescript-language-server/
Uses Node.js runtime from Glass’s bundled node or system node

No manual setup required.

Use your project’s TypeScript installation:

npm install --save-dev typescript-language-server typescript
# or
yarn add -D typescript-language-server typescript

Glass will detect and use the project-local installation automatically.

Install globally with npm:

npm install -g typescript-language-server typescript

Glass detects globally installed servers in your PATH.

Features

Intelligent Completions

Glass provides rich completions with syntax highlighting:

Methods & Functions
Object Properties
Imports

const arr = [1, 2, 3];
arr.| // Shows methods with types

Completion displays:

map (callbackfn: ...) => U[]
filter (predicate: ...) => T[]
reduce (callbackfn: ...) => U

With proper syntax highlighting for functions and types.

interface User {
  name: string;
  email: string;
}

const user: User = {
  | // Suggests name and email
};

Shows property names with their types.

import { | } from 'react';

Auto-completes available exports with:

Named exports
Default exports
Type-only imports

TypeScript SDK Detection

Glass automatically detects TypeScript installations:

Yarn 2+ (Berry)
node_modules

Detects Yarn’s SDK setup:

yarn dlx @yarnpkg/sdks vscode

Glass finds TypeScript at: .yarn/sdks/typescript/lib

Uses project’s TypeScript:

{
  "dependencies": {
    "typescript": "^5.0.0"
  }
}

Glass finds: node_modules/typescript/lib

Inlay Hints

TypeScript language server provides inlay hints for:

function greet(name: string, age: number) {
  return `Hello ${name}, you are ${age} years old`;
}

greet("Alice", 30);
//    ↑name   ↑age  // Parameter name hints

const result = getValue();
//    ↑: string      // Type hints

Configuration:

{
  "lsp": {
    "typescript-language-server": {
      "initialization_options": {
        "preferences": {
          "includeInlayParameterNameHints": "all",
          "includeInlayVariableTypeHints": true,
          "includeInlayFunctionLikeReturnTypeHints": true
        }
      }
    }
  }
}

Test Framework Integration

Glass automatically detects and provides tasks for popular test frameworks:

Jest

File Tests
Specific Test

Run all tests in a file:

npm exec -- jest --runInBand file.test.ts

Automatically uses the package manager detected (npm/yarn/pnpm).

Run a single test:

describe('MyComponent', () => {
  it('renders correctly', () => {  // ← Click to run this test
    // ...
  });
});

Command:

npm exec -- jest --runInBand --testNamePattern "renders correctly" file.test.ts

Vitest

File Tests
Specific Test

npm exec -- vitest run --no-file-parallelism file.test.ts

test('should work', () => {  // ← Click to run
  expect(true).toBe(true);
});

Command:

npm exec -- vitest run --no-file-parallelism --testNamePattern "should work" file.test.ts

Mocha

# File tests
npm exec -- mocha file.test.js

# Specific test
npm exec -- mocha --grep "test name" file.test.js

Jasmine

# File tests
npm exec -- jasmine file.test.js

# Specific test
npm exec -- jasmine --filter="test name" file.test.js

Bun Test

For projects using Bun:

# File tests
bun test file.test.ts

# Specific test
bun test --test-name-pattern "test name" file.test.ts

Node.js Built-in Test Runner

For Node.js 18+ with native test runner:

# File tests
node --test file.test.js

# Specific test
node --test --test-name-pattern "test name" file.test.js

Package Manager Detection

Glass automatically detects your package manager:

Priority Order
Usage in Tasks

package.json packageManager field:

{
  "packageManager": "[email protected]"
}

Lock files:
- pnpm-lock.yaml → pnpm
- yarn.lock → yarn
- Default to npm

All test tasks use the detected package manager:

# With pnpm:
pnpm exec -- jest ...

# With yarn:
yarn exec -- jest ...

# With npm:
npm exec -- jest ...

Variable: $ZED_CUSTOM_TYPESCRIPT_RUNNER

Package.json Scripts

Glass automatically creates tasks from your package.json scripts:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "test": "jest",
    "lint": "eslint ."
  }
}

All scripts appear in the task picker:

“package.json > dev”
“package.json > build”
“package.json > test”
“package.json > lint”

For monorepos with multiple package.json files, Glass disambiguates by showing the parent directory: "frontend/package.json > dev"

Task Variables

Variable	Description	Example
`TYPESCRIPT_RUNNER`	Detected package manager	`pnpm`
`TYPESCRIPT_JEST_TEST_NAME`	Sanitized test name for Jest	`my\\_test`
`TYPESCRIPT_VITEST_TEST_NAME`	Sanitized test name for Vitest	`my\\_test`
`TYPESCRIPT_BUN_TEST_NAME`	Sanitized test name for Bun	`my\\_test`
`TYPESCRIPT_JEST_PACKAGE_PATH`	Path to package with Jest	`/project/packages/app`
`TYPESCRIPT_MOCHA_PACKAGE_PATH`	Path to package with Mocha	`/project`
`TYPESCRIPT_VITEST_PACKAGE_PATH`	Path to package with Vitest	`/project`

Test Name Sanitization

Test names with special characters are automatically escaped:

// Test with parameters
test('handles %s and %d', () => {});
// Becomes: handles (.+?) and (.+?)

test('validates $param', () => {});
// Becomes: validates (.+?)

This regex matching allows Jest/Vitest to find parameterized tests.

Configuration

Workspace Configuration

{
  "lsp": {
    "typescript-language-server": {
      "initialization_options": {
        "preferences": {
          "includeInlayParameterNameHints": "all",
          "includeInlayFunctionLikeReturnTypeHints": true,
          "includeInlayVariableTypeHints": true
        },
        "tsserver": {
          "path": ".yarn/sdks/typescript/lib"  // Custom TypeScript path
        }
      }
    }
  }
}

Code Actions

Glass supports these TypeScript code actions:

quickfix: Quick fixes for errors
refactor: Extract function, constant, etc.
refactor.extract: Specific extraction refactorings
source: Organize imports, remove unused imports

Complete Function Calls

Enable automatic parameter completion:

{
  "lsp": {
    "typescript-language-server": {
      "settings": {
        "completions": {
          "completeFunctionCalls": true
        }
      }
    }
  }
}

When enabled:

console.log|  // Completes to: console.log(cursor)
array.map|    // Completes to: array.map(cursor => )

File Associations

Glass maps these language IDs:

Glass Language	LSP Language ID
TypeScript	`typescript`
JavaScript	`javascript`
TSX	`typescriptreact`

Troubleshooting

For monorepos, ensure your tsconfig.json references are properly set up:

{
  "references": [
    { "path": "./packages/app" },
    { "path": "./packages/lib" }
  ]
}

This allows the TypeScript language server to understand your project structure.

Language Server Not Starting
Wrong TypeScript Version
Test Tasks Not Appearing

Check Node.js version:

node --version
# Should be v16 or higher

Verify installation:

ls ~/.local/share/zed/languages/typescript-language-server/node_modules

Force reinstall:

Remove the directory above
Restart Glass

Check which TypeScript is being used:

Open a TypeScript file
Run “TypeScript: Select TypeScript Version”
Choose workspace version

Or configure explicitly:

{
  "lsp": {
    "typescript-language-server": {
      "initialization_options": {
        "tsserver": {
          "path": "node_modules/typescript/lib"
        }
      }
    }
  }
}

Ensure your test framework is installed:

# Check package.json
cat package.json | grep -E "jest|vitest|mocha"

Glass scans all package.json files in your project tree, looking for test frameworks in dependencies or devDependencies.

Next Steps

Configure ESLint and Prettier via language server settings
Set up Tailwind CSS through language extensions
Configure multi-folder workspaces for monorepo support

Get Started

Core Features

AI Capabilities

Development

Customization

Language Support

TypeScript & JavaScript Support

LSP Servers

Installation

Features

Intelligent Completions

TypeScript SDK Detection

Inlay Hints

Test Framework Integration

Jest

Vitest

Mocha

Jasmine

Bun Test

Node.js Built-in Test Runner

Package Manager Detection

Package.json Scripts

Task Variables

Test Name Sanitization

Configuration

Workspace Configuration

Code Actions

Complete Function Calls

File Associations

Troubleshooting

Next Steps

Build docs developers (and LLMs) love

Get Started

Core Features

AI Capabilities

Development

Customization

Language Support

​LSP Servers

​Installation

​Features

​Intelligent Completions

​TypeScript SDK Detection

​Inlay Hints

​Test Framework Integration

​Jest

​Vitest

​Mocha

​Jasmine

​Bun Test

​Node.js Built-in Test Runner

​Package Manager Detection

​Package.json Scripts

​Task Variables

​Test Name Sanitization

​Configuration

​Workspace Configuration

​Code Actions

​Complete Function Calls

​File Associations

​Troubleshooting

​Next Steps

Build docs developers (and LLMs) love

LSP Servers

Installation

Features

Intelligent Completions

TypeScript SDK Detection

Inlay Hints

Test Framework Integration

Jest

Vitest

Mocha

Jasmine

Bun Test

Node.js Built-in Test Runner

Package Manager Detection

Package.json Scripts

Task Variables

Test Name Sanitization

Configuration

Workspace Configuration

Code Actions

Complete Function Calls

File Associations

Troubleshooting

Next Steps