Eclipse LSP4E 配置 JavaScript / TypeScript 支持

Eclipse LSP4E 配置 JavaScript / TypeScript 支持

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

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

配图：整体工作方式

#mermaid-svg-jEyafWkYqHw4rITV{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-jEyafWkYqHw4rITV .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-jEyafWkYqHw4rITV .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-jEyafWkYqHw4rITV .error-icon{fill:#552222;}#mermaid-svg-jEyafWkYqHw4rITV .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-jEyafWkYqHw4rITV .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-jEyafWkYqHw4rITV .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-jEyafWkYqHw4rITV .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-jEyafWkYqHw4rITV .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-jEyafWkYqHw4rITV .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-jEyafWkYqHw4rITV .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-jEyafWkYqHw4rITV .marker{fill:#333333;stroke:#333333;}#mermaid-svg-jEyafWkYqHw4rITV .marker.cross{stroke:#333333;}#mermaid-svg-jEyafWkYqHw4rITV svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-jEyafWkYqHw4rITV p{margin:0;}#mermaid-svg-jEyafWkYqHw4rITV .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-jEyafWkYqHw4rITV .cluster-label text{fill:#333;}#mermaid-svg-jEyafWkYqHw4rITV .cluster-label span{color:#333;}#mermaid-svg-jEyafWkYqHw4rITV .cluster-label span p{background-color:transparent;}#mermaid-svg-jEyafWkYqHw4rITV .label text,#mermaid-svg-jEyafWkYqHw4rITV span{fill:#333;color:#333;}#mermaid-svg-jEyafWkYqHw4rITV .node rect,#mermaid-svg-jEyafWkYqHw4rITV .node circle,#mermaid-svg-jEyafWkYqHw4rITV .node ellipse,#mermaid-svg-jEyafWkYqHw4rITV .node polygon,#mermaid-svg-jEyafWkYqHw4rITV .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-jEyafWkYqHw4rITV .rough-node .label text,#mermaid-svg-jEyafWkYqHw4rITV .node .label text,#mermaid-svg-jEyafWkYqHw4rITV .image-shape .label,#mermaid-svg-jEyafWkYqHw4rITV .icon-shape .label{text-anchor:middle;}#mermaid-svg-jEyafWkYqHw4rITV .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-jEyafWkYqHw4rITV .rough-node .label,#mermaid-svg-jEyafWkYqHw4rITV .node .label,#mermaid-svg-jEyafWkYqHw4rITV .image-shape .label,#mermaid-svg-jEyafWkYqHw4rITV .icon-shape .label{text-align:center;}#mermaid-svg-jEyafWkYqHw4rITV .node.clickable{cursor:pointer;}#mermaid-svg-jEyafWkYqHw4rITV .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-jEyafWkYqHw4rITV .arrowheadPath{fill:#333333;}#mermaid-svg-jEyafWkYqHw4rITV .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-jEyafWkYqHw4rITV .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-jEyafWkYqHw4rITV .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-jEyafWkYqHw4rITV .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-jEyafWkYqHw4rITV .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-jEyafWkYqHw4rITV .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-jEyafWkYqHw4rITV .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-jEyafWkYqHw4rITV .cluster text{fill:#333;}#mermaid-svg-jEyafWkYqHw4rITV .cluster span{color:#333;}#mermaid-svg-jEyafWkYqHw4rITV div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-jEyafWkYqHw4rITV .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-jEyafWkYqHw4rITV rect.text{fill:none;stroke-width:0;}#mermaid-svg-jEyafWkYqHw4rITV .icon-shape,#mermaid-svg-jEyafWkYqHw4rITV .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-jEyafWkYqHw4rITV .icon-shape p,#mermaid-svg-jEyafWkYqHw4rITV .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-jEyafWkYqHw4rITV .icon-shape .label rect,#mermaid-svg-jEyafWkYqHw4rITV .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-jEyafWkYqHw4rITV .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-jEyafWkYqHw4rITV .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-jEyafWkYqHw4rITV :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 显示
*.js / *.ts 文件
Eclipse Generic Editor
LSP4E
TypeScript Language Server
typescript 包
补全 / 诊断 / Hover / 跳转 / Outline / 格式化

本机已完成的配置

当前 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 文件。

配图：配置流程

