---
title: Make your editor read .tsrx files
description: An editor extension colors TSRX, and a TypeScript plugin named in tsconfig.json adds Markless completions, hints, and errors.
sidebar: { label: Editor setup }
---

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.

<ToolEditorFigure />

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.

```json tsconfig.json
{
	"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

**VS Code**

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

```bash
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.

```bash
code --uninstall-extension markless.markless
```

**Zed**

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.

```tsrx Menu.tsrx
<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`.

:::warning[Why does my Deno app show wrong errors?]
Deno's language server reads `deno.json` and ignores `plugins`. Edit a Deno app in VS Code or Zed instead. Turn off Deno's own editor support for that folder.
:::

:::tip[Is my setup right?]
In a Node or Bun app, run `npm run doctor -- --no-build`. One of its checks makes sure that `tsconfig.json` has the `tsrx.compiler` line.
:::

**Next:** Your editor shows red lines now. But who checks the whole project? [Type checking →](/tooling/type-checking)