From 9b986be7f9ec1c94179eff8baaa5dce0d3e37ac7 Mon Sep 17 00:00:00 2001 From: Steve-Mcl Date: Thu, 22 Oct 2020 22:44:30 +0100 Subject: [PATCH 1/2] Add VSCode debug run how to --- docs/getting-started/development.md | 50 +++++++++++++++++++++++++++++ 1 file changed, 50 insertions(+) diff --git a/docs/getting-started/development.md b/docs/getting-started/development.md index 742fca95..365edd2c 100644 --- a/docs/getting-started/development.md +++ b/docs/getting-started/development.md @@ -99,3 +99,53 @@ to specify a different flow file: ``` grunt dev --flowFile=my-flow-file.json ``` + + +### Debug run Node-RED in VS Code + +It is possible to set-up VS Code to both build and start debugging by simply pressing F5. Once you have cloned the project and open it in VS code, you will need to add an entry in `launch.json` and `tasks.json`... + +#### Modify launch.json ... +``` + { + "version": "0.2.0", + "configurations": [ + { + "type": "node", + "request": "launch", + "name": "Debug node-red", + "skipFiles": [ + "/**" + ], + "env": { "NODE_ENV": "development" }, + "preLaunchTask": "npm: build-dev", + "program": "${workspaceFolder}/packages/node_modules/node-red/red.js" + } + ] + } +``` +*NOTE: to open launch.json, ctrl+shift+p, type `debug open launch`* + + +#### Add an entry in tasks.json +``` +{ + "version": "2.0.0", + "tasks": [ + { + "type": "npm", + "script": "build-dev", + "group": "build", + "problemMatcher": [], + "label": "npm: build-dev", + "detail": "build-dev" + } + ] +} +``` +*NOTE: if you don't have a tasks file, create one with ctrl+shift+p, type `configure task`* +*NOTE: if you already have a tasks file, open it with ctrl+p, type `tasks.json`* + +#### Debug Run +Now you can run the project by pressing F5. +*NOTE: If you have more than one config, select `Debug node-red`.* \ No newline at end of file From 2308804415cda7ea97482bddb879297ad484a4d7 Mon Sep 17 00:00:00 2001 From: Steve-Mcl Date: Wed, 6 Oct 2021 22:32:08 +0100 Subject: [PATCH 2/2] Update monaco info as per issue note --- docs/api/ui/themes/index.md | 64 +++++++++++++++++++++++++++++++++---- 1 file changed, 57 insertions(+), 7 deletions(-) diff --git a/docs/api/ui/themes/index.md b/docs/api/ui/themes/index.md index 8db6b551..8352b9c3 100644 --- a/docs/api/ui/themes/index.md +++ b/docs/api/ui/themes/index.md @@ -126,21 +126,20 @@ Node-RED ### Theming the Monaco editor As well as providing custom CSS and scripts, a theme plugin can also provide custom -Monaco editor options, include what theme it should use. +Monaco editor options including what theme it should use. #### Setting the Monaco theme by name -Monaco comes with a number of built-in themes available. The full list is [here](https://github.com/node-red/node-red/tree/master/packages/node_modules/%40node-red/editor-client/src/vendor/monaco/dist/theme). +Monaco comes with a number of built-in themes available. The full list is [here](https://github.com/node-red/node-red/tree/master/packages/node_modules/%40node-red/editor-client/src/vendor/monaco/dist/theme). Additional settings for Monaco options can be found [here](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.istandaloneeditorconstructionoptions.html). The name of the theme can be provided in the plugin settings: ```javascript -RED.plugins.registerPlugin("midnight-red2", { +RED.plugins.registerPlugin("midnight-red", { type: "node-red-theme", css: "style.css", monacoOptions: { theme: "vs-dark", // Monaco theme name - fontLigatures: true, fontSize: 14, fontLigatures: true, fontFamily: "Cascadia Code, Fira Code, Consolas, 'Courier New', monospace", @@ -151,10 +150,12 @@ RED.plugins.registerPlugin("midnight-red2", { #### Setting a custom Monaco theme -Rather than identify a theme by name. the `monacoOptions.theme` setting can be -used to provide a custom Monaco theme object: +Rather than specifying a built-in theme by name, the `monacoOptions.theme` setting can +be used to provide a custom Monaco theme object: ```javascript +RED.plugins.registerPlugin("midnight-red", { + monacoOptions: { theme: { "base": "vs-dark", "inherit": true, @@ -187,7 +188,56 @@ used to provide a custom Monaco theme object: ] } } - }) +}) +``` + + +#### Setting a custom Monaco theme from a JSON file + +Rather than hardcode the theme settings, you can store the Monaco theme JSON in a +separate file and use `require` to import it: + +```javascript +RED.plugins.registerPlugin("midnight-red", { + monacoOptions: { + theme: require("midnight-red-monaco-theme.json"), + } +}) +``` + +`midnight-red-monaco-theme.json` file example: +```json +{ + "base": "vs-dark", + "inherit": true, + "colors": { + "editor.foreground": "#CCC", + "editor.background": "#434954", + "editor.selectionBackground": "#80000080", + "editor.lineHighlightBackground": "#80000040", + "editorCursor.foreground": "#7070FF", + "editorWhitespace.foreground": "#BFBFBF" + }, + "rules": [ + { + "background": "434954", + }, + { + "foreground": "aeaeae", + "fontStyle": "italic", + "token": "comment" + }, + { + "foreground": "d8fa3c", + "token": "string" + }, + { + "foreground": "d8fa3c", + "fontStyle": "bold", + "token": "constant" + }, + ] +} ``` The specific details of how to create a Monaco theme is beyond the scope of our documentation.