編輯器 SDK

智慧型 IDE（例如 VSCode 或 IntelliJ）需要特殊設定，才能在使用 Plug'n'Play 安裝時讓 TypeScript 正常運作。本頁彙整了我們研究過的每個編輯器的設定。

編輯器 SDK 和設定可以使用 yarn dlx @yarnpkg/sdks 產生。詳細文件可以在專屬頁面中找到。

資訊

為什麼 Yarn PnP 需要 SDK？

Yarn PnP 的運作方式是產生一個 Node.js 載入器，必須注入到 Node.js 執行時間中。許多 IDE 擴充功能會執行它們封裝的套件（Prettier、TypeScript 等），而不會考慮載入器。

SDK 會透過產生間接套件來解決這個問題。需要時，這些間接套件會在將 require 呼叫轉發到實際套件之前自動設定載入器。

用法

產生基本 SDK 和編輯器設定

yarn dlx @yarnpkg/sdks vscode vim ...

產生基本 SDK，但不產生編輯器設定

yarn dlx @yarnpkg/sdks base

更新所有已安裝的 SDK 和編輯器設定

yarn dlx @yarnpkg/sdks

目前支援的工具

警告

yarn dlx @yarnpkg/sdks 指令會查看根目錄 package.json 的內容，找出您需要的 SDK，它不會查看任何其他工作區的相依性。

支援的擴充功能	如果在 `package.json` 相依性中找到 ...，則啟用
內建 VSCode TypeScript Server	typescript
astro-vscode	astro
vscode-eslint	eslint
prettier-vscode	prettier
relay	relay

如果您想進一步貢獻，請查看這裡！

編輯器設定

CoC nvim

安裝 vim-rzip
執行以下指令，它會產生一個 .vim/coc-settings.json 檔案

yarn dlx @yarnpkg/sdks vim

Emacs

SDK 附帶一個 typescript-language-server 包裝器，讓您可以使用 ts-ls LSP 客户端。

執行以下指令，將會產生一個名為 .yarn/sdks 的新目錄

yarn dlx @yarnpkg/sdks base

建立一個 .dir-locals.el 檔案，內容如下，以啟用 Flycheck 和 LSP 支援，並確保 LSP 在套用區域變數後載入，以觸發 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 原生 LSP

安裝 vim-rzip
執行以下指令，將會產生一個名為 .yarn/sdks 的新目錄

yarn dlx @yarnpkg/sdks base

TypeScript 支援應該隨附 nvim-lspconfig 和 theia-ide/typescript-language-server 開箱即用。

VSCode

安裝 ZipFS 擴充功能，由 Yarn 團隊維護。
執行以下指令，將會產生一個 .vscode/settings.json 檔案

yarn dlx @yarnpkg/sdks vscode

為安全起見，VSCode 要求您明確啟用自訂 TS 設定
1. 在 TypeScript 檔案中按下 ctrl+shift+p
2. 選擇「選擇 TypeScript 版本」
3. 選擇「使用工作區版本」

您的 VSCode 專案現在已設定為使用與您通常使用的 TypeScript 版本完全相同的版本，但它將能夠正確解析類型定義。

用法​

目前支援的工具​

編輯器設定​

CoC nvim​

Emacs​

Neovim 原生 LSP​

VSCode​

用法