Editor setup

The Nola VS Code extension adds editing and debugging support for .tsi files. Other editors can use the same language server; setup details are at the end of this page.

Install

Install Nola from the Visual Studio Marketplace, or from a terminal:

code --install-extension nola.nola-vscode

npm create nola and npm create nola -- --add write an extension recommendation in .vscode/extensions.json, so VS Code offers to install Nola when you open the folder. Pass --ide none to skip editor setup.

The interactive scaffold also offers to install dependencies and open VS Code at the entry file. Its opening comment explains how to run the program and set a breakpoint. This requires the code command on your PATH. On macOS, you can add it with Shell Command: Install ‘code’ command in PATH in the Command Palette. If the command is unavailable, the scaffold offers only to install dependencies.

What you get

• Syntax highlighting for .tsi, including infer, ask, extractor templates and ask with <name> model routing.
• Diagnostics — Nola parse errors and TypeScript errors, reported at the original .tsi positions.
• Hover, completion and go-to-definition inside .tsi files, including inside the ${…} holes of an instruction, extractor or call hint, where the interpolated expression is ordinary TypeScript. TypeScript errors point to the relevant source text.
• TypeScript interop through the bundled tsserver plugin. A .ts consumer gets the types of its .tsi imports, and go-to-definition opens the original infer function.
• Debugging with the “Nola: Launch File” configuration. Set breakpoints in .tsi source, step into infer functions and hover contextual parameters to inspect their values.

Keep .tsi inside the tsconfig include

Use a directory-style include in tsconfig.json so the language server and tsserver plugin can include your .tsi files:

tsconfig.json

{
  "include": ["src"]
}

["src/**/*.ts"] excludes .tsi files, which prevents auto-imports from finding infer functions and leaves .ts consumers without their types. The scaffold already uses the directory form.

Debugging with F5

The scaffold writes .vscode/launch.json with the template’s entry file as program. The example below uses src/main.ts; for a one-file template, use src/main.tsi. You can also add a configuration through Add Configuration… → Nola: Launch File:

.vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Nola: Launch main",
      "program": "${workspaceFolder}/src/main.ts",
      "runtimeArgs": ["--import", "nola-lang/register", "--enable-source-maps"],
      "console": "integratedTerminal",
      "cwd": "${workspaceFolder}",
      "resolveSourceMapLocations": ["${workspaceFolder}/**", "!**/node_modules/**"],
      "skipFiles": ["<node_internals>/**", "**/node_modules/**"]
    }
  ]
}

Keep these three settings when adapting the configuration:

• runtimeArgs loads Nola’s .tsi support and enables source maps for stack traces.
• resolveSourceMapLocations lets VS Code use the inline source maps for .tsi modules. Without it, breakpoints may fail to bind.
• skipFiles keeps stepping focused on your code. Stepping over an ask proceeds to your next line instead of entering the runtime.

Set a breakpoint in a .tsi file and press F5. Use F11 to step into an infer function, then hover a contextual parameter to inspect its value. This setup runs source files through the loader; production builds can use nola build and run the emitted JavaScript directly.

Other editors

For other editors, configure @nola-lang/language-server with the editor’s LSP client for diagnostics, hover, completion and go-to-definition in .tsi. The separate @nola-lang/typescript-plugin supplies types to .ts files that import .tsi modules. See the package READMEs for setup: language-server and typescript-plugin.

Next: Project anatomy