Отладка typescript в visual studio code

Обновлено: 05.07.2024

Любой JavaScript это по сути TypeScript, а все TypeScript-коды компилируются в хороший, чистый JavaScript. С официально разрешенным ES6 (EcmaScript2015), TypeScript продолжает предлагать отличную совместимость и новые функции и, таким образом, TypeScript остается отличным языком для разработки JavaScript. Этот фантастический язык теперь имеет великого компаньона: Visual Studio Code - нового редактора кода от Microsoft, который, кстати, был создан с помощью TypeScript! Поэтому, вполне естественно, что они прекрасно работают друг с другом.

Установка Visual Studio Code

Скачайте Visual Studio Code с официального сайта и запустите процесс установки. После завершения инсталляции вы можете приступить к написанию скриптов.

Если раньше вы пользовались разными версиями TypeScript, убедитесь, что %PATH% (системная переменная) обновлена и указывает на последнюю установленную версию. В противном случае некоторые вещи могут не работать.

Работа с TypeScript

Стандартная конфигурация выглядит следующим образом:

Теперь, когда у нас есть файл проекта, мы можем начать создавать ts-файлы с кодом. Выберите в меню Файл -> Новый файл. Добавьте в него следующие строки и сохраните как hello-world.ts:

Здесь ничего сложного: обычный класс, который выводит текст на консоль и возвращает целое число 1 .

Билдинг и компиляция

Для начала нажмите Ctrl+Shift+B . Если это ваша первая попытка создания проекта, VS Code предложит вам создать Task Runner (Средство выполнения задач). Нажмите на Configure Task Runner (Настроить средство выполнения задач) для настройки конфигурационного файла.

Task Runner использует файл конфигурации, который дает VS Code указание использовать специальные исполнительные файлы с определенными параметрами. В нашем случае нам интересен TypeScript компилятор

После завершения процесса вы должны увидеть папку .vscode с файлом task.json.

Откройте файл task.json для редактирования. Создайте конфигурацию для того, чтобы VS Code запустил tsc.exe с hello-world.ts в качестве аргумента по аналогии с приведенным ниже примером:

Хоть всё и выглядит нормально, давайте попробуем воспользоваться возможностями файла tsconfig.json чтобы поменять некоторые параметры билдинга. Вы можете изменить предыдущее задание, чтобы оно выглядело так:

Опишем кратко определение задания:

version: версия таска
command: какой исполнительный файл вызвать
showOutput: [ silent , always , never ]
isShellCommand: запускает команду tsc (VS Code напрямую исполняет ее)
args : пустой, т.к. переписан tsconfig.json
problemMatcher: строка массива строк, основанная на предопределенных сопоставителях задач. Сейчас нет смысла это трогать

Информация об ошибках, возникающих в процессе разработки очень важна. Вот почему я всегда устанавливаю "showOuput": "always" . Это изменяет поведение Окна Вывода, заставляя его всегда быть на виду в процессе разработки. Доступные значения определяют, как ведет себя окно вывода:

silent: окно вывода появляется только в случае, если нет никаких ошибок в коде. Это значение по умолчанию
always: окно вывода всегда на виду
never: пользователь должен самостоятельно открывать окно вывода через меню «Вид», либо через сочетание клавиш Ctrl+Shift+U

Теперь в каталоге вашего проекта вы должны увидеть следующие файлы:

С добавлением новых файлов и ростом вашего проекта, обязательно убедитесь в том, что включили все *.ts -файлы, которые хотите скомплировать, в tsconfig.json file . Это поможет убедиться в том, что весь ваш код переводится в JavaScript и сливается в один файл, как в наших предыдущих настройках.

Ошибки при создании

Visual Studio Code отличная система предупреждения об ошибках. У вас появляется несколько вариантов отображения ошибок. Первый – через IntelliSense, как на картинке ниже:

Второй – маленький значок, говорящий о том, что что-то идет не так. Значок располагается в левом нижнем углу на панели задач:

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

Резюме

Visual Studio Code отлично подходит при работе с TypeScript. В следующем посте Gulp и Visual Studio Code я расскажу как добавить Gulp к проекту для выполнения различных задач: компиляции ваших *.ts файлов, минимизации кода, компиляции LESS/SASS и т.д.

