如何在 Monaco Editor 中添加 angular 特定代码

Question

I am using Monaco editor to build my browser based IDE. In that, I want the user to write his Angular specific code eg:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {}

Right now Monaco editor shows syntax error. How to enable this feature in Monaco editor.

Answer 1

Monaco comes with a number of supported languages. Four of them (CSS, HTML, JSON, Typescript/Javascript) have full implementations (code completion etc.). More than 70 others at least have syntax highlighting support (C++, C#, Dart, Docker, Lua, to name a few).

Angular, however, is not among them, so you would have to write your own language support. Start by copying an existing contribution folder and modify the syntax rules for Angular. Later you can continue with things like validation and code completion.