Deno и Visual Studio Code

На этой странице рассматривается разработка приложений Deno с использованием Visual Studio Code и официального расширения vscode_deno.

Установка

Расширение Deno для VS Code напрямую интегрируется с Deno CLI, используя протокол языка сервера. Это помогает обеспечить соответствие информации о вашем коде тому, как этот код будет работать при запуске с помощью Deno CLI.

Расширение Deno устанавливается как и другие расширения в VS Code. Найдите Deno во вкладке расширений VS Code и нажмите кнопку установить, или эта ссылка откроет страницу расширения, где вы можете выбрать установку.

После первой установки расширения вы должны увидеть приветственную страницу расширения. (Если вы ее пропустили или хотите увидеть снова, используйте сочетание клавиш ⌘ ⇧ P для открытия панели команд и выполните команду Deno: Welcome.)

Включение Deno в рабочем пространстве VS Code

Мы понимаем, что не каждый проект, с которым вы работаете в VS Code, является проектом Deno. По умолчанию VS Code поставляется с встроенной службой языка TypeScript/JavaScript, которая используется при редактировании файлов TypeScript или JavaScript.

Для поддержки API Deno и возможности разрешения модулей, как это делает Deno CLI, необходимо включить Deno для рабочего пространства. Самый прямой способ сделать это — использовать команду Deno: Initialize Workspace Configuration из панели команд VS Code.

Эта команда добавит "deno.enable": true в конфигурацию рабочего пространства (корневая папка вашего рабочего пространства .vscode/settings.json). После завершения команды вы получите уведомление о том, что рабочее пространство Deno инициализировано.

Эти параметры (и другие параметры) доступны через панель настроек VS Code настройки. В панели параметр называется Deno: Enable.

Настройки папки рабочего пространства

Это настройки, которые можно установить для папки рабочего пространства. Остальные настройки в настоящее время применяются только к рабочему пространству:

• deno.enable — Управляет включением Deno Language Server. При включении расширение отключит встроенные службы языка JavaScript и TypeScript VS Code и вместо них будет использовать сервер языка Deno. boolean, по умолчанию false
• deno.enablePaths — Управляет включением Deno Language Server только для определенных путей в папке рабочего пространства. По умолчанию пустой список.
• deno.codeLens.test — Управляет включением линтера для кода тестов. boolean, по умолчанию true
• deno.codeLens.testArgs — Список аргументов, которые передаются deno test при активации линтера для кода тестов. массив строк, по умолчанию ["--allow-all"]

Когда проект включен, расширение получит информацию непосредственно из установленного Deno CLI. Расширение также отключит встроенное расширение TypeScript/JavaScript.

Частичное включение Deno в рабочем пространстве VS Code

В рабочем пространстве (или папке рабочего пространства) подпути могут быть включены для Deno, в то время как код за пределами этих путей не будет включен, и встроенная служба языка JavaScript/TypeScript VS Code будет использоваться. Используйте настройку Deno: Enable Paths (или deno.enablePaths при ручном редактировании).

Например, если у вас есть проект такого вида:

project
├── worker
└── front_end

Где вы хотите включить только путь worker (и его подпути) для Deno, вам нужно добавить ./worker в список Deno: Enable Paths в конфигурации.

Смешанные проекты Deno

С этой функцией вы можете иметь смешанный проект Deno, где некоторые папки рабочего пространства включены для Deno, а некоторые — нет. Это полезно при создании проекта, который может иметь компонент front-end, где вы хотите использовать другую конфигурацию для кода front-end.

Для этого вы создаете новое рабочее пространство (или добавляете папку в существующее рабочее пространство) и в настройках настраиваете одну из папок так, чтобы deno.enable имело значение true, а другую — false. После сохранения конфигурации рабочего пространства вы заметите, что сервер языка Deno применяет диагностику только к включенным папкам, в то время как в другой папке для файлов TypeScript и JavaScript будет использоваться встроенный компилятор TypeScript VS Code.

Линтер

Один и тот же движок, который предоставляет диагностику при использовании deno lint, также может использоваться через расширение. Включив настройку Deno: Lint в панели настроек (или deno.lint при редактировании настроек в формате JSON), редактор начнет отображать предупреждения линтера в вашем коде. Для получения дополнительной информации о использовании линтера Deno см. раздел Линтер.

Использование файла конфигурации

Файл конфигурации не требуется для проекта Deno, но есть несколько сценариев, в которых он может быть полезен. Если вы хотите использовать те же настройки, что и при указании параметра --config в командной строке, можно использовать параметр Deno: Config (или deno.config при ручном редактировании).

