Как установить javascript в visual studio 2019

JavaScript и TypeScript в Visual Studio

Область применения:Visual Studio Visual Studio для Mac Visual Studio Code

Visual Studio 2022 предоставляет обширную поддержку для разработки JavaScript, как с помощью прямого использования JavaScript, также и с помощью языка программирования TypeScript, который разработан, чтобы повышать продуктивность и интерес во время разработки на JavaScript, особенно при разработке масштабных проектов. Код JavaScript или TypeScript в Visual Studio можно написать для многих типов приложений и служб.

Языковая служба JavaScript

Интерфейс JavaScript в Visual Studio 2022 обеспечивается тем же обработчиком, что и поддержка TypeScript. Этот обработчик улучшает поддержку компонентов, функциональность и интеграцию без дополнительной настройки.

Функция восстановления устаревшей языковой службы JavaScript более не доступна. Пользователи сразу получают новую готовую языковую службу JavaScript. Новая языковая служба основана исключительно на языковой службе TypeScript, которая базируется на статическом анализе. Эта служба позволяет нам оптимизировать инструментарий, поэтому ваш код на JavaScript может использовать преимущества расширенной поддержки IntelliSense на основе определений типов. Новая служба имеет небольшой размер и использует меньше памяти, чем устаревшие службы, обеспечивая более высокую производительность пользовательского кода по мере его масштабирования. Также мы улучшили производительность языковой службы для обработки более крупных проектов.

Поддержка TypeScript

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

Для компиляции TypeScript Visual Studio предоставляет гибкие возможности выбора версии TypeScript для каждого отдельного проекта.

В сценариях компиляции MSBuild, таких как ASP.NET Core, пакет NuGet TypeScript — это рекомендуемый метод добавления поддержки компиляции TypeScript в проект. Visual Studio позволит добавить этот пакет при первом добавлении файла TypeScript в проект. К этому пакету также можно получить доступ в любое время с помощью диспетчера пакетов NuGet. При использовании пакета NuGet в проекте будет использоваться соответствующая версия языковой службы для поддержки языка. Примечание. Минимальная поддерживаемая версия этого пакета — 3.6.

Проекты, настроенные для npm, например для проектов Node.js, могут указать собственную версию языковой службы TypeScript, добавив пакет npm TypeScript. В поддерживаемых проектах версию можно указать с помощью диспетчера npm. Примечание. Минимальная поддерживаемая версия этого пакета — 2.1.

TypeScript SDK не рекомендуется использовать в Visual Studio 2022. Существующие проекты, основанные на пакете SDK, должны быть обновлены для использования пакета NuGet. Для проектов, которые не получается обновить сразу, пакет SDK по-прежнему доступен в Visual Studio Marketplace и в качестве дополнительного компонента в установщике Visual Studio.

Для проектов, которые разработаны в Visual Studio 2022, рекомендуется использовать пакеты NuGet и npm TypeScript. Они обеспечивают лучшую переносимость между разными средами и платформами. Дополнительные сведения см. в статьях Компиляция кода TypeScript (ASP.NET Core) и Компиляция кода TypeScript (Node.js).

Шаблоны проектов

Начиная с Visual Studio 2022, существует новый тип проекта JavaScript/TypeScript (.esproj), называемый системой проектов JavaScript (JSPS), который позволяет создавать автономные проекты Angular, React и Vue в Visual Studio. Такие интерфейсные проекты создаются с помощью средств CLI платформы, установленных на локальном компьютере, поэтому версию шаблона вы можете выбрать на свое усмотрение. Сведения о миграции из существующих проектов Node.js в новую систему проектов см. в разделе «Миграция проектов Node.js». Сведения о MSBuild для нового типа проекта см. в свойствах MSBuild для JSPS

В этих новых проектах можно выполнять модульные тесты JavaScript и TypeScript, легко добавлять и подключать проекты на основе API ASP.NET Core и скачивать модули npm с помощью диспетчера npm. Чтобы приступить к работе, ознакомьтесь с краткими руководствами и другой документацией. Дополнительные сведения см. в учебниках по Visual Studio | JavaScript и TypeScript.

