Eclipse LSP4E 配置 JavaScript / TypeScript 支持

本文记录如何在 Eclipse 中使用 LSP4E 配置 *.js 和 *.ts 文件的语言服务能力。配置完成后，使用 Generic Editor 打开 JS/TS 文件时，可以获得补全、诊断、Hover、跳转定义、Outline、格式化等 LSP 功能。

注意：LSP4E 主要提供语言服务能力，不等同于完整语法高亮方案。如果需要更完整的语法高亮，通常还需要 TM4E/TextMate grammar，或者直接安装 Eclipse Wild Web Developer。

配图：整体工作方式

本机已完成的配置

当前 workspace 已经完成以下配置：

项目	值
Node.js	已安装
npm	已安装
Language Server	typescript-language-server
Language Server 版本	5.3.0
TypeScript 包	已全局安装
启动命令	typescript-language-server --stdio
Eclipse Launch 配置名	TypeScript Language Server
JS Content Type	javascript，绑定 *.js
TS Content Type	typescript，绑定 *.ts

相关配置文件：

文件	用途
.metadata/.plugins/org.eclipse.debug.core/.launches/TypeScript Language Server.launch	Eclipse External Program 启动配置
.metadata/.plugins/org.eclipse.core.runtime/.settings/org.eclipse.lsp4e.prefs	LSP4E content type 到 language server 的绑定
.metadata/.plugins/org.eclipse.core.runtime/.settings/javascript.prefs	JavaScript content type
.metadata/.plugins/org.eclipse.core.runtime/.settings/typescript.prefs	TypeScript content type
.metadata/.plugins/org.eclipse.core.runtime/.settings/org.eclipse.core.runtime.prefs	js / ts 文件扩展名映射

手动配置步骤

如果在另一台机器或另一个 workspace 重新配置，可以按下面步骤操作。

1. 安装 language server

使用 npm 全局安装 TypeScript language server 和 TypeScript：

npm install -g typescript-language-server typescript

安装后验证：

typescript-language-server --version
typescript-language-server --help

Windows 上通常会生成类似下面的启动脚本：

C:\Users\<用户名>\AppData\Roaming\npm\typescript-language-server.cmd

2. 创建 Eclipse External Program

在 Eclipse 中打开：

Run > External Tools > External Tools Configurations...

新建一个 Program 配置：

字段	填写
Name	TypeScript Language Server
Location	typescript-language-server.cmd 或完整路径
Arguments	--stdio
Allocate Console	建议勾选，方便排错

如果 Eclipse 找不到命令，建议填写完整路径，例如：

C:\Users\<用户名>\AppData\Roaming\npm\typescript-language-server.cmd

3. 创建或确认 Content Type

打开：

Window > Preferences > General > Content Types

确认有两个 Text 子类型：

Content Type	文件扩展名
JavaScript	js
TypeScript	ts

这两个 content type 必须是 Text 的子类型，否则 LSP4E 不会把它们当作文本文件处理。

4. 绑定 LSP4E

打开：

Window > Preferences > Language Servers

点击 Add...，添加两条绑定：

Content Type	Launch Configuration	Mode
JavaScript	TypeScript Language Server	run
TypeScript	TypeScript Language Server	run

保存后重启 Eclipse，或至少关闭并重新打开相关 JS/TS 文件。

配图：配置流程

使用方法

1. 在 Eclipse 中打开或新建 .js / .ts 文件。
2. 右键文件，选择：

Open With > Generic Editor

3. 如果文件已经打开，先关闭再重新打开。
4. 使用下面功能验证是否生效：

功能	验证方式
补全	输入对象名后按 Ctrl+Space
诊断	写一段明显错误的 JS/TS 代码，查看 Problems 或编辑器标记
Hover	鼠标悬停到变量、函数、类型上
跳转定义	对符号执行 Go to Definition
Outline	打开 Outline 视图查看结构
格式化	执行 Source/Format 或 LSP4E format 命令

也可以打开 Language Servers 视图确认服务是否启动：

Window > Show View > Other... > Language Servers

常见问题

打开文件后没有 LSP 功能

检查以下几点：

• 文件是否使用 Generic Editor 打开。
• Window > Preferences > Language Servers 中是否存在 JS/TS 绑定。
• TypeScript Language Server launch 配置里的 Location 是否指向有效的 .cmd 文件。
• 修改配置后是否重启 Eclipse，或关闭并重新打开文件。

只有补全/诊断，没有漂亮的语法高亮

这是正常现象。LSP4E 负责 LSP 能力，语法高亮通常由 TM4E/TextMate grammar 或其他编辑器插件提供。

如果想省去手动配置，推荐安装 Eclipse Wild Web Developer。它基于 LSP4E 集成了常见 Web 语言支持。

Language Server 没有启动

先在 PowerShell 中验证命令：

typescript-language-server --help

如果 PowerShell 可以运行，但 Eclipse 不行，在 External Program 的 Location 中使用完整路径：

C:\Users\<用户名>\AppData\Roaming\npm\typescript-language-server.cmd

TypeScript 项目提示不完整

建议在项目根目录添加 package.json 和 tsconfig.json。TypeScript language server 会根据这些项目文件提供更准确的类型分析。

快速验证代码

可以新建 test.js：

const user = { name: "Alice", age: 20 };

console.log(user.name);
console.log(user.notExists);

也可以新建 test.ts：

type User = {
  name: string;
  age: number;
};

const user: User = { name: "Alice", age: 20 };
user.age = "wrong";

打开后应能看到补全、Hover，以及类型或属性相关诊断。

本次配置结果摘要

完成后，重启 Eclipse，然后用 Generic Editor 打开 *.js / *.ts 文件即可开始使用。