Enhanced Tree-sitter syntax highlighting for TypeScript, TSX, and JavaScript in Zed.
This extension rewrites and extends the default highlights.scm queries used by Zed's language grammars to expose more granular semantic tokens.
The goal is to improve syntax highlighting precision and allow themes to apply richer color schemes for imports, keywords, constants, and type relationships.
Unlike theme extensions, this project focuses purely on language highlighting rules, not UI styling.
This extension introduces more specific keyword categories that are normally grouped under the generic @keyword capture.
Supported captures include:
| Capture | Keywords |
|---|---|
@keyword.coroutine |
await |
@keyword.modifier |
async, static, private, public, protected, readonly, abstract, override |
@keyword.operator |
delete, in, instanceof, new, of, typeof |
@keyword.control |
if, else, for, while, return, break, switch, try |
@keyword.module |
declare, module, namespace |
@keyword.accessor |
get, set |
@keyword.declaration |
const, let, var, function, class, interface, type, enum |
@keyword.import |
import, export, from |
This allows themes to style different keyword groups independently.
Import statements are captured with more detailed semantic tokens.
| Capture | Example |
|---|---|
@import.default |
import React from "react" |
@import.named |
import { useState } from "react" |
@import.namespace |
import * as React from "react" |
@import.type |
import type { User } from "./types" |
@import.side_effect |
import "./polyfill" |
@import.source |
"react" |
Themes can now visually distinguish different import patterns.
Additional semantic tokens are exposed for type relationships.
| Capture | Usage |
|---|---|
@type.class |
Class names in declarations |
@type.super |
Types referenced in extends clauses |
Example:
class UserService extends BaseService {}Additional rules detect constants more accurately:
- Variables declared with
const - Destructured
constvariables - Uppercase identifiers (
API_KEY,NODE_ENV)
Example:
const API_KEY = process.env.API_KEYAdditional rules enhance JSX syntax highlighting:
- JSX component names
- JSX attributes
- JSX punctuation tokens
Example:
<Component className='blur' />The enhanced highlighting applies to the following file types:
| Language | Extensions |
|---|---|
| TypeScript | .ts, .cts, .mts |
| TSX | .tsx |
| JavaScript | .js, .jsx, .mjs, .cjs |
This extension only provides semantic capture tokens. Themes can map these tokens to colors using Zed's theme system.
Example theme configuration:
{
"syntax": {
"import.default": { "color": "#bd93f9" },
"import.named": { "color": "#50fa7b" },
"import.namespace": { "color": "#ff79c6" },
"import.source": { "color": "#f1fa8c" }
}
}Any Zed theme can take advantage of these tokens.
For the best experience with this extension, it is recommended to pair it with Dracula Blur — a Zed theme that is specifically designed to take full advantage of the granular semantic tokens provided here.
It maps each capture group to a distinct color from the Dracula palette, giving imports, keywords, types, and constants their own visual identity.
This extension follows several guiding principles:
- Non-destructive — Preserve all default Zed highlighting behavior
- Additive — Extend Tree-sitter queries instead of replacing them
- Theme-friendly — Provide richer semantic tokens for themes to consume
- Minimal — Keep queries maintainable and scoped
It acts as a highlighting enhancement layer on top of the default language grammars.
This project was inspired by the following repository: