一招解决vue3+vite+monaco-editor选择javascript类型编辑报错

解决 JavaScript 编辑器中 "Error: Unexpected usage at EditorSimpleWorker.loadForeignModule" 错误

在使用 Vue3、Vite 和 Monaco Editor 进行 JavaScript 编辑时，你可能会遇到 "Error: Unexpected usage at EditorSimpleWorker.loadForeignModule" 错误。不要担心，通过以下几个步骤即可轻松解决此问题。

步骤 1：安装 JavaScript 语言支持

首先，确保已安装 Monaco Editor 的 JavaScript 语言支持。通过运行以下命令进行安装：

npm install monaco-editor-javascript

步骤 2：导入 JavaScript 语言支持

安装后，在代码中导入 Monaco Editor JavaScript，修改 main.js 文件，添加以下代码：

import 'monaco-editor/esm/vs/language/javascript/javascript.js';

步骤 3：配置 Monaco Editor

配置 Monaco Editor 以使用 JavaScript 语言支持，在代码中添加：

monaco.languages.typescript.javascriptDefaults.setEagerModelSync(true);

步骤 4：解决 "Error: Unexpected usage at EditorSimpleWorker.loadForeignModule" 错误

此时，你应该可以在 Monaco Editor 中编辑 JavaScript 代码，但仍可能会遇到上述错误。要解决此问题，请添加以下代码：

monaco.languages.registerWorkerParticipant({
  getWorker(_workerId, _defaultWorkerFactory) {
    return new Promise((resolve, _reject) => {
      require(['vs/language/javascript/javascriptWorker'], resolve);
    });
  }
});

现在，你应该能够在 Monaco Editor 中编辑 JavaScript 代码，而不会遇到任何错误。

常见问题解答

• 为什么会出现 "Error: Unexpected usage at EditorSimpleWorker.loadForeignModule" 错误？

此错误通常是因为未正确配置 Monaco Editor 的 JavaScript 语言支持而引起的。

• 如何安装 Monaco Editor 的 JavaScript 语言支持？

通过运行 npm install monaco-editor-javascript 命令进行安装。

• 如何导入 Monaco Editor JavaScript？

在 main.js 文件中添加 import 'monaco-editor/esm/vs/language/javascript/javascript.js';。

• 如何在 Monaco Editor 中配置 JavaScript 语言支持？

通过添加 monaco.languages.typescript.javascriptDefaults.setEagerModelSync(true); 进行配置。

• 如何解决 "Error: Unexpected usage at EditorSimpleWorker.loadForeignModule" 错误？

添加 monaco.languages.registerWorkerParticipant({ ... }) 代码段即可解决此错误。