Как писать на javascript в visual studio
Перейти к содержимому

Как писать на javascript в visual studio

  • автор:

Узнайте, как использовать редактор кода для JavaScript

В этом кратком руководстве по редактору кода Visual Studio мы рассмотрим несколько методов, которые упрощают написание, понимание кода и навигацию по нему в Visual Studio.

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

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

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

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

  1. Открыв проект в Visual Studio, щелкните в обозревателе решений (панель справа) папку или узел проекта правой кнопкой мыши, а затем выберите Добавить>Новый элемент. Если вы не видите все шаблоны элементов, выберите «Показать все шаблоны» и выберите шаблон элемента.
  2. В диалоговом окне Новый файл выберите в категории Общие нужный тип файла для добавляемого файла, например Файл JavaScript, а затем щелкните Открыть. Это действие добавляет в проект новый файл и открывает его в редакторе.

Использование IntelliSense для завершения слов

Технология IntelliSense крайне полезна при написании кода. Она может отображать сведения о доступных членах типа или сведения о параметрах для различных перегрузок метода. В следующем коде, введя строку Router() , вы увидите доступные для передачи типы аргументов. Эта возможность называется справкой по сигнатурам.

Screenshot of a Visual Studio code window with JavaScript code being entered. IntelliSense information is shown for the Router() function.

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

Screenshot of a Visual Studio code window with the word

IntelliSense также может отображать сведения о типах при наведении указателя мыши на элементы программы.

Чтобы предоставить IntelliSense нужную информацию, языковая служба может использовать файлы TypeScript d.ts и комментарии JSDoc. Для самых распространенных библиотек JavaScript автоматически извлекаются файлы d.ts. Дополнительные сведения о получении информации для IntelliSense см. в статье IntelliSense для JavaScript.

Проверка синтаксиса

Языковая служба использует ESLint для проверки синтаксиса и анализа кода. Если вам потребуется задать параметры для проверки синтаксиса в редакторе, выберите Средства>Параметры>JavaScript/TypeScript>Анализ кода. Параметры анализа кода приведут вас к глобальному файлу конфигурации ESLint.

В следующем коде синтаксис выражения выделяется зеленым цветом (зеленой волнистой линией). Наведите указатель на подсветку синтаксиса.

View syntax error

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

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

View error list

Чтобы исправить этот код, добавьте запятую ( , ) перед элементом «data» .

См. дополнительные сведения об анализе кода.

Закомментирование кода

Панель инструментов, которая находится в строке кнопок под строкой меню в Visual Studio, поможет повысить продуктивность написания кода. Например, можно переключить режим завершения IntelliSense (IntelliSense — это помощник в написании кода, который отображает список подходящих методов и многое другое), увеличить или уменьшить отступ строки или закомментировать код, который вы не хотите компилировать. В этом разделе мы закомментируем код.

Comment out button

Выберите одну или несколько строк кода в редакторе, а затем нажмите кнопку «Закомментировать выбранные строки» на панели инструментов. Если вы предпочитаете использовать клавиатуру, нажмите Ctrl+K, Ctrl+C.

В начало каждой выбранной строки добавляются символы комментария JavaScript // , чтобы этот код игнорировался при выполнении.

Свертывание блоков кода

Чтобы не перенасыщать представление определенных сегментов кода, можете свернуть их. Выберите небольшое серое поле со знаком «минус» внутри в поле первой строки функции. Или, если вы предпочитаете использовать клавиатуру, поместите курсор в любое место кода конструктора и нажмите клавиши CTRL+M, CTRL+M.

Outlining collapse button

Блок кода сворачивается до первой строки, после которой идет многоточие ( . ). Чтобы развернуть блок кода, щелкните то же серое поле, в котором теперь находится знак «плюс», или нажмите клавиши CTRL+M, CTRL+M еще раз. Эта функция называется структурированием и особенно полезна при свертывании длинных функций или целых классов.

Просмотр определений

Редактор Visual Studio упрощает проверку определения типа, функции и т. д. Один из способов — перейти к файлу, который содержит определение, например, выбрав «Перейти к определению » в любом месте, на который ссылается элемент программирования. Сделать это еще быстрее и даже без перемещения фокуса с рабочего файла можно с помощью команды Показать определение. Давайте рассмотрим определение метода render в приведенном ниже примере.

