Ускорьте разработку TypeScript: автоматическая сборка при сохранении в коде Visual Studio

Если вы разработчик TypeScript и используете Visual Studio Code (VSC), вы, вероятно, сталкивались с повторяющимся процессом ручного запуска сборок каждый раз, когда вы вносите изменения в свой код. Но знаете ли вы, что VSC предлагает удобный способ автоматизировать этот процесс? В этой статье мы рассмотрим различные методы включения автоматической сборки при сохранении в VSC, которые помогут вам оптимизировать рабочий процесс разработки TypeScript.

Метод 1: использование расширения «Автокомпилятор TypeScript».
Один из самых простых способов добиться автоматической сборки при сохранении в VSC — использовать расширение «Автокомпилятор TypeScript». Выполните следующие действия:

  1. Откройте код Visual Studio.
  2. Перейдите в представление «Расширения» (Ctrl+Shift+X).
  3. Найдите «Автокомпилятор TypeScript» и установите расширение.
  4. После установки откройте проект TypeScript.
  5. Чтобы включить автоматическую сборку при сохранении, нажмите значок шестеренки в правом нижнем углу окна VSC и выберите «Автокомпиляция: Включить» в раскрывающемся меню.

Теперь всякий раз, когда вы сохраняете файл TypeScript, расширение автоматически запускает компилятор TypeScript и собирает ваш проект.

Метод 2: использование файла «tasks.json».
VSC предоставляет мощную функцию, называемую задачами, которая позволяет вам определять собственные задачи сборки. Вот как вы можете использовать его для автоматической сборки при сохранении:

  1. Откройте проект TypeScript в VSC.
  2. Нажмите Ctrl+Shift+B, чтобы открыть диалоговое окно «Выполнить задачу сборки».
  3. Выберите «Настроить задачу», а затем выберите «Создать файл Tasks.json на основе шаблонов».
  4. Выберите «Другие» в качестве шаблона задачи.
  5. Замените сгенерированный контент в файле Tasks.json следующим кодом:
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Build TypeScript",
      "type": "shell",
      "command": "tsc",
      "problemMatcher": []
    }
  ],
  "presentation": {
    "echo": true,
    "reveal": "always",
    "focus": false,
    "panel": "shared"
  }
}
  1. Сохраните файл Tasks.json.

Теперь каждый раз, когда вы сохраняете файл TypeScript, VSC автоматически выполняет задачу «Сборка TypeScript», определенную в Tasks.json.

Метод 3: использование свойства «onSave» в «tsconfig.json».
Начиная с TypeScript 2.9, вы можете включить автоматическую сборку при сохранении непосредственно через файл tsconfig.json. Вот как:

  1. Откройте проект TypeScript в VSC.
  2. Найдите файл tsconfig.json.
  3. Добавьте или измените раздел «compilerOptions» в tsconfig.json, включив в него свойство «onSave»:
{
  "compilerOptions": {
    ...
    "onSave": true
  },
  ...
}
  1. Сохраните файл tsconfig.json.

При такой конфигурации каждый раз, когда вы сохраняете файл TypeScript, VSC автоматически запускает компилятор TypeScript и собирает ваш проект.

Включив автоматическую сборку при сохранении в Visual Studio Code, вы можете значительно улучшить рабочий процесс разработки TypeScript. В этой статье мы рассмотрели три различных метода: использование расширения «Автокомпилятор TypeScript», настройку пользовательской задачи в файле «tasks.json» и использование свойства «onSave» в «tsconfig.json». Выберите метод, который соответствует вашим предпочтениям и требованиям проекта, и наслаждайтесь более эффективной и продуктивной разработкой.