Setting up TypeScript, ESLint and Prettier in Veyra
Get full IntelliSense, lint errors as you type and format-on-save for JavaScript and TypeScript projects in Veyra, using the same language servers as VS Code.
Veyra highlights more than 80 languages out of the box. For JavaScript and TypeScript projects, three built-in tools take it all the way to the experience you know from VS Code: real type errors, your lint rules and consistent formatting.
Before you start
The web language tools run on Node.js 18 or newer. Check in a terminal:
node --version
If the command isn't found, install the LTS version from nodejs.org and restart Veyra. On macOS and Linux, Veyra finds Node.js from Homebrew, nvm, Volta, fnm and asdf automatically, even when you start Veyra from the Dock.
TypeScript & JavaScript
Open Extensions → Built-in web tools → TypeScript & JavaScript → Install. Open any .ts, .tsx, .js or .jsx file and the server starts on its own.
You get:
- Errors as you type, from your project's real
tsconfig.json(red underlines and the Problems panel). - Completions that understand your types, including auto-imports.
- Hover documentation, go to definition (F12) and find references.
- Rename across files (F2) and quick fixes, such as adding a missing import.
Run npm install in your project first, so type definitions in node_modules (React, Node.js, your libraries) are available.
ESLint
Install ESLint from the same list. It uses your project's own ESLint version and configuration, flat config (eslint.config.js) or classic (.eslintrc), and shows problems as you type. Lightbulb quick fixes can fix a single problem or every auto-fixable problem in the file.
If ESLint shows nothing, check that the project has ESLint installed (npm install --save-dev eslint) and a config file. The tool's page in Extensions shows its status and the server's last error message.
Prettier
Install Prettier, then format with Shift+Alt+F (⇧⌥F on macOS), or turn on Settings → Files → Format on save.
Veyra prefers your project's Prettier (from node_modules) so its version and .prettierrc settings apply exactly, and falls back to its own copy for projects that don't have Prettier.
Tailwind CSS, Emmet, Svelte and Vue
- Tailwind CSS IntelliSense: class name completion, a preview of the generated CSS on hover, colour swatches and linting.
- Emmet: type
ul>li*3ordiv.cardand expand it into markup. - Svelte and Vue (beta): language support for components.
How it works (and why it's safe)
Each tool is a pinned version of the language server the matching VS Code extension uses, installed with npm into Veyra's own app folder, never into your project. Since version 0.6.1, installs run without any package install scripts, and every release checks these exact packages for known security advisories before it ships.
Troubleshooting
| Symptom | Fix |
|---|---|
| "Node.js was not found" | Install Node.js 18+ and restart Veyra |
| A tool says "Failed to start" | Open the tool's page in Extensions to see the error, then click Restart |
| No types from libraries | Run npm install in the project |
| Formatting ignores your settings | Make sure .prettierrc is in the project root and Prettier is installed there |
Still stuck? Open an issue with your Veyra version and the tool's error message.