JSX/TSX Highlight/Comment being Broken

[LePichu]

Summary

Hi! I recently switched my devices and reinstalled Helix, going up from version 22 -> 24, for some reason both the highlighting for JSX/TSX files are broken alongside the ability to comment code inside JSX scopes.

Here are a few screenshots:

Reproduction Steps

1. Open a JSX or TSX File
2. See the highlighting being broken
3. Try to comment inside a JSX block using Ctrl-C, it also fails

Helix log

• For macOS under macOS Terminal
• For Fedora Proot under Termux

Platform

Fedora Linux PRoot / macOS

Terminal Emulator

macOS Terminal.app / Termux

Installation Method

brew / dnf (Fedora)

Helix Version

24.7

[Diogenesoftoronto]

Please output the result of hx --health

[LePichu]

Please output the result of hx --health

This is my languages.toml:

[[language]]
name = "typescript"
language-id = "typescript"
scope = "source.ts"
injection-regex = "^(ts|typescript)$"
file-types = ["ts", "tsx", "js", "jsx"]
shebangs = ["deno"]
roots = ["deno.json", "deno.jsonc", "package.json"]
language-servers = ["deno-lsp", "tailwindcss-ls"]

[language-server.deno-lsp]
command = "deno"
args = ["lsp"]

[language-server.deno-lsp.config.deno]
enable = true

[language-server.tailwindcss-ls]
command = "tailwindcss-language-server"
args = ["--stdio"]
config = { userLanguages = { astro = "html", "*.astro" = "html" } }

[language-server.astro-ls]
command = "astro-ls"
args = ["--stdio"]
config = { typescript = { tsdk = "/root/.pnpm-global/global/5/node_modules/typescript/lib/" }}

[[language]]
name = "astro"
scope = "source.astro"
injection-regex = "astro"
file-types = ["astro"]
language-servers = ["astro-ls", "tailwindcss-ls"]

[gabydd]

there are seperate queries and a different grammar for tsx:

helix/languages.toml

Lines 790 to 803 in 38e6fcd

	[[language]]
	name = "tsx"
	scope = "source.tsx"
	injection-regex = "(tsx)" # |typescript
	language-id = "typescriptreact"
	file-types = ["tsx"]
	comment-token = "//"
	block-comment-tokens = { start = "/*", end = "*/" }
	language-servers = [ "typescript-language-server" ]
	indent = { tab-width = 2, unit = " " }
	[[grammar]]
	name = "tsx"
	source = { git = "https://github.com/tree-sitter/tree-sitter-typescript", rev = "b1bf4825d9eaa0f3bdeb1e52f099533328acfbdf", subpath = "tsx" }

in your languages.toml you are causing tsx and jsx files to use the typescript grammar and queries

instead you can just have:

[[language]]
name = "typescript"
language-servers = ["deno-lsp", "tailwindcss-ls"]

[[language]]
name = "tsx"
language-servers = ["deno-lsp", "tailwindcss-ls"]

[[language]]
name = "javascript"
language-servers = ["deno-lsp", "tailwindcss-ls"]

[[language]]
name = "jsx"
language-servers = ["deno-lsp", "tailwindcss-ls"]

[LePichu]

Works, thanks!