Упрощенный обновленный шаблон доступен начиная с Visual Studio 2022 версии 17.5. По сравнению с шаблонами SPA ASP.NET, доступными в Visual Studio, esproj SPA-шаблоны для ASP.NET Core обеспечивают лучшее управление зависимостями npm, а также улучшенную поддержку сборки и публикации.

Visual Studio 2019 предоставляет обширную поддержку для разработки JavaScript, как с помощью прямого использования JavaScript, также и с помощью языка программирования TypeScript, который был разработан с целью повышения продуктивности и интереса во время разработки на JavaScript, особенно при разработке масштабных проектов. Код JavaScript или TypeScript в Visual Studio можно написать для многих типов приложений и служб.

Служба языка JavaScript

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

Функция восстановления устаревшей языковой службы JavaScript более не доступна. Теперь пользователи сразу получают новую языковую службу JavaScript. Новая языковая служба основана исключительно на языковой службе TypeScript, которая базируется на статическом анализе. Это позволяет нам оптимизировать инструментарий, поэтому ваш код на JavaScript может использовать преимущества расширенной поддержки IntelliSense на основе определений типов. Новая служба имеет небольшой размер и использует меньше памяти, чем устаревшие службы, обеспечивая более высокую производительность пользовательского кода по мере его масштабирования. Также мы улучшили производительность языковой службы для обработки более крупных проектов.

Поддержка TypeScript

Visual Studio 2019 предоставляет несколько вариантов для интеграции компиляции TypeScript в проект.

• Пакет NuGet для TypeScript. Когда в проект устанавливается пакет NuGet или TypeScript 3.2 или более новой версии, в редактор загружается соответствующая версия языковой службы TypeScript.
• Пакет npm для TypeScript. Когда в проект устанавливается пакет npm или TypeScript 2.1 или более новой версии, в редактор загружается соответствующая версия языковой службы TypeScript.
• Также как и стандартный SDK, который можно скачать из VS Marketplace, TypeScript SDK доступен в установщике Visual Studio по умолчанию.

Для проектов, которые разработаны в Visual Studio 2019, рекомендуется использовать пакеты TypeScript NuGet и TypeScript npm. Они обеспечивают лучшую портативность в различных средах и платформах. Дополнительные сведения см. в статьях Компиляция кода TypeScript (ASP.NET Core) и Компиляция кода TypeScript (Node.js).

Проекты

Приложения UWP на JavaScript больше не поддерживаются в Visual Studio 2019. Невозможно создать или открыть проекты UWP на JavaScript (файлы с расширением JSPROJ). Дополнительные сведения см. в документации по созданию прогрессивных веб-приложений (PWA), эффективно работающих на Windows.

Создание приложения Vue.js с помощью инструментов Node.js для Visual Studio

Область применения:Visual Studio Visual Studio для Mac Visual Studio Code

Visual Studio поддерживает разработку приложений на базе платформы Vue.js с использованием JavaScript или TypeScript.

Следующие новые функции поддерживают разработку приложений Vue.js в Visual Studio:

• Поддержка блоков скриптов, стиля и шаблона в VUE-файлах
• Распознавание атрибута lang в VUE-файлах
• Шаблоны проектов и файлов Vue.js

Начиная с Visual Studio 2022, вы также можете создать проект Vue с помощью нового типа проектов на основе CLI. Сведения в этой статье относятся только к типу проектов Node.js (расширение файла NJSPROJ).

Необходимые компоненты

• У вас должна быть установлена среда Visual Studio 2017 15.8 или последующей версии и рабочая нагрузка Разработка Node.js.

Важно! Для выполнения инструкций из этой статьи вам потребуются функции, доступные в Visual Studio 2017, начиная с версии 15.8.

Создание проекта Vue.js с помощью Node.js

Для создания проекта вы можете использовать новые шаблоны Vue.js. Использование шаблона — это самый простой способ приступить к работе. Подробные инструкции см. в разделе Создание первого приложения Vue.js с помощью Visual Studio.

Создание проекта Vue.js с ASP.NET Core и интерфейсом командной строки Vue

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

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

Создание проекта ASP.NET Core

В этом примере используется пустое приложение ASP.NET Core (C#). Однако вы можете выбрать различные проекты и языки программирования.

Создание пустого проекта

• Откройте Visual Studio и создайте новый проект. На начальном экране Visual Studio 2019 выберите Создать проект. Если окно запуска не открыто, выберите Файл >Окно запуска. Введите запрос веб-приложение, укажите C# в качестве языка, выберите Пустой ASP.NET Core, а затем нажмите кнопку Далее. На следующем экране присвойте проекту имя client-app и нажмите кнопку Далее. Выберите рекомендуемую версию целевой платформы или .NET 6 и щелкните Создать. Если шаблон проекта Веб-приложение ASP.NET Core отсутствует, сначала установите рабочую нагрузку ASP.NET и разработка веб-приложений и рабочую нагрузку разработки NET Core. Чтобы установить рабочую нагрузку, щелкните ссылку Открыть установщик Visual Studio в левой области диалогового окна Создать проект (выберите пункты Файл>Создать>Проект). Запускается Visual Studio Installer. Выберите необходимые рабочие нагрузки.

Настройка файла запуска проекта

• Откройте файл ./Startup.csи добавьте следующие строки в метод Configure:

app.UseDefaultFiles(); // Enables default file mapping on the web root. app.UseStaticFiles(); // Marks files on the web root as servable. 

Установка интерфейса командной строки Vue

Чтобы установить модуль npm vue-cli, откройте командную строку и введите npm install —g vue-cli или npm install -g @vue/cli для версии 3.0 (сейчас доступно в бета-версии).

Создание нового клиентского приложения по шаблону с помощью интерфейса командной строки Vue

1. Перейдите в командную строку и измените текущий каталог на корневую папку проекта.
2. Введите vue init webpack client-app и выполните дальнейшие действия, чтобы указать дополнительные данные.

Примечание. Для VUE-файлов необходимо использовать Webpack или аналогичную платформу с загрузчиком для преобразования. С помощью TypeScript и Visual Studio выполнить компиляцию файлов .vue нельзя. Это же касается и объединения — с помощью TypeScript нельзя преобразовать модули ES2015 (т. е. операторы import и export ) в единый итоговый файл .js для загрузки в браузер. Опять же, Webpack является лучшим выбором здесь. Сделать это из среды Visual Studio с помощью MSBuild можно с помощью шаблона Visual Studio. Сейчас готовые шаблоны ASP.NET для разработки Vue.js не предоставляются.

Измените конфигурацию Webpack, чтобы вывести встроенные файлы в wwwroot

• Откройте файл ./client-app/config/index.js и измените build.index и build.assetsRoot на путь wwwroot:

// Template for index.html index: path.resolve(__dirname, '../../wwwroot/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../../wwwroot'), 

Указание проекта для сборки клиентского приложения при каждом запуске сборки

1. В Visual Studio перейдите в раздел Проект>Свойства>События сборки.
2. В командной строке событий перед сборкой введите npm —prefix ./client-app run build .

Настройка имен выходных модулей Webpack

• Откройте файл ./client-app/build/webpack.base.conf.js и добавьте следующие свойства для выходного свойства:

devtoolModuleFilenameTemplate: '[absolute-resource-path]', devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]' 

Добавление поддержки TypeScript с помощью интерфейса командной строки Vue

Для этих действий потребуется vue-cli 3.0 (в настоящее время существует как бета-версия).

1. Перейдите в командную строку и измените текущий каталог на корневую папку проекта.
2. Введите vue create client-app и выберите Выбрать компоненты вручную.
3. Выберите Typescript, а затем другие необходимые параметры.
4. Выполните оставшиеся шаги и ответьте на вопросы.

Настройка проекта Vue.js для TypeScript

1. Откройте файл ./client-app/tsconfig.json и добавьте noEmit:true в параметры компилятора. Этот параметр позволяет избежать загромождения проекта при каждой сборке в Visual Studio.
2. Затем создайте файл vue.config.js в ./client-app/ и добавьте следующий код.

module.exports = < outputDir: '../wwwroot', configureWebpack: < output: < devtoolModuleFilenameTemplate: '[absolute-resource-path]', devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]' >> >; 

Сборка с vue-cli 3.0

Неизвестная проблема с vue-cli 3.0 может препятствовать автоматизации сборки. Каждый раз при попытке обновления папки wwwroot выполняйте команду npm run build в папке client-app.

Кроме того, с помощью свойств проекта ASP.NET можно скомпилировать проект vue-cli 3.0 как событие перед сборкой. Щелкните проект правой кнопкой мыши, выберите Свойстваи добавьте следующие команды на вкладку Сборка в текстовом поле Командная строка события перед сборкой.

