编辑器 SDK

智能 IDE（例如 VSCode 或 IntelliJ）在使用 Plug'n'Play 安装 时需要特殊配置才能使 TypeScript 工作。此页面是我们研究过的每个编辑器的设置集合。

¥Smart IDEs (such as VSCode or IntelliJ) require special configuration for TypeScript to work when using Plug'n'Play installs. This page is a collection of settings for each editor we've looked into.

可以使用 yarn dlx @yarnpkg/sdks 生成编辑器 SDK 和设置。可以在 专用页面 上找到它的详细文档。

¥The editor SDKs and settings can be generated using yarn dlx @yarnpkg/sdks. Its detailed documentation can be found on the dedicated page.

信息

为什么 Yarn PnP 需要 SDK？

¥Why are SDKs needed with Yarn PnP?

Yarn PnP 的工作原理是生成 Node.js 加载器，必须在 Node.js 运行时内注入。许多 IDE 扩展在执行它们封装的包（Prettier、TypeScript 等）时没有考虑加载器。

¥Yarn PnP works by generating a Node.js loader, which has to be injected within the Node.js runtime. Many IDE extensions execute the packages they wrap (Prettier, TypeScript, ...) without consideration for loaders.

SDK 通过生成间接包来解决这个问题。在需要时，这些间接操作会在将 require 调用转发到实际包之前自动设置加载器。

¥The SDKs workaround that by generating indirection packages. When required, these indirection automatically setup the loader before forwarding the require calls to the real packages.

用法

¥Usage

生成基本 SDK 和编辑器设置：

¥Generate both the base SDK and the editor settings:

yarn dlx @yarnpkg/sdks vscode vim ...

生成基本 SDK，但不生成编辑器设置：

¥Generate the base SDK, but no editor settings:

yarn dlx @yarnpkg/sdks base

更新所有已安装的 SDK 和编辑器设置：

¥Update all installed SDKs & editor settings:

yarn dlx @yarnpkg/sdks

当前支持的工具

¥Tools currently supported

警告

yarn dlx @yarnpkg/sdks 命令将查看根 package.json 的内容以确定你需要的 SDK - 它不会查看任何其他工作区的依赖。

¥The yarn dlx @yarnpkg/sdks command will look at the content of your root package.json to figure out the SDKs you need - it won't look at the dependencies from any other workspaces.

支持的扩展	如果 ... 则启用在你的 package.json 依赖中找到
内置 VSCode TypeScript 服务器	typescript
astro-vscode	astro
vscode-eslint	eslint
prettier-vscode	prettier
relay	relay

如果你想做出更多贡献，请看这里！

¥If you'd like to contribute more, take a look here!

编辑器设置

¥Editor setup

CoC nvim

1. 安装 vim-rzip

   ¥Install vim-rzip

2. 运行以下命令，它将生成一个 .vim/coc-settings.json 文件：

   ¥Run the following command, which will generate a .vim/coc-settings.json file:

yarn dlx @yarnpkg/sdks vim

Emacs

SDK 附带一个 typescript-language-server 封装器，可让你使用 ts-ls LSP 客户端。

¥The SDK comes with a typescript-language-server wrapper which enables you to use the ts-ls LSP client.

1. 运行以下命令，它将生成一个名为 .yarn/sdks 的新目录：

   ¥Run the following command, which will generate a new directory called .yarn/sdks:

yarn dlx @yarnpkg/sdks base

2. 创建具有以下内容的 .dir-locals.el 以启用 Flycheck 和 LSP 支持，并确保在应用局部变量触发 eval-after-load 后加载 LSP：

   ¥Create a .dir-locals.el with the following content to enable Flycheck and LSP support, and make sure LSP is loaded after local variables are applied to trigger the eval-after-load:

((typescript-mode
  . ((eval . (let ((project-directory (car (dir-locals-find-file default-directory))))
                (setq lsp-clients-typescript-server-args `("--tsserver-path" ,(concat project-directory ".yarn/sdks/typescript/bin/tsserver") "--stdio")))))))

Neovim Native LSP

1. 安装 vim-rzip

   ¥Install vim-rzip

2. 运行以下命令，它将生成一个名为 .yarn/sdks 的新目录：

   ¥Run the following command, which will generate a new directory called .yarn/sdks:

yarn dlx @yarnpkg/sdks base

然后 TypeScript 支持应该可以与 nvim-lspconfig 和 theia-ide/typescript-language-server 一起开箱即用。

¥TypeScript support should then work out of the box with nvim-lspconfig and theia-ide/typescript-language-server.

VSCode

1. 安装由 Yarn 团队维护的 ZipFS 扩展。

   ¥Install the ZipFS extension, which is maintained by the Yarn team.

2. 运行以下命令，它将生成一个 .vscode/settings.json 文件：

   ¥Run the following command, which will generate a .vscode/settings.json file:

yarn dlx @yarnpkg/sdks vscode

3. 出于安全原因，VSCode 要求你明确激活自定义 TS 设置：

   ¥For safety reason VSCode requires you to explicitly activate the custom TS settings:

   1. 在 TypeScript 文件中按 ctrl+shift+p

      ¥Press ctrl+shift+p in a TypeScript file

   2. 选择 "选择 TypeScript 版本"

      ¥Choose "Select TypeScript Version"

   3. 选择 "使用工作区版本"

      ¥Pick "Use Workspace Version"

你的 VSCode 项目现在配置为使用与你通常使用的完全相同的 TypeScript 版本，只是它将能够正确解析类型定义。

¥Your VSCode project is now configured to use the exact same version of TypeScript as the one you usually use, except that it will be able to properly resolve the type definitions.