I have undoubtedly missed something somewhere but whenever I paste JavaScript into the Monaco editor any formatting is lost. What should I be doing to retain any format?
In your .node-red folder there is the settings.js file
where you can configure some options for the Monaco Editor
Example:
editorTheme: {
page: {
css: "/Users/User/.node-red/myCustom.css",
},
codeEditor: {
lib: "monaco",
options: {
theme: "vs-dark",
formatOnType: false,
formatOnPaste: false,
useTabStops: true,
colorDecorators: true,
fontSize: 14,
"bracketPairColorization.enabled": true,
minimap: {
enabled: false,
},
},
},
projects: {
// To enable the Projects feature, set this value to true
enabled: false,
},
},
I believe if you set these two options to false it should stop any auto formatting
formatOnType: false,
formatOnPaste: false,
Whhhhhhy 
I find the minimap incredibly useful - I can spot code patterns and move straight to the area of interest
I use this too - great feature.
I leave this on too - sometimes it does mess up the format - BUT - you simply press undo (CTRL+Z) immediately after pasting & it undoes the auto formatting. I find in JS it works well but sometimes in the template node pasting code between script tags or style tags is where it messes up.
It just gets in the way!
As we are sharing - here are my settings:
codeEditor: {
/** Select the text editor component used by the editor.
* Defaults to "ace", but can be set to "ace" or "monaco"
*/
lib: 'monaco', // 'ace',
options: {
/** The follow options only apply if the editor is set to "monaco"
*
* theme - must match the file name of a theme in
* packages/node_modules/@node-red/editor-client/src/vendor/monaco/dist/theme
* e.g. "tomorrow-night", "upstream-sunburst", "github", "my-theme"
*/
theme: 'vs-dark', // 'vs',
/** other overrides can be set e.g. fontSize, fontFamily, fontLigatures etc.
* for the full list, see https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.istandaloneeditorconstructionoptions.html
*/
fontSize: 14,
//fontFamily: "Cascadia Code, Fira Code, Consolas, 'Courier New', monospace",
fontFamily: 'Consolas, "Courier New", monospace',
fontLigatures: false,
colorDecorators: true,
dragAndDrop: true,
linkedEditing: true,
minimap: {
enabled: false,
},
mouseWheelZoom: true,
showFoldingControls: 'always',
useTabStops: true,
},
},
1 Like
regarding the minimap .. for the same reason as Julian .. to much info .. besides my code is not hundred of lines in order to need it 
"bracketPairColorization.enabled": true, this is a nice addition with the new version. i saw that the monaco version was bumped in the new NR beta and read in monaco changelog that they added this option and tested it out. it makes the code more readable.
formatOnPaste: false, me too i have it to true. i just edited it as an example for @Buckskin
1 Like
Thank you everyone I have set formatOnPaste: false, and it sorted out my issues with pasting. What is annoying is that I knew about CTRL+Z because I use it all the time when editing. It was just that when I pasted a lot of Javascript code into a ui_template and the whole thing looked so totally messed up, it never occurred to me to try it. Since neither of you use formatOnPaste: false, I will keep it in and see if it causes any issues.
I have set "bracketPairColorization.enabled": true, but so far I haven't seen any effect. Is there anything else that should be set?
Sorry Steve, but I also dumped the minimap, it was just cluttering up my workspace. 
As mentioned, its an option for the new version of Monaco.
Only available in the Node-red 2.1.0-beta for now.
Then I still have a problem because I am trialling this on Node-red 2.1.0-beta.2
hmm strange
1.can you show us that part of you settings.js file.
2. have you restarted node-red
3. have you refreshed / cleared cache of your browser ?
ps. just noticed that you mentioned that the js you have is in ui_template.
embedded script coloring may not work for Monaco at the moment. Check if bracketPairColorization works in a Function node.
Tried all that and have now noticed that {} & () have all turned colours. So probably WAS working, just not as I was expecting.
Is there an easy way to change the colours as I like a light theme and the blue, green etc do not show up that well?
Thank you for your help.
There are a lot of Monaco themes bundled. You can even create your own.
For reference, here a list of all themes available: node-red/packages/node_modules/@node-red/editor-client/src/vendor/monaco/dist/theme at master · node-red/node-red · GitHub
Can't wait until the new coloured alignment lines make it into live and then into Monaco. I'm trying them on VScode and I really like them
Yeah, its pretty sweet...
2 Likes
OK, looked through a bunch of themes but cannot find any that change the bracket colours. Apparently it is done like so;
"editor.bracketPairColorization.enabled": true,
"workbench.colorCustomizations": {
"editorBracketHighlight.foreground1": "#B48EAD",
"editorBracketHighlight.foreground2": "#A3BE8C",
"editorBracketHighlight.foreground3": "#EBCB8B",
"editorBracketHighlight.foreground4": "#D08770",
"editorBracketHighlight.foreground5": "#BF616A",
"editorBracketHighlight.foreground6": "#abb2c0",
"editorBracketHighlight.unexpectedBracket.foreground": "#db6165"
},
But how do I apply that to the node-red version?
where did you get this info from? (link please)
I suspect these are VSCode specific
What you can do instead is...
Pick a theme you like, edit it & add bold font style to the brackets e.g...
- in
settings.js, set the theme todawn - Open
packages/node_modules/@node-red/editor-client/public/vendor/monaco/dist/theme/dawn.jsonand add the following entries...
{
"fontStyle": "bold",
"token": "delimiter.parenthesis.js"
},
{
"fontStyle": "bold",
"token": "delimiter.bracket.js"
},
Result...
If you want to style anything in monaco, you need to find the token then update (or add) it to the JSON theme like i did above ↑
@Buckskin I stand corrected.
You can adjust bracket colours by adding those entries to the theme colors
Steve, they were from the VSCode info site.
I am quite happy with the vs theme so I would like to add the changes as shown, only - where is the
vs theme file located? I have search my Pi for packages/node_modules/@node-red/editor-client/src/vendor/monaco/dist/theme and have been unable to locate it
Sorry, that was my src tree.
Its usually here on linux / pi
Thats built in. You simply create a new theme that inherits vs with your tweaks
e.g...
my-theme.json
{
"base": "vs",
"inherit": true,
"rules": [
{
"fontStyle": "bold",
"token": "delimiter.parenthesis.js"
},
{
"fontStyle": "bold",
"token": "delimiter.bracket.js"
}
],
"colors": {
"editorBracketHighlight.foreground1": "#B48EAD",
"editorBracketHighlight.foreground2": "#A3BE8C",
"editorBracketHighlight.foreground3": "#EBCB8B",
"editorBracketHighlight.foreground4": "#D08770",
"editorBracketHighlight.foreground5": "#BF616A",
"editorBracketHighlight.foreground6": "#abb2c0",
"editorBracketHighlight.unexpectedBracket.foreground": "#db6165"
}
}
settings.js
codeEditor: {
lib: "monaco", //can be "monaco" or "ace"
options: {
// /* theme - must match the file name of a theme in
// * packages/node_modules/@node-red/editor-client/src/vendor/monaco/dist/theme
// * e.g. "tomorrow-night", "upstream-sunburst", "github", "my-theme"
// */
theme: "my-theme",
}