cd ./client-app npm run build cd ../ 

Ограничения

• Атрибут lang поддерживает только языки JavaScript и TypeScript. Допустимые значения: js, jsx, ts и tsx.
• Атрибут lang не работает с тегами шаблона или стиля.
• Отладка блоков скрипта в VUE-файлах не поддерживается в связи с предварительной обработкой.
• TypeScript не распознает VUE-файлы как модули. Вам нужен файл, который содержит подобный код, чтобы сообщить TypeScript, как выглядят VUE-файлы (шаблон vue-cli 3.0 уже включает этот файл).

// ./client-app/vue-shims.d.ts declare module "*.vue"

См. также

• руководство по началу работы с Vue;
• Проект интерфейса командной строки Vue.
• документация по настройке Webpack.

Как запустить код в VS Code?

Взялся изучать JS , установил VS Code . Написал код, однако запустить его не могу. Нажимаю отладка, запуск без отладки, и выдается ошибка. Вопрос: как запустить код в VS Code ?

• javascript
• visual-studio-code

Отслеживать
3,778 2 2 золотых знака 15 15 серебряных знаков 35 35 бронзовых знаков
задан 10 июл 2019 в 14:28
PythonLearner4823 PythonLearner4823
101 1 1 золотой знак 2 2 серебряных знака 9 9 бронзовых знаков
Ошибка какая.
10 июл 2019 в 15:00

@Dmitry Что то вроде этого [Running] node «c:\Users\Admin\Desktop\java.js» «node» �� ���� ����७��� ��� ���譥� ��������, �ᯮ��塞�� �ணࠬ��� ��� ������ 䠩���.

10 июл 2019 в 15:02

если не париться, то рядом положить файлик html и в нем подключить скрипт. запускаете html в браузере и скрипт работает. Или вы кроме скрипта js еще что-то юзаете?

26 сен 2019 в 9:48
можно ещё поставить расширение marketplace.visualstudio.com/… но это так для не сложных вычислений
4 дек 2019 в 9:01

4 ответа 4

Сортировка: Сброс на вариант по умолчанию

В вопросе не указана ОС. Если Windows, то:

1. Установить Node.js
2. Установить расширение Code Runner для VS Code
3. Перезапустить VS Code
4. В VS Code в правом верхнем углу нажать запуск (Run Code) или Ctrl + Alt + N

В большинстве случаев никакие конфигурационные файлы править не нужно.

Также обратите внимание, что привычное для руководств alert(«Hello World»); работать не будет, попробуйте console.log(«Hello World»);

Отслеживать
ответ дан 4 дек 2019 в 8:54
Pavel Kudryavtcev Pavel Kudryavtcev
51 1 1 серебряный знак 3 3 бронзовых знака

Установить Node.js.
Создать файл file.js
Открыть терминал Ctrl + ~
Запустить команду node file.js .

P.S. По-умолчанию команда ищет файл от корня папки (workspace), которая открыта в vscode.

Отслеживать
ответ дан 28 окт 2019 в 13:09
1,811 1 1 золотой знак 9 9 серебряных знаков 29 29 бронзовых знаков

Ну тут есть несколько способов.

1) Скачиваете расширение Debugger for Chrome — должен появиться файл launch.json. Или он вместе с vs устанавливается, уже не помню. но он будет 100%.

Указываете url как на картинке(путь к файлу, который вы собираетесь запустить). Создаёте базовый html и вставляете туда скрипт.

2) Способ похож на предыдущий, но немного лучше: надо скачать node js. Установка в несколько пунктов(загуглите). Запустить localhost. Тут уже никаких путей к файлу указывать не надо.

3) Установить расширение code runner, выделить код в файле и нажать ctrl + alt + n. У меня этот способ почему-то не работает.

Учебник. Создание приложения Node.js и React в Visual Studio

Область применения:Visual Studio Visual Studio для Mac Visual Studio Code

В Visual Studio можно легко создать проект Node.js, а также использовать IntelliSense и другие встроенные функции, поддерживающие Node.js. При работе с этим руководством вы создадите проект веб-приложения Node.js на основе шаблона Visual Studio. Затем вы создадите простое приложение с помощью React.

