如何将typescript-language-server与monaco-editor结合使用？

1. 安装依赖 #

首先安装所需的npm包：

npm install monaco-editor monaco-languageclient typescript-language-server typescript --save

2. 基础准备 #

确保项目根目录存在tsconfig.json，示例配置：

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "strict": true
  },
  "include": ["src/**/*"]
}

3. 核心实现代码 #

以下是完整的连接逻辑（以Node.js渲染进程/桌面端环境为例，浏览器环境需调整进程启动方式）：

import * as monaco from 'monaco-editor';
import { MonacoLanguageClient, createMonacoServices } from 'monaco-languageclient';
import { spawn } from 'child_process';
import { createMessageConnection, IStreamMessageReader, IStreamMessageWriter } from 'vscode-jsonrpc';

// 初始化Monaco编辑器
const editor = monaco.editor.create(document.getElementById('editor-container'), {
  value: 'const test: string = "hello world";',
  language: 'typescript',
  theme: 'vs-dark'
});

// 启动typescript-language-server进程
const serverProcess = spawn('npx', ['ts-language-server', '--stdio'], {
  cwd: process.cwd(),
  env: process.env
});

// 建立RPC通信通道
const reader: IStreamMessageReader = createMessageConnection(
  serverProcess.stdout,
  serverProcess.stdin
).reader;
const writer: IStreamMessageWriter = createMessageConnection(
  serverProcess.stdout,
  serverProcess.stdin
).writer;
const connection = createMessageConnection(reader, writer);

// 配置并启动语言客户端
const services = createMonacoServices(editor._codeEditorService);
const client = new MonacoLanguageClient({
  name: 'TypeScript Language Client',
  clientOptions: {
    documentSelector: [{ language: 'typescript' }],
    workspaceFolder: {
      uri: monaco.Uri.file(process.cwd()),
      name: 'root'
    }
  },
  connectionProvider: {
    get: () => Promise.resolve(connection)
  }
});

client.start();

// 错误监听与资源清理
serverProcess.on('error', (err) => {
  console.error('TS语言服务启动失败:', err);
});

window.addEventListener('unload', () => {
  client.stop();
  serverProcess.kill();
});

关键注意事项 #

• 浏览器环境适配：纯浏览器无法直接启动Node进程，需通过后端代理或Web Worker封装语言服务（可基于monaco-languageclient的Web Worker示例改造）。
• 服务调用路径：若已全局安装typescript-language-server，可直接用ts-language-server代替npx ts-language-server。
• 配置文件读取：workspaceFolder的URI必须指向项目根目录，确保服务能加载到tsconfig.json。

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