Add VSCode debug run how to

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.

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": [
+                "<node_internals>/**"
+            ],
+            "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`.*