4. SDK для редакторов

Интеллектуальные IDE (такие как VSCode или IntelliJ) требуют специальной конфигурации для работы с TypeScript при использовании установок Plug'n'Play. Данная страница предназначена для сбора настроек для каждого редактора, с которым мы работали — пожалуйста, внесите свой вклад!

SDK для редакторов и настройки могут быть сгенерированы с помощью yarn dlx @yarnpkg/sdks (или yarn sdks, если вы добавили @yarnpkg/sdks в свои зависимости). Подробная документация доступна на специализированной странице. В общем случае:

• Используйте yarn sdks vscode vim для генерации как базовых SDK, так и настроек для указанных поддерживаемых редакторов.
• Используйте yarn sdks base для генерации базовых SDK и последующего ручного изменения конфигурации неподдерживаемых редакторов.
• Используйте yarn sdks для обновления всех установленных SDK и настроек редакторов.

Поддерживаемые инструменты

Примечание: Обратите внимание, что будут установлены только SDK для инструментов, присутствующих в вашем файле package.json в корневой директории. Инструмент не будет учитывать зависимости из других рабочих пространств. Поэтому не забудьте снова запустить команду, если вы измените набор инструментов, используемых вашим проектом!

* Flow в настоящее время несовместим с PnP.

Если вы хотите внести свой вклад, посмотрите сюда!

Настройка редактора

VSCode

Для поддержки функций, таких как переход к определению, необходим плагин, например, ZipFS.

1. Выполните следующую команду, которая создаст новую директорию под названием .yarn/sdks:

yarn dlx @yarnpkg/sdks vscode

2. По соображениям безопасности VSCode требует явного активации пользовательских настроек TS:

3. Нажмите ctrl+shift+p в файле TypeScript.

4. Выберите "Выбрать версию TypeScript".

5. Выберите "Использовать версию рабочего пространства".

Ваш проект VSCode теперь настроен на использование той же версии TypeScript, что и обычно, но теперь он сможет правильно разрешать определения типов!

Обратите внимание, что VSCode может попросить вас повторить шаг 3 время от времени, но помимо этого ваш опыт должен быть практически таким же, как обычно. Удачного разработки!

VIM

Для поддержки функций, таких как переход к определению, необходим плагин, например, vim-rzip.

coc.nvim

Выполните следующую команду, которая создаст новую директорию под названием .yarn/sdks и создаст файл .vim/coc-settings.json:

yarn dlx @yarnpkg/sdks vim

Neovim Native LSP

Выполните следующую команду, которая создаст новую директорию под названием .yarn/sdks:

yarn dlx @yarnpkg/sdks base

С .yarn/sdks на месте поддержка TypeScript должна работать из коробки с nvim-lspconfig и theia-ide/typescript-language-server.

Поддержка перехода к определению и т. д.

Примечание: Из-за ошибки в обработке URI в Neovim переход к определению поддерживается только в neovim-nightly.

Помимо плагина vim-rzip, вам также потребуется следующий фрагмент кода для обработки URI Yarn PnP, выводимых из theia-ide/typescript-language-server. Дополнительные сведения см. в lbrayner/vim-rzip#15.

" Decode URI encoded characters
function! DecodeURI(uri)
    return substitute(a:uri, '%\([a-fA-F0-9][a-fA-F0-9]\)', '\=nr2char("0x" . submatch(1))', "g")
endfunction

" Attempt to clear non-focused buffers with matching name
function! ClearDuplicateBuffers(uri)
    " if our filename has URI encoded characters
    if DecodeURI(a:uri) !=# a:uri
        " wipeout buffer with URI decoded name - can print error if buffer in focus
        sil! exe "bwipeout " . fnameescape(DecodeURI(a:uri))
        " change the name of the current buffer to the URI decoded name
        exe "keepalt file " . fnameescape(DecodeURI(a:uri))
        " ensure we don't have any open buffer matching non-URI decoded name
        sil! exe "bwipeout " . fnameescape(a:uri)
    endif
endfunction

function! RzipOverride()
    " Disable vim-rzip's autocommands
    autocmd! zip BufReadCmd   zipfile:*,zipfile:*/*
    exe "au! zip BufReadCmd ".g:zipPlugin_ext

    " order is important here, setup name of new buffer correctly then fallback to vim-rzip's handling
    autocmd zip BufReadCmd   zipfile:*  call ClearDuplicateBuffers(expand("<amatch>"))
    autocmd zip BufReadCmd   zipfile:*  call rzip#Read(DecodeURI(expand("<amatch>")), 1)

    if has("unix")
        autocmd zip BufReadCmd   zipfile:*/*  call ClearDuplicateBuffers(expand("<amatch>"))
        autocmd zip BufReadCmd   zipfile:*/*  call rzip#Read(DecodeURI(expand("<amatch>")), 1)
    endif

    exe "au zip BufReadCmd ".g:zipPlugin_ext."  call rzip#Browse(DecodeURI(expand('<amatch>')))"
endfunction

autocmd VimEnter * call RzipOverride()

Emacs

SDK поставляется с обёрткой typescript-language-server, которая позволяет использовать клиент LSP ts-ls.

1. Выполните следующую команду, которая создаст новую директорию под названием .yarn/sdks:

yarn dlx @yarnpkg/sdks base

2. Создайте файл .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")))))))

3. Обратите внимание, что вы можете переименовать :local как хотите, если у вас есть SDK, хранящиеся в другом месте (кроме .yarn/sdks/...) в других проектах.

Ограничения

• Поскольку пакеты Yarn хранятся внутри своих архивов, редакторам необходимо понимать, как работать с такими путями, если вы хотите открыть файлы (например, при нажатии на путь импорта, исходящий из внешнего пакета). Это могут реализовать только сами редакторы, и мы можем сделать не больше, чем открыть вопросы, чтобы попросить об реализации этой функции (например, вот проблема для VSCode: #75559).

  В качестве обходного решения вы можете запустить yarn unplug pkg-name, чтобы указать yarn на распаковку пакета, что вновь включит функциональность Go to definition для конкретного пакета.