Javascript в visual studio как создать проект

JavaScript в Visual Studio

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

• Инструменты Node.js для Visual Studio
• Поддержка TypeScript в Visual Studio

Ссылка

• Справочник по языку JavaScript (MDN)
• TypeScript
• Размещение среды выполнения JavaScript
• Интерфейсы скриптов Windows (архив)
• JScript и VBScript (архив)

См. также

Дополнительные ресурсы

Значок отказа согласно Закону Калифорнии о защите конфиденциальности потребителей (CCPA)

• Светлая
• Темная
• Высокая контрастность

• Предыдущие версии
• Блог
• Участие в доработке
• Конфиденциальность
• Условия использования
• Товарные знаки
• © Microsoft 2023

Дополнительные ресурсы

Значок отказа согласно Закону Калифорнии о защите конфиденциальности потребителей (CCPA)

• Светлая
• Темная
• Высокая контрастность

• Предыдущие версии
• Блог
• Участие в доработке
• Конфиденциальность
• Условия использования
• Товарные знаки
• © Microsoft 2023

Пример создания простейшего приложения на языке JavaScript в IDE WebStorm

Данный пример демонстрирует создание простейшего приложения на языке JavaScript в интегрированной среде WebStorm. По данному примеру можно получить программный каркас для изучения синтаксиса и основных возможностей JavaScript и его интеграции с HTML/CSS.

Поиск на других ресурсах:

1. Условие задачи

Используя сочетание языков программирования HTML и JavaScript разработать программу, которая выводит на экран сообщение «Hello, world!». Программу разработать в интегрированной среде WebStorm.

Продемонстрировать различные способы вывода сообщения:

• в документе веб-браузера;
• в отдельном диалоговом окне.

Программный код JavaScript должен быть реализован двумя способами:

• непосредственно в документе HTML;
• в отдельном файле hello.js , подключаемом к документу HTML.

2. Выполнение

2.1. Создание проекта в IDE WebStorm

Для разработки приложений на языках JavaScript, HTML&CSS хорошо подходит интегрированная среда разработки WebStorm от компании JetBrains.

После запуска интегрированной среды откроется окно приглашения, приблизительный вид которого изображен на рисунке 1.

Для создания нового проекта нужно выбрать команду Create New Project .

Рисунок 1. Окно «Welcome to WebStorm»

В результате откроется окно «New Project» , изображенное на рисунке 2.

Рисунок 2. Окно выбора типа нового проекта

Система предлагает следующие виды проектов:

• Empty Project – пустой проект;
• Angular CLI – реализация проекта на основе npm-модуля (JavaScript Package Manager), предназначенного для регистрации программного обеспечения из терминала. Более подробно о npm-модуле можно прочитать по следующей ссылке ;
• AngularJS – проект с использованием фреймворка с открытым кодом AngularJS;
• Bootstrap – проект на основе открытого бесплатного фреймворка Bootstrap, используемого для front-end разработки сайтов. Получить подробную информацию о данном фреймворке можно по ссылке ;
• Cordova App – приложение с использованием платформы для разработки мобильных приложений Apache Cordova;
• HTML5 Boilerplate – проект, основанный на использовании популяного шаблона с поддержкой HTML/CSS/JavaScript;
• Meteor App – проект на основе веб-фреймворка MeteorJS, использующего Node.js;
• Node.js , Node.js Express – проекты на основе платформы с открытым кодом Node.js, предназначенной для создания сетевых приложений. Подробную информацию о фреймворках можно получить здесь и здесь;
• React App – проект на основе JavaScript-библиотеки React с открытым программным кодом, которая используется для создания пользовательских интерфейсов в больших веб-приложениях, использующих данные, изменяющиеся со временем без перезагрузки страницы;
• React Native – проект на основе React-архитектуры, предложенной компанией Facebook. Подробную документацию об архитектуре React Native можно получить здесь;
• Vue.js – проект на основе JavaScript фреймворка с открытым кодом Vue.js, который используется для создания пользовательских интерфейсов. Подробную информацию о данном фреймворке можно получить здесь ;
• Yeoman – проект на основе набора приложений Yeoman (Yo), позволяющий генерировать (создавать) проекты на любом языке, в том числе и JavaScript. Более подробно о Yeoman можно прочитать здесь .

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

