VS Code настройка

Visual Studio Code является де-факто стандартом для разработки на JavaScript и TypeScript, а экосистема Fresh тесно связана с возможностями редактора. Установка выполняется стандартным способом для соответствующей операционной системы. После установки ключевым этапом становится корректная интеграция с Deno, так как Fresh полностью основан на нём.

Для работы необходим установленный Deno, доступный в системе через PATH. VS Code автоматически обнаруживает Deno при наличии расширения, но без него редактор будет воспринимать проект как обычный JavaScript/TypeScript без специфики runtime.

Расширение Deno для VS Code

Центральный элемент настройки — официальное расширение Deno от Deno Land Inc.

Основные возможности расширения:

  • корректная типизация стандартной библиотеки Deno;
  • поддержка import maps;
  • работа с URL-импортами;
  • встроенное форматирование и линтинг;
  • интеграция с задачами Deno (deno task).

После установки расширение не активируется глобально. Оно работает только в проектах, где явно включено использование Deno.

Включение Deno для проекта Fresh

Проекты Fresh содержат файл deno.json или deno.jsonc, что позволяет редактору распознать среду. Однако VS Code по умолчанию может не активировать Deno автоматически.

Рекомендуемая настройка — создание файла .vscode/settings.json в корне проекта:

{
  "deno.enable": true
}

После этого:

  • TypeScript-сервер VS Code переключается на Deno;
  • стандартный TypeScript Node.js backend отключается;
  • редактор начинает использовать типы Deno вместо @types/node.

Это критично для корректной работы Fresh, так как он не использует Node.js API.

Настройка форматирования кода

Deno включает собственный форматтер, который предпочтительнее использовать вместо Prettier. Он учитывает особенности import maps, URL-импортов и стандартов Deno.

Рекомендуемые параметры форматирования:

{
  "editor.defaultFormatter": "denoland.vscode-deno",
  "editor.formatOnSave": true
}

Deno Formatter:

  • не требует конфигурации;
  • работает одинаково во всех проектах;
  • гарантирует единый стиль кода для всей команды.

Использование сторонних форматтеров может приводить к конфликтам с синтаксисом Fresh и JSX/TSX.

Работа с TypeScript и JSX в Fresh

Fresh использует TSX по умолчанию. Компоненты рендерятся на сервере, а острова (islands) — на клиенте. Для VS Code важно корректно интерпретировать JSX без React-импорта.

Deno расширение автоматически:

  • включает поддержку JSX;
  • использует jsxImportSource из deno.json, если он указан;
  • корректно обрабатывает Preact, применяемый в Fresh.

При необходимости можно явно указать настройки:

{
  "deno.unstable": true,
  "typescript.preferences.jsxAttributeCompletionStyle": "auto"
}

Автодополнение и навигация по проекту

После активации Deno:

  • автодополнение работает для URL-импортов;
  • переход к определению (Go to Definition) поддерживается даже для удалённых модулей;
  • hover-подсказки показывают типы и документацию из стандартной библиотеки Deno.

Fresh-специфичные элементы, такие как Handlers, PageProps, FreshContext, корректно типизируются без дополнительных настроек.

Импорт-карты и их поддержка

Fresh активно использует import maps для коротких алиасов. VS Code считывает их из deno.json.

Пример конфигурации:

{
  "imports": {
    "$fresh/": "https://deno.land/x/fresh@1.6.5/",
    "preact": "https://esm.sh/preact@10.19.2"
  }
}

Редактор:

  • понимает алиасы при импортах;
  • не подчёркивает их как ошибки;
  • корректно индексирует зависимости.

Без включённого Deno такие импорты будут восприниматься как неразрешимые.

Линтинг и диагностика

Deno включает встроенный линтер, который активируется автоматически при включённом расширении. Он:

  • не требует ESLint;
  • проверяет стиль, потенциальные ошибки и небезопасные конструкции;
  • учитывает правила Deno и Fresh.

Настройка может быть расширена в deno.json:

{
  "lint": {
    "rules": {
      "tags": ["recommended"],
      "exclude": ["no-explicit-any"]
    }
  }
}

VS Code отображает ошибки линтинга напрямую в редакторе, без дополнительных плагинов.

Задачи и команды Fresh в VS Code

Интеграция с deno task позволяет запускать проект прямо из редактора. В deno.json обычно присутствует задача:

{
  "tasks": {
    "start": "deno run -A --watch=static/,routes/ dev.ts"
  }
}

VS Code распознаёт задачи автоматически. Они доступны через:

  • панель команд;
  • меню задач;
  • терминал редактора.

Это упрощает запуск сервера разработки Fresh без ручного ввода команд.

Работа с отладчиком

VS Code поддерживает отладку Deno-приложений, включая Fresh. Для этого используется конфигурация запуска:

{
  "type": "pwa-node",
  "request": "launch",
  "name": "Debug Fresh",
  "runtimeExecutable": "deno",
  "runtimeArgs": [
    "run",
    "-A",
    "--inspect",
    "dev.ts"
  ]
}

Отладчик позволяет:

  • ставить breakpoints в маршрутах и островах;
  • отслеживать выполнение серверного рендеринга;
  • анализировать состояние запросов и контекста Fresh.

Организация рабочего пространства

Для крупных проектов рекомендуется:

  • включить отображение типов файлов (files.associations);
  • исключить кэшированные файлы Deno из поиска;
  • настроить отдельный профиль VS Code под Deno/Fresh.

Пример исключений:

{
  "search.exclude": {
    "**/.deno": true
  }
}

Это повышает производительность редактора и снижает визуальный шум при навигации.

Итоговая роль VS Code в экосистеме Fresh

Корректно настроенный VS Code становится не просто редактором, а полноценной IDE для Fresh:

  • среда разработки синхронизирована с runtime;
  • типы, форматирование и линтинг работают согласованно;
  • исчезает необходимость в сторонних инструментах, характерных для Node.js.

Такая конфигурация соответствует философии Fresh и Deno — минимализм, предсказуемость и встроенные возможности без избыточной сложности.

Оглавление