Visual Studio позволяет выполнять отладку кода JavaScript и TypeScript. Вы можете задавать и использовать точки останова, подключать отладчик, проверять значения переменных, просматривать стек вызовов и применять другие функции отладки.

Установите Visual Studio бесплатно со страницы скачиваемых материалов Visual Studio, если еще не сделали этого. В зависимости от методов, используемых для разработки приложений, вам может потребоваться установить вместе с Visual Studio рабочую нагрузку Разработка Node.js.

Отладка серверного скрипта

Открыв проект в Visual Studio, откройте файл JavaScript с серверным скриптом (например, server.js) и щелкните в области слева, чтобы задать точку останова:

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

Чтобы запустить приложение, нажмите клавишу F5 (или выберите пункт меню Отладка > Начать отладку).

Выполнение отладчика прервется в установленной точке останова (текущий оператор выделяется желтым цветом). Теперь вы можете изучить состояние приложения, наводя указатель мыши на переменные в текущей области и используя окна отладчика, такие как Локальные и Контрольные значения.

Чтобы продолжить выполнение приложения, нажмите клавишу F5.

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

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

Подготовка приложения к отладке

Если для кода применена минификация или он создан в транспайлере, например в TypeScript или Babel, для оптимизации возможностей отладки следует применить сопоставления источника. Подключить отладчик к запущенному клиентскому скрипту вы сможете даже без сопоставлений источника. Но в этом случае вы сможете задавать и использовать точки останова только в файле с минифицированным или созданным в транспайлере кодом, но не в исходном файле кода. Например, в приложении Vue.js минифицированный скрипт передается в формате строки в инструкцию eval , и другого способа пошагового выполнения этого кода в отладчике Visual Studio, кроме сопоставлений источника, нет. В сложных сценариях отладки вы можете использовать также средства для разработчиков в Chrome или средства F12 для Microsoft Edge.

Сведения о создании сопоставителей с исходным кодом см. в разделе Создание сопоставлений источника для отладки.

Подготовка браузера к отладке

Для этого сценария используйте Microsoft Edge (Chromium), в настоящее время называемый Microsoft Edge Beta в IDE, или Chrome.

Для этого сценария используйте Chrome.

Закройте все окна целевого браузера.

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

Для Microsoft Edge (Chromium) также отключите все экземпляры Chrome. Это дает лучшие результаты, поскольку оба браузера используют базу кода Chromium.

Запустите браузер с включенной отладкой.

Начиная с Visual Studio 2019 флаг --remote-debugging-port=9222 можно задать при запуске браузера, выбрав Просмотреть с помощью. > из панели инструментов Отладка, Добавить, а затем установив соответствующий флаг в поле Аргументы. Используйте другое понятное для браузера имя, например, Microsoft Edge с отладкой или Chrome с отладкой. Подробности см. в заметках о выпуске.

Также можно открыть команду Выполнить кнопки Пуск в Windows (щелкнуть правой кнопкой мыши команду Выполнить) и ввести следующую команду:

Щелкните правой кнопкой мыши кнопку Пуск Windows, выберите команду Выполнить и введите следующую команду :

Ваш браузер будет запущен в режиме отладки.

Приложение еще не запущено, поэтому вы видите пустую страницу браузера.

Подключение отладчика к сценарию на стороне клиента

Чтобы подключить отладчик из Visual Studio и использовать точки останова в коде на стороне клиента, необходимо правильно настроить процесс в отладчике. Ниже описывается один из способов.

Перейдите в Visual Studio, а затем установите точку останова в исходном коде, который может быть файлом JavaScript, TypeScript или JSX. (Выберите для точки останова строку кода, в которой допустимы точки останова, например оператор return или объявление var).

Чтобы найти конкретный код в транспонированном файле, используйте Ctrl+F (Изменить > Найти и заменить > Быстрый поиск).

Для кода на стороне клиента, чтобы попасть в точку останова в файле TypeScript, .vue или JSX, как правило, необходимо использовать сопоставитель с исходным кодом. Сопоставитель с исходным кодом следует правильно настроить, чтобы он поддерживал отладку в Visual Studio.

Выберите ваш целевой браузер в качестве целевого объекта отладки в Visual Studio, нажмите клавиши CTRL+F5 (Отладка > Запуск без отладки), чтобы запустить приложение в браузере.