В нашем случае, пока не нужно использовать дополнительные библиотеки или фреймворки. Поэтому при создании проекта нужно выбрать Empty Project (рисунок 3).

В поле Location: устанавливается папка, в которой будут размещаться файлы проекта. В нашем случае устанавливается папка

D:\Projects\WebStorm\Hello

По желанию можно установить другую папку.

Рисунок 3. Выбор пустого проекта в окне New Project

После выбора кнопки Create откроется окно среды WebStorm, как показано на рисунке 4.

Рисунок 4. Окно интегрированной среды WebStorm

2.3. Создание HTML-файла

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

• кликнуть правой кнопкой мышки на имени проекта Hello и в контекстном меню выбрать последовательность команд New->HTML File (рисунок 5);
• в главном меню выбрать последовательность команд File->New->HTML File (рисунок 6).

Рисунок 5. Команда контекстного меню New->HTML File

Рисунок 6. Выбор команды создания HTML-документа из главного меню

После вызова команды создания HTML-файла откроется окно New HTML File (рисунок 7), в котором нужно задать имя main (или другое) и выбрать версию языка HTML 5 file . Свой выбор необходимо зафиксировать нажатием клавиши Enter.

Рисунок 7. Указание имени HTML-файла и версии HTML 5

В результате, в главном окне среды WebStorm будет создана заготовка на языке HTML, который имеет следующий текст

html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> head> body> body> html>

На рисунке 8 изображен вид окна среды WebStorm после добавления HTML-файла.

Рисунок 8. Проект Hello после добавления файла main.html

2.4. Запуск HTML-файла

Как известно, файлы HTML открываются в веб-браузере. В нашем случае запуск HTML-файла выполняется одним из двух способов:

• щелчком мышки на кнопке с изображением веб-браузера (рисунок 9);
• выбором последовательности команд Run->Run…->main.html (если файл main.html запускается впервые) или Run->main.html (если файл main.html запускается повторно) как показано на рисунке 10.

После вызова команды запуска файла main.html откроется один из выбраных браузеров с пустой страницей.

Рисунок 9. Список браузеров, которые могут выполнить (открыть) файл main.html

Рисунок 10. Запуск файла main.html впервые (команда Run… ) и повторно (команда Run ‘main.html’ )

2.5. Добавление кода JavaScript

В файле main.html код программы на JavaScript вписывается между тэгами

body> . body>

В наиболее общем случае код может быть вписан одним из трех способов:

1. Непосредственно в html-файле. В этом случае код на JavaScript размещается между тегами

script> . script>

2. В файле с расширением *.js , который также подключается между тегами

script> . script>

3. Непосредственно в html-файле с помещением кода в атрибут события HTML-элемента.

В данной теме рассматриваются первые два случая.

2.5.1. Код JavaScript в тексте main.html . Вывод сообщения на странице веб-браузера с помощью метода document.write()

Вид файла main.html в случае включения в него кода JavaScript, выводящего сообщение «Hello, world!», следующий

html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> head> body> script>  // Текст на JavaScript  document.write("Hello, world!") script> body> html>

Здесь между тэгами вписана строка

document.write("Hello, world!")

которая выводит сообщение. Теперь можно запустить файл main.html в веб-браузере и проверить работу программы.

2.5.2. Вывод сообщения в отдельном окне. Метод alert()

Можно вызвать окно для отображения сообщения «Hello, world!». В этом случае используется вызов метода alert() . Модифицированный фрагмент кода файла main.html имеет вид:

. body> script>  // Текст на JavaScript  // Вызов окна с сообщением  alert("Hello, world!") script> body> .