В этом руководстве описано следующее:

• Создание проекта Node.js
• Добавление пакетов npm
• Добавление кода React в приложение
• Транскомпиляция JSX
• Подключение отладчика

Начиная с Visual Studio 2022, можно также создать проект React с помощью рекомендуемого типа проекта на основе CLI. Некоторые сведения в этой статье относятся только к типу проектов Node.js (расширение файла NJSPROJ).

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

• Что такое Node.js? Node.js — это серверная среда выполнения JavaScript, выполняющая код JavaScript.
• Что такое npm? npm —это стандартный диспетчер пакетов Node.js. Диспетчер пакетов упрощает публикацию и совместное использование библиотек исходного кода Node.js. Диспетчер пакетов npm упрощает установку, обновление и удаление библиотек.
• Что такое React? React — это интерфейсная платформа для создания пользовательского интерфейса.
• Что такое JSX? JSX — это расширение синтаксиса JavaScript. Обычно оно используется с React для описания элементов пользовательского интерфейса. Прежде чем запускать код JSX в браузере, его нужно преобразовать в обычный код JavaScript.
• Что такое webpack? Пакет webpack объединяет файлы JavaScript, чтобы они могли работать в браузере, а также может преобразовывать или упаковывать другие ресурсы. Webpack может указать компилятору, например Babel или TypeScript, преобразовать код JSX или TypeScript в обычный код JavaScript.

Необходимые компоненты

Для работы с этим руководством требуется следующее:

• Visual Studio с установленной рабочей нагрузкой «Разработка Node.js». Если вы еще не установили Visual Studio:
  1. Перейдите на страницу загрузки Visual Studio, чтобы установить Visual Studio бесплатно.
  2. В Visual Studio Installer выберите рабочую нагрузку Разработка Node.js и щелкните Установить.

Если решение Visual Studio уже установлено, но требуется установить рабочую нагрузку Node.js, сделайте следующее:

1. В Visual Studio выберите Средства>Получить средства и компоненты.
2. В Visual Studio Installer выберите рабочую нагрузку Разработка Node.js и щелкните Изменить, чтобы скачать и установить рабочую нагрузку.

1. После создания проекта щелкните правой кнопкой мыши узел проекта и выберите Панель свойств.
2. На панели Свойства задайте путь Node.exe для ссылки на глобальную или локальную установку Node.js. Вы можете указать путь к локальному интерпретатору в каждом из своих проектов Node.js.

Это руководство было протестировано с помощью Node.js 18.5.0.

Это руководство было протестировано с Node.js 12.6.2.

Создание проекта

Прежде всего, создайте проект веб-приложения Node.js.

1. Откройте Visual Studio и нажмите клавишу ESC, чтобы закрыть начальное окно.
2. Нажмите клавиши CTRL+Q, введите node.js в поле поиска, а затем выберите в раскрывающемся списке элемент Blank Node.js Web Application — JavaScript (Пустое веб-приложение Node.js — JavaScript). Хотя в этом руководстве используется компилятор TypeScript, выполнение приведенных в нем инструкций необходимо начинать с шаблона JavaScript. Если параметр Пустое веб-приложение Node.js не отображается, нужно установить рабочую нагрузку «Разработка Node.js». Соответствующие инструкции см. в разделе Предварительные требования.
3. В диалоговом окне Настроить новый проект выберите команду Создать. Visual Studio создаст новое решение и откроет проект в области справа. Файл проекта server.js откроется в области редактора слева.
4. Структуру проекта можно изучить в Обозревателе решений в области справа.
   • На верхнем уровне находится решение (1), имя которого по умолчанию совпадает с именем проекта. Решение, представленное на диске файлом SLN, является контейнером для одного или нескольких связанных проектов.
   • Ваш проект (2) с именем, которое вы указали в диалоговом окне Настроить новый проект, выделен полужирным шрифтом. В файловой системе этот проект представляет собой файл .njsproj в папке вашего проекта. Чтобы просмотреть и задать свойства проекта и переменные среды, нажмите клавиши ALT+ВВОД или щелкните проект правой кнопкой мыши и в контекстном меню выберите пункт Свойства. Вы можете использовать и другие средства разработки, так как файл проекта не вносит изменений в источник проекта Node.js.
   • В узле npm (3) представлены все установленные пакеты npm. Чтобы найти и установить пакеты npm, щелкните правой кнопкой мыши узел npm. Вы можете установить и обновить пакеты с помощью параметров в package.json, или щелкнув узел npm правой кнопкой мыши.
   • Npm использует файл package.json (4) для управления зависимостями и версиями для локально установленных пакетов. Дополнительные сведения см. в разделе Управление пакетами npm.
   • Файлы проекта (5) отображаются в узле проекта. Файл запуска проекта server.js выделяется полужирным шрифтом. Задать файл запуска можно, щелкнув правой кнопкой мыши файл в проекте и выбрав Задать как файл запуска Node.js.

