Monaco Editor Translate

Appearance

languages ​

原文链接

https://microsoft.github.io/monaco-editor/docs.html#modules/languages.html

languages 是语言服务模块，提供了常用的 javascript、typescript、css、html 等语言的语法高亮、代码提示、代码片段等功能。

快捷链接 ​

FgetEncodedLanguageId
FgetLanguages
FonLanguage
FonLanguageEncountered
Fregister
FregisterCodeActionProvider
FregisterCodeLensProvider
FregisterColorProvider
FregisterCompletionItemProvider
FregisterDeclarationProvider
FregisterDefinitionProvider
FregisterDocumentFormattingEditProvider
FregisterDocumentHighlightProvider
FregisterDocumentRangeFormattingEditProvider
FregisterDocumentRangeSemanticTokensProvider
FregisterDocumentSemanticTokensProvider
FregisterDocumentSymbolProvider
FregisterFoldingRangeProvider
FregisterHoverProvider
FregisterImplementationProvider
FregisterInlayHintsProvider
FregisterInlineCompletionsProvider
FregisterInlineEditProvider
FregisterLinkProvider
FregisterLinkedEditingRangeProvider
FregisterNewSymbolNameProvider
FregisterOnTypeFormattingEditProvider
FregisterReferenceProvider
FregisterRenameProvider
FregisterSelectionRangeProvider
FregisterSignatureHelpProvider
FregisterTokensProviderFactory
FregisterTypeDefinitionProvider
FsetColorMap
FsetLanguageConfiguration
FsetMonarchTokensProvider
FsetTokensProvider

getEncodedLanguageId ​

  • 语法：getEncodedLanguageId(languageId): number

  • 参数：languageId: string

  • 返回值：number

  • 描述：用于获取指定语言的编码ID

  • 示例：

js
const allLanguages = languages.getLanguages();
console.log(allLanguages);
// 这个 ID 就是 languages.getLanguages(); 数组中的下标
const jsID = languages.getEncodedLanguageId("javascript");
console.log(jsID);
  • 输出：

getLanguages ​

  • 语法：getLanguages(): ILanguageExtensionPoint[]

  • 参数：-

  • 返回值：ILanguageExtensionPoint

  • 描述：获取所有已注册的语言ID的数组

  • 示例：

js
const allLanguages = languages.getLanguages();
console.log(allLanguages);

onLanguage ​

  • 语法：onLanguage(languageId, callback): IDisposable

  • 参数：

    • languageId: string
    • callback: (() => void)

  • 返回值：IDisposable

  • 描述：监听语言注册事件。

  • 示例：

js
languages.onLanguage('javascript', () => {
    console.log('language registered')
})

onLanguageEncountered ​

  • 语法：onLanguageEncountered(languageId, callback): IDisposable

  • 参数：

    • languageId: string
    • callback: (() => void)

  • 返回值：IDisposable

  • 描述：当一种语言首次与文本模型相关联时，或在另一种语言的标记化过程中遇到一种语言时触发的事件。

  • 示例：

js
monaco.languages.onLanguageEncountered('javascript', () => {
    // ...
})

register ​

  • 语法：register(language): void

  • 参数：ILanguageExtensionPoint

  • 返回值：void

  • 描述：注册一种新的语言。

  • 示例：

js
// 定义要注册的语言的扩展点对象
const language = {
  id: "vue",
  extensions: [".vue"],
  aliases: ["vue", "Vue"],
  mimetypes: ["text/vue"],
};

// 注册新语言
languages.register(language);

registerCodeActionProvider ​

registerCodeLensProvider ​

registerColorProvider ​

registerCompletionItemProvider ​

registerDeclarationProvider ​

registerDefinitionProvider ​

registerDocumentFormattingEditProvider ​

registerDocumentHighlightProvider ​

registerDocumentRangeFormattingEditProvider ​

registerDocumentRangeSemanticTokensProvider ​

registerDocumentSemanticTokensProvider ​

registerDocumentSymbolProvider ​

registerFoldingRangeProvider ​

registerHoverProvider ​

registerImplementationProvider ​

registerInlayHintsProvider ​

registerInlineCompletionsProvider ​

registerInlineEditProvider ​

registerLinkProvider ​

  • 语法：registerLinkProvider(languageSelector, provider): IDisposable

  • 参数：

  • 返回值：IDisposable

  • 描述：注册一个可以在文本中查找链接的链接提供程序。

registerLinkedEditingRangeProvider ​

registerNewSymbolNameProvider ​

registerOnTypeFormattingEditProvider ​

  • 语法：registerOnTypeFormattingEditProvider(languageSelector, provider): IDisposable

  • 参数：

  • 返回值：IDisposable

  • 描述：注册一个格式化程序，该格式化程序可以在用户键入时进行格式化。

registerReferenceProvider ​

registerRenameProvider ​

registerSelectionRangeProvider ​

registerSignatureHelpProvider ​

registerTokensProviderFactory ​

registerTypeDefinitionProvider ​

setColorMap ​

  • 语法：setColorMap(colorMap): void

  • 参数：colorMap: string[]

  • 返回值：void

  • 描述：更改用于标记颜色的颜色映射。

setLanguageConfiguration ​

  • 语法：setLanguageConfiguration(languageId, configuration): IDisposable

  • 参数：

  • 返回值：IDisposable

  • 描述：设置语言的编辑配置。

setMonarchTokensProvider ​

查看代码
js
// 定义要注册的语言的扩展点对象
const language = {
  id: "vue",
  extensions: [".vue"],
  aliases: ["vue", "Vue"],
  mimetypes: ["text/vue"],
};

// 注册新语言
languages.register(language);

// 自定义高亮
languages.setMonarchTokensProvider("vue", {
  tokenizer: {
    root: [
      ["template", "vue-constant"], // 常量
      [
        /<\s*\/?\s*\w+(?:\s+\w+(?:\s*=\s*(?:".*?"|'.*?'|[^'">\s]+))?)*\s*\/?\s*>/,
        "vue-template",
      ], // 匹配 html 标签
    ],
  },
});
editor.defineTheme("vue-theme", {
  base: "vs",
  inherit: true,
  rules: [
    // 针对不同的规则设置不同的高亮
    { token: "vue-template", foreground: "#ad28ee" },
    { token: "vue-constant", foreground: "#ad28ee", fontStyle: "bold" }, // 加粗
  ],
  colors: {
    // 统一的颜色配置
    // "editor.background": "#1e1e1e",
    "editor.foreground": "#ff0000", // 编辑器字体
    "editorCursor.foreground": "#00ffff", // 编辑器光标
    // "editor.lineHighlightBackground": "#3c3c3c",
    "editorLineNumber.foreground": "#d4d4d4",
    // "editor.selectionBackground": "#3c3c3c",
  },
});

const edi = editor.create(dom, {
  value: `<template>
  <div>
      vue template monaco
  </div>
</template>

<script>
export default {
  name:"App",
  data(){
      return {
          
      }
  },
}
<\/script>

<style>
.app{
  color:red
}
<\/style>`,
  language: "vue",
});

editor.setTheme("vue-theme");

setTokensProvider ​