2.5.3. Вызов кода JavaScript, который был сформирован в отдельном файле

Если размер кода JavaScript велик, то целесообразно разместить (структурировать) его в одном или нескольких отдельных файлах.

Чтобы в HTML-файле вызвать код программы на JavaScript, размещаемый в файле, нужно использовать строку вида

script src="myfile.js"> script>

• myfile.js – название подключаемого файла.

2.5.4. Подключение файла на языке JavaScript

Процесс добавления файла на JavaScript подобен созданию HTML-файла. Также существует 2 способа подключения JavaScript-файла в проект:

• с помощью контекстного меню (рисунок 11);
• с помощью вызова последовательности команд File->New->JavaScript File (рисунок 12).

Рисунок 11. Добавление JavaScript-файла к проекту из контекстного меню

Рисунок 12. Команды главного меню для добавления JavaScript-файла в проект

В результате откроется окно уточнения New JavaScript file , в котором нужно задать имя файла (рисунок 13) и нажать клавишу Enter. В нашем случае указывается имя hello . В результате система создаст файл с именем hello.js . Расширение *.js означает, что файл создается на языке JavaScript.

Рисунок 13. Указание имени файла hello.js

После создания файла в окне Project , отображающего структуру проекта, появится файл hello.js (рисунок 14).

Рисунок 14. Отображение файла hello.js в структуре проекта

Файл JavaScript добавлен, теперь можно переходить к созданию кода.

2.5.5. Написание кода JavaScript в файле hello.js

С помощью мыши или клавиатуры можно переключаться между файлами hello.js и main.html .

В файле hello.js можно писать программный код (скрипт) на языке JavaScript. В нашем случае вписывается строка вывода сообщения в отдельном окне:

// В файле hello.js вписывается код на JavaScript alert("Hello, world!")

На рисунке 15 отображено окно редактора WebStorm с кодом JavaScript.

Рисунок 15. Окно редактора WebStorm с программой на JavaScript

Для вывода сообщения в главном документе веб-браузера в файле hello.js можно использовать метод document() по следующему образцу

document.write("Hello, world!")

2.5.6. Подключение JavaScript кода к файлу main.html

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

script src = hello.js> script>

Здесь имя исполняемого JavaScript-файла задается с помощью атрибута hello.js .

После корректировки, полный код файла main.html будет выглядеть так:

html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> head> body> script src = hello.js> script> body> html>

Подобным образом в код HTML-файла можно добавлять любое количество файлов на языке JavaScript.

2.6. Запуск файла main.html в браузере. Просмотр результатов

После выполненных действий можно открывать файл main.html в браузере. Этот процесс уже был описан в п. 2.4. После открытия файла в некотором браузере результат выполнения программы должен быть примерно следующий

Рисунок 16. Результат выполнения программы

Настройка среды разработки Node.js. Быстрый способ создание проекта с помощью фреймворка Express

В этом руководстве мы расскажем, как настроить среду разработки Node.js для проекта Express. Мы также рассмотрим некоторые полезные инструменты, которые мы рекомендуем для всех приложений Node.js.

Установка Node.js

• OS X — Самый простой способ установить Node.js на OS X — использовать официальный установщик с сайта nodejs.org . Вы также можете использовать Homebrew, если хотите. Для управления и переключения между версиями Node.js на вашем компьютере мы рекомендуем использовать nvm .
• Windows — Самый простой способ установить Node.js в Windows — это официальный установщик с сайта nodejs.org . Вы также можете использовать Chocolatey, если хотите. Для управления и переключения между версиями Node.js на вашем компьютере мы рекомендуем использовать nvm-windows
• Linux — Способ установки Node.js зависит от дистрибутива. Для управления и переключения между версиями Node.js на вашем компьютере мы рекомендуем использовать nvm.

Установите текстовый редактор или IDE

Прежде чем мы сможем начать проект Node.js, нам понадобится место для написания нашего кода.

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