1. Откройте Visual Studio.
2. Создание проекта Нажмите клавишу ESC, чтобы закрыть окно запуска. Нажмите CTRL+Q, чтобы открыть поле поиска, введите Node.js и выберите Пустое веб-приложение Node.js (JavaScript). (Хотя в этом учебнике используется компилятор TypeScript, в шагах указано, что нужно начинать с шаблона JavaScript.) В появившемся диалоговом окне выберите Создать. Если шаблон проекта Пустое веб-приложение Node.js отсутствует, необходимо добавить рабочую нагрузку Разработка Node.js. Подробные инструкции см. в разделе с предварительными требованиями. Visual Studio создаст решение и откроет проект. (1) Полужирным шрифтом выделен ваш проект, имя которого вы указали в окне Новый проект. В файловой системе этот проект представлен файлом NJSPROJ в папке проекта. Вы можете задать свойства и переменные среды, связанные с проектом, щелкнув его правой кнопкой мыши и выбрав пункт Свойства (или нажав сочетание клавиш ALT + ВВОД). Вы можете одновременно использовать и другие средства разработки, так как файл проекта не вносит изменения в источник проекта Node.js. (2) На верхнем уровне находится решение, имя которого по умолчанию совпадает с именем проекта. Решение, представленное на диске файлом SLN, является контейнером для одного или нескольких связанных проектов. (3) В узле npm представлены все установленные пакеты npm. Вы можете щелкнуть узел npm правой кнопкой мыши, чтобы найти и установить пакеты npm с помощью диалогового окна. Кроме того, установить и обновить пакеты можно с помощью параметров, доступных в файле package.json и контекстном меню узла npm. (4) package.json — это файл, который npm использует для управления зависимостями и версиями пакетов для локально установленных пакетов. Дополнительные сведения см. в разделе Управление пакетами npm. (5) Файлы проекта, такие как server.js, отображаются в узле проекта. server.js — это файл запуска проекта, поэтому он выделяется полужирным шрифтом. Задать файл запуска можно, щелкнув правой кнопкой мыши файл в проекте и выбрав Задать как файл запуска Node.js.

Добавление пакетов npm

Для правильной работы этого приложения требуются следующие модули npm:

• react
• react-dom
• express
• path
• ts-loader
• typescript
• webpack
• webpack-cli

1. В Обозревателе решений щелкните правой кнопкой мыши узел npm и выберите элемент Установка новых пакетов npm.
2. В диалоговом окне Установка новых пакетов npm выполните поиск пакета react и щелкните команду Установить пакет.

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

Из Обозревателя решений откройте package.json в редакторе Visual Studio. Добавьте следующий раздел dependencies перед концом файла:

"dependencies": < "express": "^4.18.2", "path": "^0.12.7", "react": "^18.2.0", "react-dom": "^18.2.0", "ts-loader": "^9.4.2", "typescript": "^5.0.2", "webpack": "^5.76.3", "webpack-cli": "^5.0.1" >, 

Примечание. Кроме того, пакеты npm можно установить с помощью командной строки. В Обозревателе решений щелкните правой кнопкой мыши имя проекта и выберите пункт Открыть командную строку здесь. Используйте стандартные команды Node.js для установки пакетов.

Добавление файлов проекта

Теперь добавьте в проект четыре новых файла.

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