Если вы создали конфигурацию браузера с понятным именем, выберите ее в качестве цели отладки.

Приложение откроется в новой вкладке браузера.

Выберите Отладка > Присоединение к процессу.

Начиная с Visual Studio 2017, после первого присоединения к процессу с помощью этих инструкций, дальнейшее присоединение можно выполнять с помощью команды Отладка > Повторно подключиться к процессу.

В диалоговом окне Присоединить к процессу получите отфильтрованный список экземпляров браузера для присоединения.

В Visual Studio 2019 выберите правильный отладчик для вашего целевого браузера, JavaScript (Chrome) или JavaScript (Microsoft Edge — Chromium) в поле Присоединить к, введите chrome или edge в поле фильтра, чтобы отфильтровать результаты поиска.

В Visual Studio 2017 выберите в поле Присоединить к элемент Код Webkit и введите chrome в поле фильтра, чтобы отфильтровать результаты поиска.

Выберите процесс браузера с соответствующим портом узла (localhost в этом примере) и нажмите кнопку Присоединить.

Порт (например 1337) также может отображаться в поле Заголовок, чтобы помочь выбрать правильный экземпляр браузера.

В следующем примере показано, как это выглядит в браузере Microsoft Edge (Chromium).

Определить, что отладчик присоединился правильно, можно по открытию проводника DOM и консоли JavaScript в Visual Studio. Эти средства отладки аналогичны инструментам Chrome для разработчиков и средствам F12 для Microsoft Edge.

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

Когда отладчик приостановит выполнение, вы можете изучить состояние приложения, наводя указатель мыши на переменные и используя окна отладчика. Вы также можете выполнять пошаговую отладку кода (клавиши F5, F10 и F11). Дополнительные сведения об основных функциях отладки см. в разделе Первое знакомство с отладчиком.

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

Если вам нужно декомпозировать код в исходном файле TypeScript, JSX или .vue и вы не можете это сделать, убедитесь, что ваша среда настроена правильно, как описано в разделе Устранение неисправностей.

Если вам нужно декомпозировать код в файле с компиляцией в код на языке программирования JavaScript (например, app-bundle.js), но сделать это не удается, удалите файл сопоставления источника filename.js.map.

Устранение неполадок точек останова и сопоставителей с исходным кодом

Если вам нужно декомпозировать код в исходном файле TypeScript или JSX, но сделать это не удается, используйте Присоединить к процессу, чтобы подключить отладчик, как описано в предыдущих этапах. Убедитесь, что ваша среда настроена правильно:

Вы закрыли все экземпляры браузера, включая расширения Chrome (с помощью диспетчера задач) для запуска браузера в режиме отладки.

Либо, если вам нужно декомпозировать код в исходном файле (например app.tsx), но сделать это не удается, попробуйте использовать оператор debugger; в исходном файле или установите точки останова в инструментах для разработчиков в Chrome (или средства F12 для Microsoft Edge).

Создание сопоставлений источника для отладки

В Visual Studio можно использовать и создавать сопоставления источника для исходных файлов JavaScript. Такая возможность часто нужна, когда исходный код минифицирован или создан в транспайлере, например в TypeScript или Babel. Доступные варианты зависят от типа проекта.

Проект TypeScript в Visual Studio по умолчанию автоматически создает сопоставления источника. Дополнительные сведения см. в разделе Настройка сопоставлений источника с помощью файла tsconfig.json.

В проекте JavaScript сопоставления источника можно создать с помощью средства упаковки (например, webpack) и компилятора (например, TypeScript или Babel), которые вы можете добавить в проект. Вместе с компилятором TypeScript необходимо добавить еще и файл tsconfig.json и установить опцию компилятора sourceMap . Пример такой операции на основе базовой конфигурации webpack вы найдете в руководстве по созданию приложения Node.js с использованием React.

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

Чтобы настроить дополнительные параметры для сопоставлений источника, используйте файл tsconfig.json или параметры проекта для проекта TypeScript, но не оба метода сразу.