Расширение Deno также автоматически идентифицирует и применяет deno.jsonc или deno.json, просматривая файл конфигурации в корне рабочего пространства и применяя его. Ручное указание параметра Deno: Config переопределит это автоматическое поведение.

Форматирование

Deno CLI поставляется со встроенным форматировщиком, к которому можно получить доступ, используя deno fmt, но его также можно настроить для использования в VS Code. Deno должен быть в раскрывающемся списке для настройки Editor: Default formatter (или, если вы редактируете настройки вручную, это "editor.defaultFormatter": "denoland.vscode-deno").

Установка пути к Deno CLI

Расширение ищет исполняемый файл Deno CLI в PATH системы, но иногда это нежелательно, и можно установить параметр Deno: Path (или deno.path при ручном редактировании) для указания на исполняемый файл Deno. Если указанный путь относительный, он будет разрешен относительно корня рабочего пространства.

Предложения по импорту

При попытке импорта модуля расширение предложит варианты завершения импорта. Местные относительные файлы будут включены в предложения, а также любые кэшированные удаленные файлы.

Расширение поддерживает автоматическое завершение для регистров, где удаленный регистр/веб-сайт модулей может необязательно предоставлять метаданные, которые позволяют клиенту обнаруживать модули. По умолчанию расширение будет проверять хосты/источники, чтобы определить, поддерживают ли они предложения, и если поддерживают, расширение предложит вам включить их. Это поведение можно изменить, сняв флажок в Deno > Suggest > Imports: Auto Discover в Настройках. (или deno.suggest.imports.autoDiscover при ручном редактировании).

Отдельные хосты/источники можно включить или отключить, отредактировав настройку Deno > Suggest > Imports: Hosts — deno.suggest.imports.hosts в соответствующей settings.json.

Кэширование удаленных модулей

Deno поддерживает удаленные модули и будет загружать удаленные модули и их зависимости и сохранять их в кэше локально. Когда вы выполняете deno run, deno test, deno info или deno install в командной строке, Deno CLI пойдет и попытается загрузить все удаленные модули и их зависимости и заполнить кэш.

При разработке кода в редакторе, если модуль не находится в кэше, вы получите диагностику, например Uncached or missing remote URL: "https://deno.land/example/mod.ts" для любых отсутствующих удаленных модулей. Deno не будет автоматически пытаться кэшировать модуль, если это не результат предложения по импорту из регистра (см. выше).

Помимо запуска команд в командной строке, расширение предоставляет способы кэширования зависимостей внутри редактора. Отсутствие зависимости будет иметь быстрый способ исправления, чтобы Deno попытался кэшировать зависимость. Доступ к исправлениям можно получить, нажав CTRL . или ⌘ ., когда курсор находится в спецификаторе импорта, или наведите указатель мыши на спецификатор и выберите Быстрое исправление....

Также есть команда Deno: Cache Dependencies в панели команд, которая попытается кэшировать все зависимости модуля, активного в данный момент в редакторе.

Кодовые линзы

Сервер языка в настоящее время поддерживает несколько кодовых линз (действительные контекстные сведения, вплетенные в код), которые позволяют получить более глубокое представление о коде. Большинство из них отключено по умолчанию, но их можно легко включить:

Deno > Кодовая линза: Реализации

deno.codeLens.implementations — предоставляет линзу, которая будет отображать все реализации элемента в других частях кода.

Deno > Кодовая линза: Ссылки

deno.codeLens.references — предоставляет линзу, которая будет отображать все ссылки на элемент в других частях кода.

Deno > Кодовая линза: Все ссылки на функции

deno.codeLens.referencesAllFunctions — предоставляет линзу, которая будет отображать все ссылки на все функции в коде. Все функции исключаются из настройки «Ссылки», упомянутой выше.

Тестовая кодовая линза

Deno CLI включает встроенный API тестирования, доступный в Deno.test. Расширение и сервер языка имеют включенную по умолчанию кодовую линзу, которая предоставляет возможность запускать тест из редактора.

Когда у вас есть блок кода, который предоставляет тест:

import { assert } from "jsr:@std/assert@1";

Deno.test({
  name: "a test case",
  fn() {
    let someCondition = true;
    assert(someCondition);
  },
});

Вы увидите кодовую линзу над тестом:

▶ Run Test

Если вы щелкните по кодовой линзе, расширение запустит Deno CLI для выполнения теста и отобразит результат. Основываясь на ваших других настройках, расширение попытается выполнить тест с теми же параметрами. Если вам нужно изменить аргументы, предоставляемые при выполнении deno test, вы можете сделать это, изменив настройку deno.codeLens.testArgs.

