Monaco-Editor JavaScript Syntax Highlighting of Keywords

Question

When using monaco-editor (0.15.6) embedded in a web page for editing javascript the syntax highlighting/colorization displays incorrect colors for object properties/functions if the property name or function name corresponds to a language keyword (such as 'delete' or 'throw'). The syntax highlighting/colorization in VS Code does not have this same issue, so wonder if there is a way to fix/override this behavior when using monaco-editor in a browser. Here is an example of the highlighting when an object has a property named 'delete'

You will notice that the property named 'prop2' has the correct color, however the property named 'delete' does not. Theme and language setup are below:

  monaco.editor.setTheme('vs-dark');
  monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
    noSemanticValidation: false,
    noSyntaxValidation: false,
  });
  monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
    allowNonTsExtensions: true,
    experimentalDecorators: true,
    esModuleInterop: true,
    allowSyntheticDefaultImports: true,
    noImplicitAny: true,
    module: monaco.languages.typescript.ModuleKind.ESNext,
    target: monaco.languages.typescript.ScriptTarget.ESNext,
    allowJs: true,
    checkJs: true,
    noUnusedLocals: true,
    noFallthroughCasesInSwitch: true,
    noImplicitThis: true,
    typeRoots: ["node_modules/@types"]
  });

Any tips appreciated!

Rami Rami · Accepted Answer · 2019-01-15T12:00:13

Not sure, but I think it's because delete is a reserved word. All your properties will have the same colors. But reserved words will have a different color.

Monaco-Editor JavaScript Syntax Highlighting of Keywords

1 Answers