入门 Zed Industries 2026-09-14 17:42:20 · 0 阅读

第118章 TypeScript 支持

Zed 原生支持 TypeScript 和 TSX。

Tree-sitter：tree-sitter/tree-sitter-typescript
Language Server：yioneko/vtsls
备选 Language Server：typescript-language-server/typescript-language-server
Debug Adapter：vscode-js-debug

Language Server

默认情况下，Zed 对 TypeScript、TSX 和 JavaScript 文件使用 vtsls。你可以在设置（{#kb zed::OpenSettings}）中的 Languages > TypeScript/TSX/JavaScript 下配置 language server，或在设置文件中添加：

{
  "languages": {
    "TypeScript": {
      "language_servers": ["typescript-language-server", "!vtsls", "..."]
    },
    "TSX": {
      "language_servers": ["typescript-language-server", "!vtsls", "..."]
    },
    "JavaScript": {
      "language_servers": ["typescript-language-server", "!vtsls", "..."]
    }
  }
}

默认情况下，Prettier 也会用于 TypeScript 文件。如需禁用，可在设置（{#kb zed::OpenSettings}）中的 Languages > TypeScript 下配置，或在设置文件中添加：

{
  "languages": {
    "TypeScript": {
      "prettier": { "allowed": false }
    }
    //...
  }
}

在 TypeScript 中使用 Tailwind CSS Language Server

如果想在原生 TypeScript 文件（.ts）中获得 Tailwind CSS language server 的全部功能（自动补全、代码检查等），可以在 settings.json 中自定义它下面的 classRegex 字段：

{
  "lsp": {
    "tailwindcss-language-server": {
      "settings": {
        "experimental": {
          "classRegex": [
            "\\.className\\s*[+]?=\\s*['\"]([^'\"]*)['\"]",
            "\\.setAttributeNS\\(.*,\\s*['\"]class['\"],\\s*['\"]([^'\"]*)['\"]",
            "\\.setAttribute\\(['\"]class['\"],\\s*['\"]([^'\"]*)['\"]",
            "\\.classList\\.add\\(['\"]([^'\"]*)['\"]",
            "\\.classList\\.remove\\(['\"]([^'\"]*)['\"]",
            "\\.classList\\.toggle\\(['\"]([^'\"]*)['\"]",
            "\\.classList\\.contains\\(['\"]([^'\"]*)['\"]",
            "\\.classList\\.replace\\(\\s*['\"]([^'\"]*)['\"]",
            "\\.classList\\.replace\\([^,)]+,\\s*['\"]([^'\"]*)['\"]"
          ]
        }
      }
    }
  }
}

大型项目

vtsls 在超大型项目中可能耗尽内存。我们将默认限制设为 8192（8 GiB），而非常规的 3072，但这可能仍不满足你的需求：

{
  "lsp": {
    "vtsls": {
      "settings": {
        // For TypeScript:
        "typescript": { "tsserver": { "maxTsServerMemory": 16384 } },
        // For JavaScript:
        "javascript": { "tsserver": { "maxTsServerMemory": 16384 } }
      }
    }
  }
}

内嵌提示（Inlay Hints）

Zed 会设置以下初始化选项，以便语言服务器返回内嵌提示（前提是在 Zed 的设置中启用了内嵌提示）。

在使用 typescript-language-server 时，你可以在 Zed 的 settings.json 中覆盖这些设置：

{
  "lsp": {
    "typescript-language-server": {
      "initialization_options": {
        "preferences": {
          "includeInlayParameterNameHints": "all",
          "includeInlayParameterNameHintsWhenArgumentMatchesName": true,
          "includeInlayFunctionParameterTypeHints": true,
          "includeInlayVariableTypeHints": true,
          "includeInlayVariableTypeHintsWhenTypeMatchesName": true,
          "includeInlayPropertyDeclarationTypeHints": true,
          "includeInlayFunctionLikeReturnTypeHints": true,
          "includeInlayEnumMemberValueHints": true
        }
      }
    }
  }
}

更多信息请参见 typescript-language-server 内联提示文档。

使用 vtsls 时：

{
  "lsp": {
    "vtsls": {
      "settings": {
        // JavaScript 部分：
        "javascript": {
          "inlayHints": {
            "parameterNames": {
              "enabled": "all",
              "suppressWhenArgumentMatchesName": false
            },
            "parameterTypes": {
              "enabled": true
            },
            "variableTypes": {
              "enabled": true,
              "suppressWhenTypeMatchesName": true
            },
            "propertyDeclarationTypes": {
              "enabled": true
            },
            "functionLikeReturnTypes": {
              "enabled": true
            },
            "enumMemberValues": {
              "enabled": true
            }
          }
        },
        // TypeScript 部分：
        "typescript": {
          "inlayHints": {
            "parameterNames": {
              "enabled": "all",
              "suppressWhenArgumentMatchesName": false
            },
            "parameterTypes": {
              "enabled": true
            },
            "variableTypes": {
              "enabled": true,
              "suppressWhenTypeMatchesName": true
            },
            "propertyDeclarationTypes": {
              "enabled": true
            },
            "functionLikeReturnTypes": {
              "enabled": true
            },
            "enumMemberValues": {
              "enabled": true
            }
          }
        }
      }
    }
  }
}

Code Lens

Zed 默认为 vtsls 开启了引用和实现的 Code Lens，会在函数、类和接口上方显示引用计数和实现计数。要使用它们，需要启用 code_lens 设置：

{
  "code_lens": "on"
}

你可以在 settings.json 中覆盖默认的 Code Lens 设置：

{
  "lsp": {
    "vtsls": {
      "settings": {
        "typescript": {
          "implementationsCodeLens": {
            "enabled": true,
            "showOnAllClassMethods": true,
            "showOnInterfaceMethods": true
          },
          "referencesCodeLens": {
            "enabled": true,
            "showOnAllFunctions": true
          }
        },
        "javascript": {
          "implementationsCodeLens": {
            "enabled": true,
            "showOnAllClassMethods": true,
            "showOnInterfaceMethods": true
          },
          "referencesCodeLens": {
            "enabled": true,
            "showOnAllFunctions": true
          }
        }
      }
    }
  }
}

调试

Zed 开箱即用地支持通过 vscode-js-debug 调试 TypeScript 代码。无需额外配置即可调试以下内容：

package.json 中的任务
使用多种流行框架（Jest、Mocha、Vitest、Jasmine、Bun、Node）编写的测试

运行 {#action debugger::Start}（{#kb debugger::Start}）以查看这些预定义调试任务的上下文列表。

注意： 当 package.json 中存在 @types/bun 时，会自动检测 Bun 测试。

注意： 当 package.json 中存在 @types/node 时，会自动检测 Node 测试（需要 Node.js 20+）。

与其他语言一样，.vscode/launch.json 中的配置也可用于在 Zed 中调试。

如果你的使用场景未被上述任何一种覆盖，可以通过向 .zed/debug.json 添加调试配置来完全掌控调试过程。以下是配置示例。

配置 JavaScript 调试任务

JavaScript 的调试比其他语言更复杂，因为存在两种不同的环境：Node.js 和浏览器。vscode-js-debug 暴露了一个 type 字段，你可以用它来指定环境，即 node 或 chrome。

vscode-js-debug 配置文档

将调试器附加到在 Web 浏览器中运行的服务器（`npx serve`）

对于已在外部运行的 Web 服务器（例如通过 npx serve 或 npx live-server 启动），可以将其附加到调试会话中并通过浏览器打开。

[
  {
    "label": "Launch Chrome (TypeScript)",
    "adapter": "JavaScript",
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost:5500",
    "program": "$ZED_FILE",
    "webRoot": "${ZED_WORKTREE_ROOT}",
    "build": {
      "command": "npx",
      "args": ["tsc"]
    },
    "skipFiles": ["<node_internals>/**"]
  }
]