Чтобы включить отладку с помощью Visual Studio, необходимо убедиться в правильности ссылок на исходный файл в созданном сопоставителе с исходным кодом (может потребоваться тестирование). Например, если вы используете webpack, ссылки в файле сопоставителя с исходным кодом включают префикс webpack:/// , который не позволяет Visual Studio найти исходный файл TypeScript или JSX. В частности, при исправлении для отладки, ссылку на исходный файл (например, app.tsx) следует изменить с webpack:///./app.tsx на ./app.tsx, что включает отладку (путь относительно вашего исходного файла). В следующем примере показано, как настроить сопоставители с исходным кодом в webpack, который является одним из наиболее распространенных средств увязки, чтобы они работали с Visual Studio.

(Только для webpack) Если точка останова устанавливается в TypeScript файла JSX (а не в виде файла JavaScript), необходимо обновить конфигурацию webpack. Например, в файл webpack-config.js может потребоваться заменить следующий код:

Это настройка только для разработки, позволяющая отладку кода на стороне клиента в Visual Studio.

В сложных сценариях средства браузера (F12) иногда лучше подходят для отладки, так как для них не нужно выполнять изменения в пользовательских префиксах.

Настройка сопоставлений источника с помощью файла tsconfig.json

Если вы добавите в проект файл tsconfig.json, Visual Studio будет считать корневой каталог проектом TypeScript. Чтобы добавить файл, щелкните проект правой кнопкой мыши в обозревателе решений и последовательно выберите Добавить > Новый элемент > JSON-файл конфигурации TypeScript. Это действие добавит в проект файл tsconfig.json, аналогичный представленному ниже.

Параметры компилятора для tsconfig.json

inlineSourceMap. Создает один общий файл с сопоставлениями источников, а не отдельный файл сопоставления для каждого исходного файла.
inlineSources. Помещает исходный код в тот же файл вместе с сопоставлениями источников. Для этого режима также нужно настроить inlineSourceMap или sourceMap.
mapRoot. Указывает расположение, из которого отладчику следует брать файлы сопоставления источника ( .map), вместо расположения по умолчанию. Используйте этот флаг, если во время выполнения файлы .map и файлы .js должны размещаться в разных каталогах. Указанное здесь расположение внедряется в сопоставление источника, чтобы указать для отладчика расположение файлов .map.
sourceMap. Создает соответствующий файл .map.
sourceRoot. Указывает расположение, из которого отладчику следует брать файлы TypeScript, вместо расположения по умолчанию. Используйте этот флаг, если в ходе время выполнения и разработки исходные файлы должны размещаться в разных каталогах. Указанное здесь расположение внедряется в сопоставление источника, чтобы указать для отладчика расположение исходных файлов.

Дополнительные сведения о параметрах компилятора вы найдете на странице с параметрами компилятора в справочнике по TypeScript.

Настройка сопоставителей с исходным кодом с помощью параметров проекта (TypeScript project)

Также вы можете настроить параметры сопоставления источника в свойствах проекта, щелкнув проект правой кнопкой мыши и выбрав Проект > Свойства > Сборка TypeScript > Отладка.

Здесь доступны следующие параметры проекта.

Создать сопоставления источника (эквивалентно sourceMap в tsconfig.json). Создает соответствующий файл .map.
Укажите корневой каталог сопоставлений источника (эквивалентно mapRoot в tsconfig.json). Указывает расположение, из которого отладчику следует брать файлы сопоставления, вместо автоматически созданного расположения. Используйте этот флаг, если во время выполнения файлы .map и файлы .js должны размещаться в разных каталогах. Указанное здесь расположение внедряется в сопоставление источника, чтобы указать для отладчика расположение файлов сопоставления.
Укажите корневой каталог файлов TypeScript (эквивалентно sourceRoot в tsconfig.json). Указывает расположение, из которого отладчику следует брать файлы TypeScript, вместо расположения по умолчанию. Используйте этот флаг, если в ходе выполнения и разработки исходные файлы должны размещаться в разных каталогах. Указанное здесь расположение внедряется в сопоставление источника, чтобы указать для отладчика расположение исходных файлов.

Начиная с Visual Studio 2019, Visual Studio обеспечивает отладку только для Chrome и Microsoft Edge (Chromium).

Visual Studio поддерживает отладку только для браузеров Chrome и Internet Explorer.

