# Node-red and vs-code integration
**URL:** https://discourse.nodered.org/t/node-red-and-vs-code-integration/97672
**Category:** Dashboard
**Tags:** node-red-dashboard, function-node, dashboard-2
**Created:** [17 June 2025 18:37 UTC](https://discourse.nodered.org/t/node-red-and-vs-code-integration/97672 "2025-06-17T18:37:57Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@daniel-payne](https://discourse.nodered.org/u/daniel-payne)
#### Post date: [17 June 2025 18:37 UTC](https://discourse.nodered.org/t/node-red-and-vs-code-integration/97672/1 "2025-06-17T18:37:57Z")
I hope this can help anybody having the same issues as I have when writing long functions in node-red editor.
Coding anything over 50 lines become difficult to work with, or trying to view multiple functions at the same time. The rest of node-red is fantastic!
Flow2Scr worked well, but did not extract the vue parts of dashboard 2 custom templates.
If there is a better way please let me know, especially if there is anything built into the node-red editor that could do this.
[github repo to get the scripts from](https://github.com/daniel-payne/functions-templates-manager)
# node-red and vs-code integration hack
When building a complex dashboards in node-red having the ability to edit in VS Code speeds up development.
I have not found any integrations to do this, so as a workaround I wrote these scripts. They extract and return the function nodes, or the vue templates of dashboard2 elements.
Run **functions-templates-watch** , it extracts all the function and dashboard templates to the /src. It then watches for changes and writes them back to the flows.json. It also watches the flows.json in case you change something in the node-red editor and extracts everything again on deploy.
Put all **three** scripts next to your flows.json
```bash
node functions-templates-watch
```
---
### Author:  [@gNeandr](https://discourse.nodered.org/u/gNeandr)
#### Post date: [22 June 2025 21:57 UTC](https://discourse.nodered.org/t/node-red-and-vs-code-integration/97672/2 "2025-06-22T21:57:35Z")
The approach sounds good, but trying out I run into a very basic problem:
With one of the normal functions I have this naming:
```auto
"type": "function",
"z": "b25c3ffa5d02edb9",
"g": "a24f59ac4513cf4b",
"name": "filter open/xyz",
```
With all "normal" NR there is _no problem_ with this naming, but with functions-templates-watch.js it throws an error like this:
```auto
$ node functions-templates-watch
Extracting from flows.json
Watching /home/user/.node-red/src and flows.json
node:fs:2367
return binding.writeFileUtf8(
^
Error: ENOENT: no such file or directory, open '/home/user/.node-red/src/base_explorer/filter open/ecu-d2009fae2476ec04.js'
at Object.writeFileSync (node:fs:2367:20)
```
Seems the functionality needs a specific naming convention.
Doesn't sound good because "filter open3e/ecu" is the naming of a normal function in a normal flow.
---
### Author:  [@daniel-payne](https://discourse.nodered.org/u/daniel-payne)
#### Post date: [23 June 2025 07:49 UTC](https://discourse.nodered.org/t/node-red-and-vs-code-integration/97672/3 "2025-06-23T07:49:53Z")
i see the problem, I was thinking of writing a manifest in-between to keep track of names and z ids (like Flo2Scr does), this was mostly for duplicate names, i have those a lot. I will write an update and pop it on github, as this has become an invaluable tool for me. I will post here when done, day job needs a bit of focus but should have something up in 24 hours
---
### Author:  [@daniel-payne](https://discourse.nodered.org/u/daniel-payne)
#### Post date: [23 June 2025 14:00 UTC](https://discourse.nodered.org/t/node-red-and-vs-code-integration/97672/4 "2025-06-23T14:00:37Z")
I have updated the code. version 1.0.1 is there, the names of the files look nicer, and it works with files that have / or \ in the name. As well as duplicates.
[Verson 1.0.1](https://github.com/daniel-payne/functions-templates-manager)
The file names in /src reflect those in node-red, duplicate names are given (n) additions. Any names containing slashes, both forward and backward slashes, are replaces with "-" in the file name.
There is also error handling in case you delete something in node-red and it is left on the /src. I often delete the /src folder before I start the watch.
---
### Author:  [@gNeandr](https://discourse.nodered.org/u/gNeandr)
#### Post date: [23 June 2025 16:11 UTC](https://discourse.nodered.org/t/node-red-and-vs-code-integration/97672/5 "2025-06-23T16:11:44Z")
Thanks for updating. With first test it's OK.
Another point I should have mentioned ... not a problem, but a request for improvement.
Normally the flows are stored under ~/.node-red/flows.json. But it could be a different name depending on the OS installation (like for RPI: flows\_raspberrypi.json) or for other reasons.
It would be good to optionally pass the name for the “flows” file.
---
### Author:  [@gNeandr](https://discourse.nodered.org/u/gNeandr)
#### Post date: [23 June 2025 19:51 UTC](https://discourse.nodered.org/t/node-red-and-vs-code-integration/97672/6 "2025-06-23T19:51:07Z")
Some more tests with VScodium and ssh access to the NR flows on an RPI.
The editor displays directories, each stands for a flow containing files which holds the code of one node. So far so good.
The main part (in my case) files belonging to Dashbaord vers.2 templates are missing.
I double checked not to look for templates belonging to DB vers.1.
In the NR Editor I see the type of those nodes in question, they are **"ui-template"**
| Typ | Gehört zu | Bedeutung |
| --- | --- | --- |
| `ui_template` | **Dashboard v1** | Klassischer Node für AngularJS-basiertes Dashboard |
| `ui-template` | **Dashboard v2** | Vue.js-basierter Node in Dashboard 2 |
> 🧠 Beachte den Unterschied: `ui_template` (Unterstrich) vs. **`ui-template`** (Bindestrich)
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [23 June 2025 21:20 UTC](https://discourse.nodered.org/t/node-red-and-vs-code-integration/97672/7 "2025-06-23T21:20:44Z")
Does this work with VS Code running a remote session using the SSH remote edit extension?
Sorry, I haven't had any time to test this. But if it does, that would be really interesting.
---
### Author:  [@gNeandr](https://discourse.nodered.org/u/gNeandr)
#### Post date: [23 June 2025 22:14 UTC](https://discourse.nodered.org/t/node-red-and-vs-code-integration/97672/8 "2025-06-23T22:14:39Z")
Think the answer is: _ **Yes** _
I'm using
```auto
**Open Remote - SSH** ***v0.0.49***
139K | [4.5](vscode-file://vscode-app/app/share/codium/resources/app/out/vs/code/electron-sandbox/workbench/workbench.html)
Use any remote machine with a SSH server as your development environment.
```
It's worth testing!
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [23 June 2025 22:16 UTC](https://discourse.nodered.org/t/node-red-and-vs-code-integration/97672/9 "2025-06-23T22:16:16Z")
Bit sidetracked with family and work just now but I will certainly test as soon as I can find some time.
---
### Author:  [@gNeandr](https://discourse.nodered.org/u/gNeandr)
#### Post date: [23 June 2025 23:02 UTC](https://discourse.nodered.org/t/node-red-and-vs-code-integration/97672/10 "2025-06-23T23:02:50Z")
Problem " **fixed**"
For this watch/extract/collect funtions Dashboard vers.2 **ui-template** needs to have a first code line with ``.
I used to have a comment block `` before the `` to hold a few development points and a filename where I saved the code.
---
### Author:  [@daniel-payne](https://discourse.nodered.org/u/daniel-payne)
#### Post date: [24 June 2025 13:53 UTC](https://discourse.nodered.org/t/node-red-and-vs-code-integration/97672/11 "2025-06-24T13:53:25Z")
i'll do that, was also thinking of a --clean parameter, so it deletes the src directory when you startup watch. I'll post here when done. I will also think of a better way to identify the template so people can put there notes at the top
---
### Author:  [@daniel-payne](https://discourse.nodered.org/u/daniel-payne)
#### Post date: [24 June 2025 17:08 UTC](https://discourse.nodered.org/t/node-red-and-vs-code-integration/97672/12 "2025-06-24T17:08:17Z")
I have updated to
[VERSION 1.0.2](https://github.com/daniel-payne/functions-templates-manager)
There are two new optional arguments that can be used with these scripts
**--clean** This first removes the /src folder and does a clean extract from flows.json on script startup
**--flows-file** Allows you to run the scripts from anywhere, if you don't supply this value it defaults to ./flows.json
---
### Author:  [@greengolfer](https://discourse.nodered.org/u/greengolfer)
#### Post date: [24 June 2025 20:07 UTC](https://discourse.nodered.org/t/node-red-and-vs-code-integration/97672/13 "2025-06-24T20:07:31Z")
This is an excellent idea !
I have been desperately looking for to have a way to open multiple functions at the same time.
Your tool is providing this 🙂
I'm not using dashboard but a few functions as I am using npm libraries not integrated into a contrib node (eg. bullmq...).
I am also using projects. And I guess it might be the reason of the problem I am facing.
If I go in the projects directory and do the "export" `node functions-templates-watch.js --clean --flows-file ./flows.json` it works fine.
I can then edit the .js in Visual Code. When, I save in Visual Code, I get this:
```auto
Updated flow id 25e49db6c0162df5 with Subscriber/function 9.js
Detected change (change) in ..bla-bla-bla-.../flows.json.
Error: fetch failed
```
And then, if I go back to the Nodered interface, reusing the example above, code in `function9` is not changed.
However, if I grep in flows.json, I can see the modification.
Is it linked to the project feature of Node Red ?
Thanks !
---
### Author:  [@daniel-payne](https://discourse.nodered.org/u/daniel-payne)
#### Post date: [24 June 2025 21:04 UTC](https://discourse.nodered.org/t/node-red-and-vs-code-integration/97672/14 "2025-06-24T21:04:06Z")
> [@greengolfer](#):
>
> `Error: fetch failed`
my bad on error messages, that happens when node-red is not running on [http://localhost:8081](http://localhost:8081)
The root cause is the script does a POST to [http://localhost:8081/flows](http://localhost:8081/flows) to get it to reload from the flow file and it shows a merge message in the node-red UI.
i will add another argument to set the path to node-red instead of it being hard-coded to 8081 and improve the message
---
### Author:  [@greengolfer](https://discourse.nodered.org/u/greengolfer)
#### Post date: [24 June 2025 21:20 UTC](https://discourse.nodered.org/t/node-red-and-vs-code-integration/97672/15 "2025-06-24T21:20:13Z")
Thanks ! Tomorrow, I’ll try to change the .js to use the correct endpoint in my setup. I’ll check if statically like that it works.
And yes, being able to set this dynamically would be much better.
Update: Done. It works. Change the URL in functions-templates-collect.fs
---
### Author:  [@daniel-payne](https://discourse.nodered.org/u/daniel-payne)
#### Post date: [25 June 2025 09:47 UTC](https://discourse.nodered.org/t/node-red-and-vs-code-integration/97672/16 "2025-06-25T09:47:34Z")
I have removed the hard-coded link to the node-red server (basic schoolboy error), and added a new parameter to the script, so it works with my unusual configuration, where i have several node-red servers running at same time on different ports.
[version 1.0.3](https://github.com/daniel-payne/functions-templates-manager)
There are three optional arguments you can send to the watch script
```bash
node functions-templates-watch --clean --flows-file ./flows.json --server-url http://127.0.0.1:1880
```
**--clean** This first removes the /src folder and does a clean extract from flows.json on startup. Don't forget to merge your changes back into node-red using the "review changes" in the node-red editor, as this will overwrite unsaved /src changes if the script re-starts.
**--flows-file** This allows you to run the scripts from anywhere, if you don't supply this value it defaults to ./flows.json
**--server-url** This allows the scripts to communicate with node-red running on different ports or different location, defaults to [http://127.0.0.1:1880](http://127.0.0.1:1880/)
---
### Author:  [@gNeandr](https://discourse.nodered.org/u/gNeandr)
#### Post date: [25 June 2025 15:17 UTC](https://discourse.nodered.org/t/node-red-and-vs-code-integration/97672/17 "2025-06-25T15:17:27Z")
Something is wrong with my installation.
With version 1.0.3 (and today's minor update) all functions and VUE files are resolved from `flows.json` to `/src` and can be edited with VScodium. The edited files are updated in `/src`, but the flows.json is not updated with the edit changes.
Is it a directory error or `chokidar` misconfigured?
What does “_changes back into node-red using the ” **review changes** “ in the node-red editor_” mean?
Does this mean “_Deploy_”? But this is not active!
---
### Author:  [@daniel-payne](https://discourse.nodered.org/u/daniel-payne)
#### Post date: [26 June 2025 09:07 UTC](https://discourse.nodered.org/t/node-red-and-vs-code-integration/97672/18 "2025-06-26T09:07:04Z")
I will do some more testing tonight to see if I can replicate your error. I was also planning to make a quick video, that shows among other things the review changes bit working, As sometimes you can miss that popup toast, and there is only a small warning triangle in the header bar of node red. I post here when I have checked everything, might not be a till tomorrow.
As it has grown beyond a small hack script for myself, I am thinking of refactoring and putting unit tests in place, but again that's going to take some time.
---
### Author:  [@codepoetza](https://discourse.nodered.org/u/codepoetza)
#### Post date: [26 June 2025 12:52 UTC](https://discourse.nodered.org/t/node-red-and-vs-code-integration/97672/19 "2025-06-26T12:52:02Z")
This looks promising! Certainly something I can make use of. If you are open to a suggestion: how about wrapping the function bodies into a callable structure: `function(msg){ <> }`? This would make dev-time test development more manageable.
---
### Author:  [@greengolfer](https://discourse.nodered.org/u/greengolfer)
#### Post date: [26 June 2025 15:54 UTC](https://discourse.nodered.org/t/node-red-and-vs-code-integration/97672/20 "2025-06-26T15:54:55Z")
I don't understand your suggestion.
The tool provided by Daniel (thanks again!) aims at allowing the edition on your preferred tool (VSCode or else) with the possibility to have multiple windows in parallel.
It shouldn't change the code of the function.
[Next page](https://discourse.nodered.org/t/node-red-and-vs-code-integration/97672.md?page=2)