Щелкните render правой кнопкой мыши и выберите пункт Показать определение в контекстном меню. Или нажмите Alt+F12.

Отображается всплывающее окно с определением метода render . Вы можете прокрутить его или даже показать определение другого типа из просматриваемого кода.

Peek definition window

Закройте окно просматриваемого определения, щелкнув небольшое поле со знаком «x» в его правом верхнем углу.

Использование фрагментов кода

Visual Studio предоставляет удобные фрагменты кода, позволяющие быстро и легко создавать часто используемые блоки кода. Фрагменты кода доступны для различных языков программирования, включая JavaScript. Давайте добавим в файл кода цикл for .

Поместите курсор в то место, куда вы намерены добавить фрагмент кода, щелкните здесь правой кнопкой мыши и выберите Фрагмент>Вставить фрагмент.

Code snippet in Visual Studio

В редакторе отобразится поле Вставить фрагмент. Выберите Общие и дважды щелкните в списке элемент for.

Code snippet for a for loop in Visual Studio

Это действие добавляет в код цикл for :

for (var i = 0; i

Вы можете просмотреть фрагменты кода, доступные для используемого языка, выбрав Изменить>IntelliSense>Вставить фрагмент и указав папку вашего языка.

Связанный контент

  • Фрагменты кода
  • Навигация по коду
  • Структура
  • Функции «Перейти к определению» и «Показать определение»
  • Рефакторинг
  • Использование IntelliSense

JavaScript и TypeScript в Visual Studio

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.

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

Начиная с 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 menu in Solution Explorer

В контекстном меню вы можете управлять пакетами, установленными 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, вам нужно сначала создать их.

Как писать на javascript в visual studio

Как запустить код JavaScript в Visual Studio Code

Как запустить код JavaScript в Visual Studio Code

03 марта 2023
Оценки статьи
Еще никто не оценил статью

Иногда возникает необходимость запустить фрагмент кода JavaScript напрямую в Visual Studio Code (VSCode), чтобы проверить его работоспособность. В этой статье мы рассмотрим, как запустить код JavaScript в VS Code.

Установка Node.js на компьютер

Первым шагом для запуска JavaScript в VS Code является установка Node.js.

Node.js — это среда выполнения JavaScript, которая позволяет запускать JavaScript на стороне сервера.

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

Вы можете загрузить и установить Node.js с официального сайта по ссылке

Создайте файл JavaScript в VS Code

После установки Node.js вы можете создать файл JavaScript в VS Code.

Чтобы создать новый файл JavaScript, выберите File -> New File в меню VS Code. Затем сохраните файл с расширением .js (например, index.js).

Напишите JavaScript код

После создания файла JavaScript вы можете написать код, который хотите запустить. Например, давайте создадим новый массива на основе существующего массива с помощью map() :

let numbers = [1, 2, 3, 4, 5]; let squares = numbers.map(num => num ** 2); console.log(squares); 

Запустите код

Теперь мы готовы запустить наш JavaScript код. Чтобы запустить код, выберите Terminal -> New Terminal в меню VS Code, чтобы открыть новую вкладку терминала. В терминале введите следующую команду: node index.js

где index.js — это имя файла, который вы создали ранее.

После выполнения этой команды вы увидите вывод в консоли:

>>> [ 1, 4, 9, 16, 25 ] 

Скриншот выполненного кода в VS CODE

Это означает, что ваш JavaScript код успешно запущен в VS Code!

Вы можете также использовать VS Code для отладки JavaScript кода, используя встроенные средства отладки. Для этого вам нужно создать конфигурационный файл отладки (launch.json) и настроить его для запуска и отладки вашего JavaScript кода.

В заключение, запуск JavaScript кода в VS Code — это очень простой процесс, который можно выполнить всего за несколько шагов.

Установите Node.js, создайте файл JavaScript, напишите код и запустите его в терминале VS Code. Вы можете использовать этот процесс для разработки и отладки JavaScript приложений в VS Code.

Меню категорий

    Загрузка категорий.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *