修改monaco-languageclient示例为TS编辑时monaco未定义报错如何解决

错误原因与解决方案 #

错误1：Uncaught ReferenceError: monaco is not defined #

虽然你在代码中引入了monaco-editor，但monaco-languageclient内部默认读取全局window下挂载的monaco对象，本地引入的实例没有暴露到全局就会触发该报错。
修复方案：在client.ts的monaco引入语句后添加全局挂载逻辑：

import * as monaco from 'monaco-editor'
// 新增以下代码
(window as any).monaco = monaco;

错误2：Error: Unexpected usage #

该报错由monaco编辑器worker加载失败导致，需要正确配置worker的打包和加载规则。
修复方案：

1. 在client.ts创建编辑器的代码前添加worker路径配置（以webpack打包为例）：

self.MonacoEnvironment = {
  getWorkerUrl: function (workerId, label) {
    if (label === 'typescript' || label === 'javascript') {
      return './ts.worker.bundle.js';
    }
    return './editor.worker.bundle.js';
  }
};

2. 在webpack.config.js中添加worker打包入口：

module.exports = {
  entry: {
    main: './src/client.ts',
    'editor.worker': 'monaco-editor/esm/vs/editor/editor.worker.js',
    'ts.worker': 'monaco-editor/esm/vs/language/typescript/ts.worker',
  }
  // 其余配置保持不变
}

如果使用vite构建，可以直接安装vite-plugin-monaco-editor插件完成配置，无需手动修改入口。

自动补全失效修复 #

你当前的server.ts仅提供了静态资源服务，没有启动TypeScript语言服务的WebSocket接口，所以就算解决前两个报错，补全功能也无法使用。
修复方案：

1. 安装依赖：

npm install typescript-language-server vscode-ws-jsonrpc ws

2. 替换server.ts代码，同时启动静态服务和TS语言服务：

import * as express from "express";
import * as http from 'http';
import * as ws from 'ws';
import { IWebSocket, WebSocketMessageReader, WebSocketMessageWriter } from 'vscode-ws-jsonrpc';
import { createConnection, ProposedFeatures } from 'vscode-languageserver/node';
import { start } from 'typescript-language-server/lib/nodeServer';

const app = express();
app.use(express.static(__dirname));
const server = http.createServer(app);
const wss = new ws.Server({
  noServer: true,
  path: '/ws'
});

server.on('upgrade', (request, socket, head) => {
  wss.handleUpgrade(request, socket, head, (ws) => {
    wss.emit('connection', ws, request);
  });
});

wss.on('connection', (ws) => {
  const socket: IWebSocket = {
    send: content => ws.send(content),
    onMessage: cb => ws.on('message', cb),
    onError: cb => ws.on('error', cb),
    onClose: cb => ws.on('close', cb),
    dispose: () => ws.close()
  };
  const reader = new WebSocketMessageReader(socket);
  const writer = new WebSocketMessageWriter(socket);
  const connection = createConnection(ProposedFeatures.all, reader, writer);
  start(connection);
});

server.listen(4200, () => {
  console.log('服务已启动，访问 http://localhost:4200 预览');
});

3. 修改client.ts中的WebSocket连接地址，和服务端端口对齐：

const url = createUrl('ws://localhost:4200/ws')

4. 删掉client.ts中手动注册typescript语言的代码，monaco本身已经内置了TS语言配置，重复注册会导致冲突。

完成以上修改后重新打包运行，报错即可消失，TypeScript的自动补全、语法校验等功能可正常使用。

内容的提问来源于stack exchange，提问作者Jack