Clash Party

Monaco Editor ​

Monaco Editor 是一个广受欢迎的代码编辑器，也是 Visual Studio Code 的核心编辑器。它是一个完全可定制的基于浏览器的编辑器，具有丰富的功能，比如语法高亮、自动补全、代码检查等。

Monaco Editor

主要功能 ​

  • 多语言支持：Monaco 自带对多种编程语言的支持，包括 JavaScript、TypeScript、CSS、HTML 等。
  • 语法高亮：支持多种编程语言的语法高亮显示。
  • 代码自动补全：根据上下文提供智能的代码补全建议。
  • 代码检查和错误提示：内置语法检查和错误提示功能，帮助开发者实时发现问题。
  • 键盘快捷键：支持与 Visual Studio Code 类似的键盘快捷键，便于操作。

在页面中创建编辑器实例： ​

const editor = monaco.editor.create(container, {  value: "# Clash 配置",  language: "yaml",  theme: "vs-dark",  automaticLayout: true,  minimap: { enabled: false }});

​

  • Clash Party 配置编辑器的代码高亮与校验
  • 需要内嵌代码编辑能力的 Web 应用
  • 在线 YAML / JSON 编辑与 Diff

​

  • 需先加载 monaco 的 worker，否则高亮 / 补全异常
  • automaticLayout 可避免容器尺寸变化后编辑器不自适应
  • 大文件建议关闭小地图与 minimap 以提升性能