#mermaid-svg-nsDxp5BGhnb7rJdf{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-nsDxp5BGhnb7rJdf .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-nsDxp5BGhnb7rJdf .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-nsDxp5BGhnb7rJdf .error-icon{fill:#552222;}#mermaid-svg-nsDxp5BGhnb7rJdf .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-nsDxp5BGhnb7rJdf .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-nsDxp5BGhnb7rJdf .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-nsDxp5BGhnb7rJdf .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-nsDxp5BGhnb7rJdf .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-nsDxp5BGhnb7rJdf .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-nsDxp5BGhnb7rJdf .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-nsDxp5BGhnb7rJdf .marker{fill:#333333;stroke:#333333;}#mermaid-svg-nsDxp5BGhnb7rJdf .marker.cross{stroke:#333333;}#mermaid-svg-nsDxp5BGhnb7rJdf svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-nsDxp5BGhnb7rJdf p{margin:0;}#mermaid-svg-nsDxp5BGhnb7rJdf .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-nsDxp5BGhnb7rJdf .cluster-label text{fill:#333;}#mermaid-svg-nsDxp5BGhnb7rJdf .cluster-label span{color:#333;}#mermaid-svg-nsDxp5BGhnb7rJdf .cluster-label span p{background-color:transparent;}#mermaid-svg-nsDxp5BGhnb7rJdf .label text,#mermaid-svg-nsDxp5BGhnb7rJdf span{fill:#333;color:#333;}#mermaid-svg-nsDxp5BGhnb7rJdf .node rect,#mermaid-svg-nsDxp5BGhnb7rJdf .node circle,#mermaid-svg-nsDxp5BGhnb7rJdf .node ellipse,#mermaid-svg-nsDxp5BGhnb7rJdf .node polygon,#mermaid-svg-nsDxp5BGhnb7rJdf .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-nsDxp5BGhnb7rJdf .rough-node .label text,#mermaid-svg-nsDxp5BGhnb7rJdf .node .label text,#mermaid-svg-nsDxp5BGhnb7rJdf .image-shape .label,#mermaid-svg-nsDxp5BGhnb7rJdf .icon-shape .label{text-anchor:middle;}#mermaid-svg-nsDxp5BGhnb7rJdf .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-nsDxp5BGhnb7rJdf .rough-node .label,#mermaid-svg-nsDxp5BGhnb7rJdf .node .label,#mermaid-svg-nsDxp5BGhnb7rJdf .image-shape .label,#mermaid-svg-nsDxp5BGhnb7rJdf .icon-shape .label{text-align:center;}#mermaid-svg-nsDxp5BGhnb7rJdf .node.clickable{cursor:pointer;}#mermaid-svg-nsDxp5BGhnb7rJdf .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-nsDxp5BGhnb7rJdf .arrowheadPath{fill:#333333;}#mermaid-svg-nsDxp5BGhnb7rJdf .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-nsDxp5BGhnb7rJdf .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-nsDxp5BGhnb7rJdf .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-nsDxp5BGhnb7rJdf .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-nsDxp5BGhnb7rJdf .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-nsDxp5BGhnb7rJdf .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-nsDxp5BGhnb7rJdf .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-nsDxp5BGhnb7rJdf .cluster text{fill:#333;}#mermaid-svg-nsDxp5BGhnb7rJdf .cluster span{color:#333;}#mermaid-svg-nsDxp5BGhnb7rJdf div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-nsDxp5BGhnb7rJdf .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-nsDxp5BGhnb7rJdf rect.text{fill:none;stroke-width:0;}#mermaid-svg-nsDxp5BGhnb7rJdf .icon-shape,#mermaid-svg-nsDxp5BGhnb7rJdf .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-nsDxp5BGhnb7rJdf .icon-shape p,#mermaid-svg-nsDxp5BGhnb7rJdf .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-nsDxp5BGhnb7rJdf .icon-shape .label rect,#mermaid-svg-nsDxp5BGhnb7rJdf .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-nsDxp5BGhnb7rJdf .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-nsDxp5BGhnb7rJdf .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-nsDxp5BGhnb7rJdf :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 安装 Node.js / npm
npm install -g typescript-language-server typescript
创建 External Program: TypeScript Language Server
配置 Content Types: js / ts
Preferences > Language Servers 添加绑定
用 Generic Editor 打开 *.js / *.ts
验证补全、诊断、Hover、跳转、Outline

使用方法

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，以及类型或属性相关诊断。

本次配置结果摘要

#mermaid-svg-B9lEeFk1jQZYOxtR{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-B9lEeFk1jQZYOxtR .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-B9lEeFk1jQZYOxtR .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-B9lEeFk1jQZYOxtR .error-icon{fill:#552222;}#mermaid-svg-B9lEeFk1jQZYOxtR .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-B9lEeFk1jQZYOxtR .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-B9lEeFk1jQZYOxtR .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-B9lEeFk1jQZYOxtR .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-B9lEeFk1jQZYOxtR .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-B9lEeFk1jQZYOxtR .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-B9lEeFk1jQZYOxtR .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-B9lEeFk1jQZYOxtR .marker{fill:#333333;stroke:#333333;}#mermaid-svg-B9lEeFk1jQZYOxtR .marker.cross{stroke:#333333;}#mermaid-svg-B9lEeFk1jQZYOxtR svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-B9lEeFk1jQZYOxtR p{margin:0;}#mermaid-svg-B9lEeFk1jQZYOxtR .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-B9lEeFk1jQZYOxtR .cluster-label text{fill:#333;}#mermaid-svg-B9lEeFk1jQZYOxtR .cluster-label span{color:#333;}#mermaid-svg-B9lEeFk1jQZYOxtR .cluster-label span p{background-color:transparent;}#mermaid-svg-B9lEeFk1jQZYOxtR .label text,#mermaid-svg-B9lEeFk1jQZYOxtR span{fill:#333;color:#333;}#mermaid-svg-B9lEeFk1jQZYOxtR .node rect,#mermaid-svg-B9lEeFk1jQZYOxtR .node circle,#mermaid-svg-B9lEeFk1jQZYOxtR .node ellipse,#mermaid-svg-B9lEeFk1jQZYOxtR .node polygon,#mermaid-svg-B9lEeFk1jQZYOxtR .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-B9lEeFk1jQZYOxtR .rough-node .label text,#mermaid-svg-B9lEeFk1jQZYOxtR .node .label text,#mermaid-svg-B9lEeFk1jQZYOxtR .image-shape .label,#mermaid-svg-B9lEeFk1jQZYOxtR .icon-shape .label{text-anchor:middle;}#mermaid-svg-B9lEeFk1jQZYOxtR .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-B9lEeFk1jQZYOxtR .rough-node .label,#mermaid-svg-B9lEeFk1jQZYOxtR .node .label,#mermaid-svg-B9lEeFk1jQZYOxtR .image-shape .label,#mermaid-svg-B9lEeFk1jQZYOxtR .icon-shape .label{text-align:center;}#mermaid-svg-B9lEeFk1jQZYOxtR .node.clickable{cursor:pointer;}#mermaid-svg-B9lEeFk1jQZYOxtR .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-B9lEeFk1jQZYOxtR .arrowheadPath{fill:#333333;}#mermaid-svg-B9lEeFk1jQZYOxtR .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-B9lEeFk1jQZYOxtR .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-B9lEeFk1jQZYOxtR .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-B9lEeFk1jQZYOxtR .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-B9lEeFk1jQZYOxtR .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-B9lEeFk1jQZYOxtR .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-B9lEeFk1jQZYOxtR .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-B9lEeFk1jQZYOxtR .cluster text{fill:#333;}#mermaid-svg-B9lEeFk1jQZYOxtR .cluster span{color:#333;}#mermaid-svg-B9lEeFk1jQZYOxtR div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-B9lEeFk1jQZYOxtR .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-B9lEeFk1jQZYOxtR rect.text{fill:none;stroke-width:0;}#mermaid-svg-B9lEeFk1jQZYOxtR .icon-shape,#mermaid-svg-B9lEeFk1jQZYOxtR .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-B9lEeFk1jQZYOxtR .icon-shape p,#mermaid-svg-B9lEeFk1jQZYOxtR .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-B9lEeFk1jQZYOxtR .icon-shape .label rect,#mermaid-svg-B9lEeFk1jQZYOxtR .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-B9lEeFk1jQZYOxtR .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-B9lEeFk1jQZYOxtR .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-B9lEeFk1jQZYOxtR :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} javascript content type (*.js)
TypeScript Language Server launch
typescript content type (*.ts)
~\\AppData\\Roaming\

pm\\typescript-language-server.cmd --stdio

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