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

Разработка кода 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, вам нужно сначала создать их.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

for (var i = 0; i

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

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

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

Как настроить VS Code для разработки на JavaScript

Visual Studio Code – популярный бесплатный редактор кода, созданный Microsoft’ом для программистов. VS Code никак не связан с Visual Studio. VS Code работает быстрее Атома, активно развивается и легко расширяется плагинами.

• отладчик кода
• встроенный терминал
• удобные инструменты для работы с Git
• подсветка синтаксиса для множества популярных языков и файловых форматов
• удобная навигация
• встроенный предпросмотр Markdown
• умное автодополнение
• встроенный пакетный менеджер

Пакетный менеджер нужен для установки и удаления пакетов расширений (плагинов). Для удобной разработки на JavaScript для бэкенда и фронтенда нужно установить несколько пакетов.

Для установки нового пакета зайдите в выпадающее меню «View» на вкладку «Extensions» и введите название пакета в строке поиска, а затем нажмите кнопку «Install».

Babel и ES6

VS Code содержит понятие «сборки проекта». Редактор можно настроить таким образом, чтобы сборка JavaScript-проекта заключалась в конвертации кода из ES6 в читаемый ES5 с Source Maps с помощью Babel.

Добавьте таск (задание) в файл tasks.json в директории .vscode в корне вашего проекта:

 "version": "2.0.0", "type": "shell", "tasks": [  "label": "watch", "command": "$/node_modules/.bin/babel src --out-dir dist -w --source-maps", "group": "build", "isBackground": true > ] > 

Теперь комбинация клавиш Shift+Ctrl+B (Windows/Linux) или Shift+CMD+B (macOS) запустит сборку.

Стандарты кодирования

Eslint – это утилита, проверяющая стандарты кодирования на JavaScript. Стандарт де-факто в мире JS.

Нужно сначала установить eslint в системе, а потом установить расширение VS Code, которое будет использовать установленный линтер. Есть разные способы интеграции линтера с расширением. Мы рассмотрим установку линтера глобально в системе.

1. Установите Node.js, используя пакетный менеджер вашей операционной системы.
2. Установите eslint командой npm install -g eslint . Вероятно, вам понадобится использовать sudo .
3. Установите плагины, которые конфигурируют eslint . Без них (по умолчанию) eslint ничего не проверяет.

npm install -g eslint-config-airbnb-base eslint-plugin-import 

extends: - 'airbnb-base' env: node: true browser: true 

Автоматическое дополнение

VS Code содержит мощную систему анализа кода для автодополнений и подсказок – IntelliSense.

IntelliSense работает сразу, но для настройки деталей нужно создать конфигурационный файл jsconfig.json .

jsconfig.json

Если положить в корень директории с JavaScript-проектом конфигурационный файл jsconfig.json , то VS Code будет использовать эту конфигурацию для работы с вашим проектом. Вот пример такого файла:

 "compilerOptions":  "target": "ES6" >, "exclude": [ "node_modules", "**/node_modules/*" ] > 

Здесь можно настроить, например, какие директории стоит исключить из системы автодополнений IntelliSense. VS Code совместим с node, webpack, bower, ember и другими популярными инструментами. Полная документация по jsconfig доступна на сайте VS Code.

Отладка

VS Code содержит встроенный отладчик кода. Вы можете, например, отметить брейкпойнты (точки остановки) и следить за состоянием приложения в реальном времени.

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

• Debugger for Chrome
• Debugger for Firefox
• Debugger for Edge

Подробнее об отладке можно узнать на сайте VS Code.

Ссылки

Курс по настройке окружения для работы в современной экосистеме JavaScript.

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.