Расширение также будет пытаться отслеживать, если в том же модуле вы деструктурируете функцию Deno.test или присваиваете её переменной. Так что вы можете сделать что-то вроде этого, и всплывающие подсказки всё равно будут работать:

const { test: denoTest } = Deno;

denoTest({
  name: "example test",
  fn() {},
});

Если вы хотите отключить эту функцию, вы можете сделать это, сбросив значение настройки Deno > CodeLens: Test - deno.codeLens.test.

Вы можете запускать тесты из представления «Проводник тестов», из элементов всплывающих подсказок кода или через командную палитру. Вы также можете использовать функцию фильтра в представлении «Проводник текста», чтобы исключить определённые тесты из выполнения.

При провале теста сообщение об ошибке, включая стек вызовов, будет доступно при просмотре результатов теста в VS Code.

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

По умолчанию тесты выполняются аналогично тому, как если бы вы использовали deno test --allow-all в командной строке. Эти значения по умолчанию можно изменить, настроив опцию Deno > Testing: Args в настройках пользователя или рабочей области (или deno.testing.args если вы настраиваете вручную). Добавьте индивидуальные аргументы, которые вы использовали бы с подкомандой deno test.

В зависимости от других настроек эти параметры автоматически будут объединены в «командную строку», используемую при выполнении тестов, если явно не указаны в настройке Deno > Testing: Args.

Использование отладчика

Расширение предоставляет интеграцию с встроенным отладчиком VS Code. Вы можете сгенерировать конфигурацию, перейдя в панель Run and Debug , нажав create a launch.json file и выбрав опцию Deno из доступных опций отладчика.

Задачи

Хотя расширение взаимодействует напрямую с сервером языка, иногда вы можете предпочесть запускать команды Deno через командную строку (CLI). Вы можете определить задачи в файле deno.json в корне вашей рабочей области в поле tasks.

Использование контейнера разработки

Использование контейнера разработки с VS Code — отличный способ получить изолированную среду разработки, не беспокоясь об установке Deno CLI на локальной системе. Deno поддерживает контейнеры разработки, и расширение Deno для VS Code будет работать с ними.

Если у вас есть существующий проект Deno, к которому вы хотите добавить поддержку контейнеров разработки, выполните Remote-Containers: Add Development Container Configuration Files... в командной палитре, выберите Show All Definitions..., а затем найдите определение Deno. Это создаст базу .devcontainer конфигурации, которая установит последнюю версию Deno CLI в контейнер.

После добавления VS Code предложит открыть проект в контейнере разработки. Если вы согласитесь, VS Code создаст контейнер разработки и повторно откроет рабочую область с использованием контейнера разработки, в котором будут установлены Deno CLI и расширение vscode_deno.

Устранение неполадок

Следующие разделы охватывают проблемы, с которыми вы можете столкнуться при использовании расширения, и пытаются указать возможные причины.

Ошибки/диагностика

An import path cannot end with a '.ts' extension. или Cannot find name 'Deno'.

Обычно это происходит, когда Deno не включен в проекте Deno. Если вы посмотрите на источник диагностики, вы, вероятно, увидите ts(2691). ts указывает, что это исходит от встроенного движка TypeScript/JavaScript в VS Code. Вам нужно убедиться, что ваша конфигурация настроена правильно и что настройка Deno: Enable - deno.enable имеет значение true.

Вы также можете проверить, что сервер языка Deno считает вашей текущей активной конфигурацией, используя Deno: Language Server Status из командной палитры. Это отобразит документ от сервера языка с разделом «Конфигурация рабочей области». Это даст вам конфигурацию, как она сообщается VS Code серверу языка.

Также проверьте, отключена ли конфигурация VS Code под названием enableProjectDiagnostics, расположенная в TypeScript › Tsserver › Experimental: Enable Project Diagnostics. Эта настройка позволяет серверу языка TypeScript выполнять проверки всего проекта в фоновом режиме, и Deno не может отключить его поведение, поэтому ошибки продолжают отображаться, даже если все остальные настройки установлены правильно.

Если "enable" установлено в true там, и сообщение об ошибке всё ещё отображается, вы можете попробовать перезапустить VS Code, так как часть расширения, которая «глушит» встроенную диагностику TypeScript для файлов, не работает должным образом. Если проблема сохраняется после перезапуска, вы можете столкнуться с ошибкой, которую мы не ожидали, и поиск ошибок и сообщение об ошибке на https://github.com/denoland/vscode_deno — следующий шаг.