TypeScript

Zed 原生支持 TypeScript 和 TSX。

语言服务器

Zed 默认对 TypeScript、TSX 和 JavaScript 文件使用 vtsls。你可以在设置文件中为每种语言配置使用 typescript-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 文件。要禁用此功能

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

大型项目

vtsls 在非常大的项目上可能会内存不足。我们将限制默认为 8092（8 GiB），而不是默认的 3072，但这可能不足以满足你的需求

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

内联提示

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": {
        // For 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
            }
          }
        },
        // For 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
            }
          }
        }
      }
    }
  }
}

调试

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

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

运行 debugger: start (f4|f4) 以查看这些预定义调试任务的上下文列表。

注意: 当 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。

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

给定一个外部运行的 Web 服务器（例如，使用 npx serve 或 npx live-server），可以将其附加并使用浏览器打开。

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

另请参阅