Make your editor read .tsrx files

An editor extension colors TSRX, and a TypeScript plugin named in tsconfig.json adds Markless completions, hints, and errors.

The last page listed parts like <modal.root>. Now your editor has to understand the .tsrx files that use them.

Open a .tsrx file in a fresh editor and you get plain grey text. No completions, no errors, no help.

Two pieces fix that. An editor extension knows the TSRX syntax. A TypeScript plugin, named in tsconfig.json, knows Markless.

Turn each piece on. Then try the editor.

Which piece gives your editor which help?

Turn each piece on and off. Then press Type @ and Misspell onClick, or open Menu.tsrx.

The editorTry it

Counter.tsrxnothing installed

import { state } from '@markless/core'; export default function Counter() @{  let count = state(0);   <button onClick={() => count++}>Count {count}</button>}

What each piece gives you

offColors come from the editor extension. Missing right now.
offSuggestions after @ come from the TypeScript plugin. Missing right now.
offPart hints come from the TypeScript plugin. Missing right now.
offErrors come from the TypeScript plugin. Missing right now.

Simplified. In VS Code, the plugin's help also needs the extension, because the extension opens .tsrx files. In Zed, the starter's settings file does that job. Hint and error behavior follow the plugin's own tests. The error text is shortened.

Notice that only the colors come from the extension. The rest comes from the plugin, and any editor that runs TypeScript’s language server can load it.

Check tsconfig.json

An app from npm create markless already has these lines.

{
	"tsrx": {
		"compiler": "@markless/typescript-plugin/volar"
	},
	"compilerOptions": {
		"jsx": "preserve",
		"plugins": [
			{ "name": "@markless/typescript-plugin" },
			{ "name": "@markless/router/typescript-plugin" }
		]
	}
}

Line	What it does
`tsrx.compiler`	Tells the TSRX tools to read `.tsrx` files with the Markless compiler.
`@markless/typescript-plugin`	Adds Markless completions, part hints, and `.tsrx` imports.
`@markless/router/typescript-plugin`	Suggests your route paths inside `href`.

Pick your editor

Install the TSRX extension. The starter’s .vscode/extensions.json recommends it, so VS Code offers it when you open the app.

code --install-extension ripple-ts.ripple-ts-vscode-plugin

Markless no longer ships its own extension. If you installed an old build by hand, remove it. Otherwise two extensions fight over .tsrx files.

code --uninstall-extension markless.markless

The starter writes .zed/settings.json for you. It opens .tsrx files as TSX and loads the Markless plugin into Zed’s TypeScript server. You have nothing to install.

What you get

Type @ in a component body to get blocks like @if, @for, and @try. After a part tag, a small hint names the HTML element that the part renders.

<widget.trigger value="go">Go</widget.trigger>

Here the editor shows : button right after <widget.trigger. To turn these hints off, add "partHints": false to the plugin entry in tsconfig.json.

Next: Your editor shows red lines now. But who checks the whole project? Type checking →