Однако, вы не сможете автоматически использовать точки останова в файлах, созданных с синтаксисом Razor (cshtml, vbhtml). Для отладки файлов такого типа вы можете применить два следующих подхода.

Поместите инструкцию debugger; в той строке, где нужно прервать выполнение. Эта инструкция прерывает выполнение динамического скрипта и начинает отладку сразу же при его создании.

Загрузите страницу и откройте динамический документ в Visual Studio. Чтобы воспользоваться этим методом, нужно открыть динамический файл в процессе отладки, задать в нем точку останова и обновить страницу. В зависимости от выбранного браузера (Chrome или Internet Explorer) вы сможете найти этот файл с помощью следующих действий.

Для Chrome откройте пункты меню Обозреватель решений > Документы скриптов > [Имя_нужной_страницы] .

Для Microsoft Edge (Chromium) используйте ту же процедуру, что и для Chrome.

Для Internet Explorer откройте пункты меню Обозреватель решений > Документы скриптов > Windows Internet Explorer > [Имя_нужной_страницы] .

TypeScript – это типизированный расширенный набор JavaScript, который компилируется в простой JavaScript. Давайте разберемся, что именно это означает:

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

В этом руководстве мы покажем, как работать с TypeScript в Visual Studio Code, и рассмотрим преимущества их совместного использования.

Требования

Базовые навыки работы с JavaScript.
Локальная установка Node.js. Найти мануал по установке для вашей системы можно здесь.
Установка Visual Studio Code

1: Установка и компиляция TypeScript

Для начала нам нужно выполнить глобальную установку пакета TypeScript на ваш компьютер. Для этого запустите следующую команду в своем терминале:

npm install -g typescript

Затем выполните следующую команду, чтобы создать каталог для вашего проекта:

Перейдите в новый каталог:

Теперь нужно создать новый файл TypeScript. Эти файлы используют расширение .ts.

Теперь вы можете открыть VS Code и создать новый файл, нажав File → New File. После этого сохраните его, нажав File → Save As. В мануале мы назовем этот файл app.ts. В целом же имя файла не имеет значения, важно только его расширение .ts.

Файл должен начинаться со строки export <>;, чтобы VS Code распознал его как модуль.

Создайте функцию, которая будет выводить имя и фамилию из объекта person:

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

В приведенном ниже фрагменте представлен интерфейс для объекта Person с двумя свойствами: firstName и lastName. Сама же функция welcomePerson была изменена, чтобы принимать только объекты Person.

export <>;
function welcomePerson(person: Person) console.log(`Hey $ $`);
return `Hey $ $`;
>
const james = firstName: "James",
lastName: "Quick"
>;
welcomePerson(james);
interface Person firstName: string;
lastName: string;
>

Вы поймете преимущество этого хода, если попытаетесь передать в функцию welcomePerson какую-то строку.

Например, давайте заменим james:

Поскольку мы работаем с файлом TypeScript, VS Code немедленно сообщит вам, что функция ожидает объект Person, а не строку.

Argument of type '"James"' is not assignable to parameter of type 'Person'.

Теперь, когда у вас есть рабочий файл TypeScript, вы можете скомпилировать его в JavaScript. Для этого вам нужно вызвать функцию и указать, какой файл компилировать. Сделать это можно с помощью встроенного терминала VS Code.

app.ts:13:15 - error TS2345: Argument of type '"James"' is not assignable to parameter of type 'Person'.

Команда ls выведет список файлов по текущему пути:

Вы увидите исходный файл ts и новый файл js:

Откройте файл app.js в VS Code:

"use strict";
exports.__esModule = true;
function welcomePerson(person) console.log("Hey " + person.firstName + " " + person.lastName);
return "Hey " + person.firstName + " " + person.lastName;
>
var james = firstName: "James",
lastName: "Quick"
>;
welcomePerson(james);

Обратите внимание, что шаблонные литералы, являющиеся функцией ES6, были скомпилированы как простая конкатенация строк в ES5. Скоро мы вернемся к этому вопросу.

Чтобы убедиться, что все работает, вы можете запустить JavaScript непосредственно, используя Node в своем терминале:

В консоли вы увидите имя:

Hey James Quick

2: Создание конфигурационного файла TypeScript