1. В Обозревателе решений выберите имя проекта и нажмите клавиши CTRL+SHIFT+A или щелкните правой кнопкой мыши имя проекта и выберите элементы Добавить>Новый элемент. Если вы не видите все шаблоны элементов, выберите «Показать все шаблоны» и выберите шаблон элемента.
2. В диалоговом окне Добавление нового элемента выберите JSX-файл TypeScript, введите имя файла app.tsx и нажмите кнопку Добавить или ОК.
3. Повторите эти шаги, чтобы добавить файл JavaScript с именем webpack-config.js.
4. Повторите эти шаги, чтобы добавить HTML-файл с именем index.html.
5. Повторите эти шаги, чтобы добавить файл конфигурации TypeScript JSON с именем tsconfig.json.

Добавление кода приложения

1. В Обозревателе решений откройте файл server.js и замените его содержимое следующим кодом:

'use strict'; var path = require('path'); var express = require('express'); var app = express(); var staticPath = path.join(__dirname, '/'); app.use(express.static(staticPath)); // Allows you to set port in the project properties. app.set('port', process.env.PORT || 3000); var server = app.listen(app.get('port'), function() < console.log('listening'); >); 

declare var require: any var React = require('react'); var ReactDOM = require('react-dom'); export class Hello extends React.Component < render() < return ( 
Welcome to React!!
 ); > > ReactDOM.render(, document.getElementById('root')); 

Настройка параметров компилятора webpack и TypeScript

Затем добавьте код конфигурации webpack в файл webpack-config.js. Вы добавляете простую конфигурацию webpack, в которой указываются входной файл (app.tsx) и выходной файл (app-bundle.js) для объединения и транскомпиляции кода JSX в обычный код JavaScript. Для транскомпиляции также настраиваются некоторые параметры компилятора TypeScript. Этот простой пример конфигурации поможет познакомиться с возможностями средства webpack и компилятора TypeScript.

В Обозревателе решений откройте файл webpack-config.js и добавьте приведенный ниже код.

module.exports = < devtool: 'source-map', entry: "./app.tsx", mode: "development", output: < filename: "./app-bundle.js" >, resolve: < extensions: ['.Webpack.js', '.web.js', '.ts', '.js', '.jsx', '.tsx'] >, module: < rules: [ < test: /\.tsx$/, exclude: /(node_modules|bower_components)/, use: < loader: 'ts-loader' >> ] > > 

< "compilerOptions": < "noImplicitAny": false, "module": "commonjs", "noEmitOnError": true, "removeComments": false, "sourceMap": true, "target": "es5", "jsx": "react" >, "exclude": [ "node_modules" ], "files": [ "app.tsx" ] > 

Транскомпиляция JSX

1. В Обозревателе решений щелкните правой кнопкой мыши имя проекта и выберите пункт Открыть командную строку здесь.
2. В командной строке введите следующую команду webpack: node_modules\.bin\webpack —config webpack-config.js В окне командной строки будут выведены результаты. Если вместо приведенных выше выходных данных будут выведены ошибки, их необходимо будет устранить, чтобы приложение работало. Отличие версий пакетов npm от версий, указанных в этом руководстве, может привести к ошибкам. Чтобы устранить ошибки, попробуйте следующее:
   • Используйте точные версии, показанные на предыдущем шаге, если вы еще не сделали Или, если вы по-прежнему видите ошибки:
   • Установите последние версии пакетов npm, щелкнув правой кнопкой мыши узел npm в Обозреватель решений и выбрав установить пакеты npm.

Если одна или несколько версий пакетов устарели и приводят к ошибке, может потребоваться установить более последнюю версию для устранения ошибок. Дополнительные сведения об использовании package.json для контроля версий пакетов npm см. в разделе Конфигурация package.json.

Щелкните правой кнопкой мыши узел проекта в Обозревателе решений, а затем выберите элементы Добавить>Существующая папка.

Выберите папку dist, а затем щелкните команду Выбрать папку. Visual Studio добавит в проект папку dist, которая содержит файлы app-bundle.js и app-bundle.js.map.

Откройте файл app-bundle.js, чтобы просмотреть транскомпилированный код JavaScript.

Если будет предложено перезагрузить файлы, которые были изменены в других средствах, выберите вариант Да, для всех.

Каждый раз при внесении изменений в файл app.tsx необходимо повторно выполнять команду webpack. Чтобы автоматизировать этот шаг, можно добавить скрипт сборки для транскомпиляции JSX.

Добавление скрипта сборки для транскомпиляции JSX

