如何在Monaco编辑器中根据文件扩展名动态设置语言？

Question

我正在使用monaco-editor来显示本地代码文件的内容，这些文件可能用各种语言编写，所以我想知道如何根据文件的扩展名或没有扩展名的第一行（例如#!/usr/bin/env python）动态设置/更改monaco编辑器的语言。

看起来monaco-editor本身并没有这个功能，但显然VSCode有。

我想定义一个名为checkLanguage(file_path)的方法，它接收文件路径并返回代表monaco-editor支持的语言的字符串。如果无法确定语言，则只返回纯文本。

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

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

- K. Symbol

Answer 1

编程语言已经定义了它们可以处理的文件扩展名，因此可以通过将文件名提供给 Monaco 来让其选择适当的语言：

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

editor.setModel(model)

- Alf Eaton

---

这适用于全局配置。对于页面上有多个编辑器（分割窗格）的情况，我还没有确定更新每个编辑器语言的方法。 - Jeff Voss

如果每个编辑器都有自己的模型（这可能应该是的），我看不出为什么它不能工作。 - Mosh Feu

Answer 2

我找到了一个有用的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] 库链接：https://github.com/blakeembrey/node-language-detect [2] 完整代码：https://github.com/Symbolk/SmartCommit/blob/master/src/components/utils/gitutils.js

- K. Symbol

Answer 3

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

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。

- Benny Hinrichs