Итак, вы скомпилировали один файл, и это здорово. Но в реальном проекте вам может понадобиться настроить компиляцию всех файлов: к примеру, если файлы нужно будет компилировать в ES6 вместо ES5. Для этого можно создать конфигурационный файл TypeScript.

Чтобы создать этот файл, вы можете запустить следующую команду (подобную npm init):

Вы получите такой вывод:

message TS6071: Successfully created a tsconfig.json file.

Откройте новый файл tsconfig.json, и вы увидите множество различных опций, большинство из них будут закомментированы.

Внеся это изменение в tsconfig.json, запустите команду tsc в своем терминале:

Примечание: Здесь мы не указываем входной файл, хотя ранее делали это. Официальная документация проекта сообщает: если в командной строке указан входной файл, файлы tsconfig.json будут проигнорированы.

Теперь откройте только что созданный файл app.js:

"use strict";
Object.defineProperty(exports, "__esModule", < value: true >);
function welcomePerson(person) console.log(`Hey $ $`);
return `Hey $ $`;
>
const james = firstName: "James",
lastName: "Quick"
>;
welcomePerson(james);

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

Для примера можно изменить значение outDir с текущего каталога на каталог dist:

После повторной компиляции (tsc) ваш выходной файл JavaScript будет находиться внутри каталога dist.

Вы можете использовать команды cd и ls в своем терминале, чтобы изучить содержимое каталога dist:

Вы увидите ваш скомпилированный файл JavaScript в новом каталоге:

3: TypeScript и современные фронтэнд фреймворки

За последние пару лет TypeScript стал довольно популярным языком. Вот несколько примеров его использования в современных фреймворках.

Angular CLI

Проекты Angular CLI поставляются с предварительной установкой TypeScript. Все настройки, включая проверку соблюдения стандартов кодирования, встроены в них по умолчанию. Создайте свой простой проект Angular CLI и внимательно изучите его, чтобы увидеть, как выглядит TypeScript в реальном приложении.

Create React App 2

Create React App не предоставляет TypeScript по умолчанию, но в последней версии его можно настроить таким образом. Если вам интересно узнать, как использовать TypeScript с Create React App, смотрите этот мануал.

Vue CLI 3

Vue CLI можно настроить на поддержку TypeScript при создании нового проекта. Больше информации об этом вы можете найти в Vue Docs.

Заключение

В этом мануале мы рассмотрели использование TypeScript в VS Code. TypeScript позволяет генерировать более качественный и надежный JavaScript. Как видите, VS Code предоставляет множество функций, помогающих вам писать TypeScript, генерировать конфигурации и так далее.

идея скомпилировать машинопись под src папка и поместите ее под .

tsconfig.в JSON

запуск.в JSON

это конфигурация, которую я сейчас использую в Visual Studio Code v1:

обратите внимание на ключ preLaunchTask чрезвычайно полезно, если вы используете любой бегун задачи как залпом потому что IDE может определять свои задачи по имени.

под управлением

компилировать ts (ввод в терминал rm -r bin/ ; tsc или выполнение задачи компиляции)
в визуальном коде играть Launch type (название нашей конфигурации)
наслаждайтесь!

это то,что работает для меня с последними TS и VsCode по состоянию на ноябрь 2017 года

следующая конфигурация поможет вам запустить сервер и отладить TS внутри VS Code

это то, что моя tsconfig.в JSON выглядит так:

и это то, что мой структура каталогов выглядит так:

если вы обратите внимание, вы увидите мою папку src и построить папка (содержащая результирующие транспонированные JS и файлы карт) живет бок о бок, что действительно помогает мне поддерживать логическую структуру каталогов.

хорошо, теперь идет запустить config:

вы можете использовать любую preLaunchTask вы хотите использовать, или даже пропустить его. Если вы пропустите его, вам придется транспилировать TS в JS вручную.

это то, что я делаю в мое задание nb-tsc-watch

для более поздней версии VSCode по состоянию на февраль / 2017 это то, что сработало для меня (это комбинация того, что предоставляют @manu и @tommy Falgout):

предполагается, что ваши файлы JSON out находятся в dest папка и ваш источник в src, соответственно

/.vscode / запуск.в JSON

tsconfig.в JSON