• Visual Studio Code в настоящее время является самой популярной интегрированной средой разработки (IDE), используемой для проектов JavaScript. Это быстрый бесплатный редактор и отладчик, который работает на всех платформах и поставляется со многими уже установленными полезными инструментами.
• WebStorm — еще одна чрезвычайно мощная IDE, построенная на платформе IntelliJ с открытым исходным кодом. Попробовать можно бесплатно, но через 30 дней требуется платная лицензия.
• Инструменты Node.js для Visual Studio — отличный вариант, если вы уже являетесь пользователем Visual Studio .
• Vim — многолетний любимый текстовый редактор среди опытных пользователей.

Если вы новичок в программировании, мы настоятельно рекомендуем начать с Visual Studio Code.

Запуск нового проекта с помощью npm init

Перед запуском любого нового проекта Node.js мы должны запустить npm init , чтобы создать новый package.json файл для нашего проекта.

Создайте новый пустой каталог в среде разработки и запустите npm init . Затем вы ответите на несколько основных вопросов о вашем проекте, и npm создаст package.json для вас новый файл, когда вы закончите.

«This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.»
«See `npm help init` for definitive documentation on these fields
and exactly what they do.»
«Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.»
«Press ^C at any time to quit.
package name: (my-project)
version: (1.0.0)
description: A sample Twilio project
entry point: (index.js)
test command:
git repository:
author: Jane Doe
license: (ISC)
About to write to /Users/<your-username>/my-project/package.json:»
«name» : «my-project» ,
«version» : «1.0.0» ,
«description» : «A sample Twilio project» ,
«main» : «index.js» ,
«test» : «echo \»Error: no test specified\» && exit 1″
«author» : «Jane Doe» ,
«license» : «ISC»
«Is this OK? (yes) yes»

Теперь мы готовы установить наши зависимости Node.js.

Также вы можете быстро инициализировать свой проект и пропустить приведенные выше подсказки, запустив npm init -y

Установка Express.js

Мы почти готовы написать веб-приложение Express, но сначала нам нужно установить пакет Express с помощью npm .

# Используйте npm для установки пакетов
$ npm install express
# Перечислите установленные зависимости и их версии
my — project @ 1.0.0 / Users / my — project
├── express @ 4.17.1
└── twilio @ 3.67.2

Node.js использует npm для управления зависимостями, поэтому команда для установки Express в нашу среду разработки — npm install express .

Установка этого пакета указывает npm добавить пакет Express к dependencies объекту в package.json файле нашего проекта. Когда мы захотим снова установить этот же пакет в будущем, например, на рабочем сервере, мы можем просто запустить npm install .

Создание простого приложения в Express.js

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

JavaScript
const express = require ( ‘express’ ) ;
const app = express ( ) ;
const port = 3000 ;
app . get ( ‘/’ , ( req , res ) = > < res . send ( 'Hello World!' ) ; app . listen ( port , ( ) = > < console . log ( ` Example app listening at http : //localhost:$`);

Затем мы можем попробовать запустить наше новое приложение Express с помощью команды node index.js . Если вы откроете http://localhost:3000 в своем браузере, вы должны увидеть «Hello World!» отклик.

Установка ngrok для локальной разработки

Как только вы увидите сообщение «Hello World!» в своем образце приложения Express. сообщение, ваша среда разработки готова к работе. Однако для большинства проектов вам потребуется установить еще один полезный инструмент: ngrok.

Большинство служб используют веб-перехватчики для связи с вашим приложением. Например, когда Twilio получает входящий телефонный звонок, он обращается к URL-адресу в вашем приложении для получения инструкций о том, как обработать вызов.

Когда вы работаете над своим приложением Express в своей среде разработки, ваше приложение доступно только другим программам на том же компьютере.

Ngrok — наш любимый инструмент для решения этой проблемы. После запуска он предоставляет уникальный URL-адрес в домене ngrok.io, который будет перенаправлять входящие запросы в вашу локальную среду разработки.

Для начала перейдите на страницу загрузки ngrok и скачайте бинарный файл для вашей операционной системы: https://ngrok.com/download

После загрузки убедитесь, что ваше приложение Express запущено, а затем запустите ngrok с помощью команды ./ngrok http 3000 . Вы должны увидеть вывод, похожий на этот:

Разработка кода JavaScript и TypeScript в Visual Studio без решений или проектов

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

Начиная с Visual Studio 2017 вы можете разрабатывать код без проектов и решений. Вы можете открыть папку кода и сразу же приступить к работе в полнофункциональном редакторе, используя IntelliSense, поиск, рефакторинг, отладку и многое другое. Помимо этих функций, в инструменты Node.js для Visual Studio добавлена поддержка сборки файлов TypeScript, управления пакетами npm и выполнения сценариев npm.

Чтобы приступить к работе, выберите Файл>Открыть>Папку на панели инструментов. Обозреватель решений отображает все файлы в папке, и можно открыть любой из файлов, чтобы начать редактирование. В фоновом режиме Visual Studio индексирует файлы, предоставляя функции npm, сборки и отладки.

Прежде чем использовать проект Open Folder, попробуйте создать решение из существующего кода Node.js. В некоторых сценариях этот метод обеспечивает лучшую поддержку функций в Visual Studio. Чтобы создать проект, выберите файл нового проекта > JavaScript > из существующего кода Node.js, а затем выберите папку проекта > в качестве источника.

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

• Visual Studio 2017 версии 15.8 или более поздней версии
• Необходимо установить рабочую нагрузку разработки Visual Studio Node.js

Интеграция npm

Если открытая папка содержит файл package.json, щелкните правой кнопкой мыши package.json, чтобы открыть контекстное меню для npm.

В контекстном меню вы можете управлять пакетами, установленными npm, так же, как вы управляете пакетами npm при использовании файла проекта.

Кроме того, в меню можно выполнять сценарии, определенные в элементе scripts в package.json. Эти скрипты будут использовать версию Node.js, доступную в переменной среды PATH . Скрипты выполняются в новом окне. Это отличный способ сборки и выполнения скриптов.

Сборка и отладка

package.json

Если package.json в папке указывает элемент main , команда отладки будет доступна в контекстном меню для package.json. При нажатии этой кнопки запускается node.exe с указанным скриптом в качестве аргумента.

Файлы JavaScript

Вы можете отлаживать файлы JavaScript, щелкнув файл правой кнопкой мыши и выбрав Отладка в контекстном меню. Запустится node.exe с этим файлом JavaScript в качестве аргумента.

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

Файлы TypeScript и tsconfig.json

Если в папке нет файла tsconfig.json, щелкните правой кнопкой мыши файл TypeScript, чтобы открыть команды контекстного меню и скомпилировать и отладить этот файл. При использовании этих команд сборка и отладка выполняются с помощью tsc.exe с параметрами по умолчанию. (Вам нужно создать файл до отладки.)

При создании кода TypeScript мы используем последнюю версию, установленную в C:\Program Files (x86)\Microsoft SDKs\TypeScript .

Если в папке есть файл tsconfig.json, щелкните правой кнопкой мыши файл TypeScript, чтобы открыть команду меню для отладки этого файла TypeScript. Этот параметр отображается только в том случае, если в tsconfig.json не указан outFile . Если outFile указан, для отладки этого файла щелкните правой кнопкой мыши tsconfig.json и выберите нужный параметр. Файл tsconfig.json также предоставляет параметр сборки для указания параметров компилятора.

Модульные тесты

Вы можете включить интеграцию модульных тестов в Visual Studio, указав тестовый корень в файле package.json:

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

• Mocha (mochajs.org)
• Jasmine (Jasmine.github.io)
• Tape (github.com/substack/tape)
• Jest (jestjs.io)

После открытия обозревателя тестов (выберите Тест>Windows>Обозреватель тестов) Visual Studio обнаруживает и отображает тесты.

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