Для версий Visual Studio, начиная с Visual Studio 2019, требуется скрипт сборки. Вместо транскомпиляции JSX в командной строке (как показано в предыдущем разделе) можно транскомпилировать JSX при сборке из Visual Studio.

Откройте Package.json и добавьте следующий раздел после раздела dependencies :

"scripts":

Выполнить приложение

1. На панели инструментов Отладка выберите целевой объект отладки, например веб-сервер (Microsoft Edge) или веб-сервер (Google Chrome).

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

Чтобы запустить приложение, нажмите клавишу F5, выберите зеленую стрелку или выберите элементы Отладка>Начать отладку. Откроется окно консоли Node.js, в котором отображается порт прослушивания отладчика. Visual Studio запускает приложение с помощью файла запуска server.js.

Закройте браузер и окно консоли.

Установите точку останова и запустите приложение.

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

В файле server.js щелкните в поле слева от объявления staticPath , чтобы установить точку останова:

Установка и срабатывание точки останова в коде React на стороне клиента

В предыдущем разделе вы подключили отладчик к коду Node.js на стороне сервера. Чтобы использовать точки останова на стороне клиента React, необходимо присоединить отладчик к нужному процессу. Ниже описан один из способов настройки отладки в браузере и подключения к процессу.

Включение отладки в браузере

Можно использовать Microsoft Edge или Google Chrome. Закройте все окна целевого браузера. Для Microsoft Edge также отключите все экземпляры Chrome. Так как оба браузера используют одну базу кода Chromium, лучше всего завершить работу обоих браузеров.

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

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

1. В раскрывающемся списке на панели инструментов Отладка выберите элемент Просмотр с помощью.
2. На экране Просмотр с помощью выберите нужный браузер и нажмите Добавить.
3. В поле Аргументы введите —remote-debugging-port=9222.
4. Присвойте браузеру новое понятное имя, например Edge с отладкой или Chrome с отладкой, а затем нажмите кнопку ОК.
5. На экране Просмотр с помощью выберите элемент Просмотр.

• Кроме того, вы можете открыть интерфейс Выполнить, щелкнув левой кнопкой мыши кнопку Пуск в среде Windows, и ввести следующий текст: msedge —remote-debugging-port=9222 or chrome.exe —remote-debugging-port=9222

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

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

1. В редакторе Visual Studio задайте точку останова в исходном коде app-bundle.js или app.tsx.
2. Для app-bundle.js задайте точку останова в функции render() . Чтобы найти функцию render() в файле app-bundle.js, нажмите клавиши CTRL+F или выберите элементы Правка>Найти и заменить>Быстрый поиск и введите render в поле поиска.

Если вы задаете точку останова в app.tsx, обновите webpack-config.js, чтобы заменить приведенный ниже код. После этого сохраните изменения. Замените этот код:

output: < filename: "./app-bundle.js", >, 

Вставьте следующий код:

output: < filename: "./app-bundle.js", devtoolModuleFilenameTemplate: '[resource-path]' // removes the webpack:/// prefix >, 

Совет После первого подключения можно быстро подключаться к этому же процессу, выбрав элементы Отладка>Повторно подключиться к процессу или нажав клавиши SHIFT+ALT+P.

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

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

Выберите Вложить. В следующем примере показано окно Подключиться к процессу для обозревателя Microsoft Edge.

Совет Если отладчик не присоединяется и вы видите сообщение Unable to attach to the process. An operation is not legal in the current state (Не удалось подключиться к процессу. Операция недопустима в текущем состоянии) с помощью диспетчера задач закройте все экземпляры целевого браузера перед запуском браузера в режиме отладки. Возможно, в браузере выполняются расширения, которые препятствуют переходу в режим полной отладки.

• Если вам не удается попасть в точку останова в файле app.tsx, повторите процесс с операцией Подключиться к процессу, которая подключает отладчик, как описано в предыдущих шагах. Убедитесь, что ваша среда настроена правильно:
  • Закройте все экземпляры браузера, включая расширения Chrome, с помощью диспетчера задач. Обязательно запустите браузер в режиме отладки.
  • Убедитесь, что сопоставитель с исходным кодом содержит ссылку на ./app.tsx, а не webpack:///./app.tsx, что не позволяет отладчику Visual Studio найти app.tsx.

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