ниже настройка тестирует mocha chai с точками останова. Он работает путем транспонирования src в каталог lib, а затем запускает тесты в lib с sourceMapping обратно в src.

.vscode / запуск.в JSON

tsconfig.в JSON

.vscode / задачи.в JSON

пакета.в JSON показать установленные модули. Скрипты не имеют отношения к отладка.

Mac OSX 10.12.3 Сьерра
Код Visual Studio 1.10.1
NodeJS v7.7.1

Я думаю, что это стало проще и проще по выпускам.

Я установил ts-node , поэтому мои файлы конфигурации заканчиваются очень просто.

запуск.в JSON

есть два whings стоит отметить:

runtimeArgs - передано узлу для регистрации TS-узла для обработки файлов TypeScript.
нет program собственность. Имя файла TS для запуска задается в качестве первого аргумента.

что таким образом, вам не нужно компилировать TS в JS, вы даже можете иметь модули, написанные в TS, еще не скомпилированные в JS.

ответ @manu указал мне в правильном направлении; однако с последней версией VSCode у меня все еще была та же проблема. Это исправление, которое сработало для меня:

2017/12/17
.vscode / запуск.в JSON "'json

.vscode / задачи.в JSON

Я только что написал свою собственную функцию PowerShell как preLaunchTask. Это может быть худшее решение, чем предыдущие, но может добавить больше гибкости, чтобы ввести больше задач в поле preLaunchTask. Поскольку в настоящее время он не поддерживает массив и позволяет запускать только одну задачу перед действием запуска.

Идея состоит в том, чтобы скомпилировать TypeScript в папке src и поместить его в папку bin .

tsconfig.json

Важно активировать опцию sourceMap .

launch.json

Это конфигурация, которую я сейчас использую в Visual Studio Code v1:

Обратите внимание, что ключ preLaunchTask чрезвычайно полезен, если вы используете какой-либо исполнитель задач в качестве gulp , потому что IDE может определять свои задачи по имени.

Скомпилируйте ts (набрав в терминале rm -r bin/ ; tsc или выполнив задачу компиляции)
В визуальном коде играю Launch type (название нашей конфигурации)
Наслаждайтесь!

Это то, что работает для меня с последними TS и VsCode от ноября 2017 года

Следующая конфигурация поможет вам запустить сервер и отладить TS внутри VS Code

Вот как выглядит мой tsconfig.json:

Вот как выглядит моя структура каталогов :

Если вы обратите внимание, вы увидите, что моя папка src и папка сборки (содержащие результирующие перенесенные файлы JS и карты) живут бок о бок, что действительно помогает мне поддерживать логическую структуру каталогов.

Хорошо, теперь приходит конфигурация launch:

Вы можете использовать любой preLaunchTask, который вы хотите использовать, или даже пропустить его .. Если вы пропустите его, вам придется переносить TS в JS вручную.

Это то, что я делаю в своей задаче nb-tsc-watch

Я думаю, что все стало проще и проще по сравнению с выпусками .

Я установил ts-node , так что мои файлы конфигурации заканчиваются очень просто .

launch.json

Есть два момента, на которые стоит обратить внимание:

runtimeArgs - передается узлу для регистрации ts-узла для обработки файлов TypeScript.
нет program свойства. Имя файла TS для запуска задается в качестве первого аргумента.

Таким образом, вам не нужно компилировать TS в JS, вы даже можете иметь модули, написанные на TS, которые еще не скомпилированы в JS.

Приведенная ниже настройка проверяет мокко чай с точками останова. Он работает путем переноса src в каталог lib, а затем запускает тесты в lib с sourceMapping обратно в src.

.vscode/launch.json

tsconfig.json

.vscode/tasks.json

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

Mac OSX 10.12.3 Sierra
Visual Studio Code 1.10.1
NodeJS v7.7.1

Для более поздней версии VSCode от февраля 2017 года это то, что сработало для меня (это сочетание того, что предоставили и @manu, и @tommy Falgout):

Предполагается, что ваши файлы json out находятся в папке dest , а ваш источник - в папке src соответственно.

/.vscode/launch.json

tsconfig.json

Ответ @manu указал мне правильное направление; однако с последней версией VSCode у меня все еще была та же проблема. Это исправление, которое сработало для меня:

Читайте также: