Typescript linting (ts node)

I have installed and in the process of trying out the typescript node as an alternative to the function node. The function node is already my favourite in node red, and typescript node should be even better. Luckily the monaco editor in ts node seems to use the same formatting rules defined in settings.js. For normal function node I also have nrlint enabled for javascript, rules seems to be defined in .nrlint.js and/or .config.users.json. But how can I set up similar rules for typescript in the typescript node?

2 Likes

Feels like a choice between type safety and linting - an impossible dilemma.

@benoitadam could you expose a setting called "eslint-file-path" in your node to let people configure typescript-eslint as they wish in settings.js

Please, could you also add "tsconfig-file-path" setting for the same purpose.

Both properties values point to the default config files that are created with the default configs values during initialization if their respective files don't exist. If the files exist, just use them.

I googled a bit and it doesn't seem to exist a good solution for running eslint on the browser. I believe your node can expose a http route thar runs eslint on the server on every debounced change in the code. Once the response is returned you can apply it in the monaco instance.

Maybe using a second process to handle the lint requests would also be better to avoid impacting nodered runtime

2 Likes

Not sure why you think that? How often do you actually need type safety in a function node? Monaco's linting (which includes TS checks by the way even for JavaScript) already marks a function node as invalid if linting or TS checks fail.

There are actually things you can do with JavaScript that are currently impossible with TS directly - though I doubt you would come across them in a function node.

But remember, we are talking about function nodes here. The longest even I've ever written is probably no more than a couple of hundred lines. And that with copious comments and white-space.

Type safety would be greatly appreciated every day. I recently spent half an our helping a colleague tracking down an error that was caused by a typo of a single character in javascript object path. That was in a different js editor, not nr, but still javascript. Type declarations allows me to understand the structure of the data without running code to debug. Running code to debug can have huge implications for us as it’s mostly done in production.

The linting and formatting I got working in normal function node works ok-ish. It will show some stuff in code editor. I can get more alerts in bottom bar. And it will do some light formatting most of the time, perhaps on paste or newline (enter).

For ts node, I get the formatting, but none of the linting. It may be easier to show because it’s difficult to explain precisely the user experience I’m talking about:

Here I have same code in function node and typescript node. Only function node reports on linting.

Ideally, the user experience would be even better if closer to vscode, for example format on save and showing exactly where in code the lint rule is triggered. But I can make due with this alert. ts node doesn’t even have that (or I have not been able to apply it).

Typescript node has the potential of being my all-time favourite node in node red :smiley: But it really needs linting before I’ll convert to using it.

1 Like

With that, I very much agree. It would be great if Monaco in Node-RED were more configurable such that it could support full ESLINT and TS linting. The ability to have a custom linting config and to be able to use optional eslint extensions would be huge.

2 Likes

Thank you for the detailed feedback on ESLint integration! :folded_hands:

After carefully analyzing the requests for full ESLint integration with configurable rules and plugins, I have to be honest - this is significantly more complex than I initially anticipated.

The Challenge

Implementing a complete ESLint solution for the TypeScript node would require:

  • Client-side ESLint bundling (very heavy and complex)
  • Web Worker architecture for performance
  • Plugin system compatibility with browser environment
  • Configuration management for .eslintrc and tsconfig.json
  • Security considerations for custom rule execution

This level of complexity goes well beyond the scope of what I can reliably implement and maintain as a single developer, especially while ensuring stability and security.

Current State

The TypeScript node currently provides:

  • :white_check_mark: Full TypeScript type checking via Monaco
  • :white_check_mark: IntelliSense and auto-completion
  • :white_check_mark: Real-time error detection
  • :white_check_mark: Custom type declarations

While this covers many use cases, I understand it doesn't provide the full ESLint experience you're looking for.

Community Contribution Welcome! :rocket:

If anyone in the community has experience with Monaco + ESLint integration and would like to contribute, I would be more than happy to:

  1. Review and merge pull requests for ESLint integration
  2. Provide guidance on the existing codebase structure
  3. Help test and validate any proposed solutions
  4. Collaborate on implementation details

If you're interested in tackling this challenge, please feel free to:

  • Fork the repository
  • Create a feature branch for ESLint integration
  • Submit a pull request with your implementation

I believe a community-driven solution would be both more robust and better maintained than anything I could implement alone.

Thank you for understanding, and I hope we can work together to make this happen !

1 Like

The solution is probably Webcontainer from stackblitz. I did a quick research and it should work. You have to send the code to the webcontainer, lint it, send eslint response back to the editor, add markers in monaco

@benoitadam

Also sent you a dm but im not sure if it worked

If my brain gives me some dopamine maybe I can try creating a plugin for that. But try to do it yourself and then show us your results. Im sure you can do it