如何根据摩纳哥编辑器中的文件扩展名动态设置语言？

Question

我正在开发 monaco-editor 来显示本地代码文件的内容，这些文件可能是用各种语言编写的，所以我想知道如何根据文件扩展名动态 set/change monaco 编辑器的语言, 或不带扩展名的文件的第一行（如 #!/usr/bin/env python）.

似乎 monaco-editor 本身没有这个功能，但 VSCode 显然有。

我想定义一个名为 checkLanguage(file_path) 的方法，它采用文件路径和 returns 表示 monaco-editor 支持的语言的字符串。如果不能确定语言，就return纯文本。

monaco.editor.setModelLanguage(model, checkLanguage(file_path))

支持的语言：https://github.com/microsoft/monaco-languages

Answer 1

我只有一个看起来像这样的对象：

fileTypes: {
    css: 'css',
    js: 'javascript',
    json: 'json',
    md: 'markdown',
    mjs: 'javascript',
    ts: 'typescript',
}

创建模型时调用 monaco.editor.createModel(file.content, fileTypes[file.extension])。您显然可以扩展列表以包含您想要的任何内容。也许在某些时候他们会添加一个映射，这样您就可以只使用扩展名进行初始化。

在您的情况下，您可以 monaco.editor.setModelLanguage(model, fileTypes[file_path.split['.'].pop()])。这将涵盖您拥有多个句点的文件的情况，例如 test.min.js.

Answer 2

这些语言已经定义了它们可以处理的文件扩展名，因此可以允许 Monaco 通过给它文件名来选择合适的语言：

const model = monaco.editor.createModel(
  value,
  undefined, // language
  monaco.Uri.file(filename) // uri
)

editor.setModel(model)

Answer 3

我找到了一个有用的npm库，可以根据文件名或内容检测编程语言，并在我的项目中实现了语言检测，如下所示：

  const langDetector = require('language-detect')
  const langMapper = require('language-map')
  // async way
  let lang=''
  langDetector(abs_path, (err, language) => {
  if (err) {
     console.log(err)
     lang = 'plaintext'
  } else {
     lang = langMapper[language].aceMode
  }
  // sync way
  lang = langMapper[langDetector.sync(abs_path)].aceMode

[1] 图书馆 link: https://github.com/blakeembrey/node-language-detect

[2] 完整代码：https://github.com/Symbolk/SmartCommit/blob/master/src/components/utils/gitutils.js

如何根据摩纳哥编辑器中的文件扩展名动态设置语言？

How to dynamically set language according to file extension in monaco editor?

monaco-editor