Узнайте, как использовать редактор кода для JavaScript
В этом кратком руководстве по редактору кода в Visual Studio мы рассмотрим некоторые способы написания, навигации и понимания кода.
Совет
Если вы еще не установили Visual Studio, перейдите на страницу загрузок Visual Studio, чтобы установить ее бесплатно. Дополнительные сведения о получении языковой службы для TypeScript см. в разделе Поддержка TypeScript.
В этой статье предполагается, что вы уже знакомы с разработкой JavaScript. Если это не так, мы рекомендуем сначала ознакомиться с руководством, таким как Создание приложения Node.js и Express приложения.
Добавление нового файла проекта
Вы можете использовать интегрированную среду разработки для добавления новых файлов в проект.
Открыв проект в Visual Studio, щелкните правой кнопкой мыши папку или узел проекта в обозревателе решений (справа) и выберите Добавить>новый элемент.
Если вы не видите все шаблоны элементов, выберите показать все шаблоны, а затем выберите шаблон элемента.
В диалоговом окне Создания файла в категории "Общие" выберите тип файла, который требуется добавить, например файл JavaScript, а затем выберите Открыть.
Новый файл добавляется в проект и открывается в редакторе.
Использование IntelliSense для завершения слов
IntelliSense — это бесценный ресурс при написании кода. Он может отображать сведения о доступных членах типа или сведения о параметрах для различных перегрузок метода. В следующем коде при вводе Router()отображаются типы аргументов, которые можно передать. Это называется помощью по подписи.
Вы также можете использовать IntelliSense, чтобы завершить слово после ввода достаточно символов, чтобы диамбигуировать его. Если вы поместите курсор после строки data в следующем коде и введите get, IntelliSense будет отображать функции, определенные ранее в коде или определенные в сторонней библиотеке, которую вы добавили в проект.
IntelliSense также может отображать сведения о типах при наведении указателя мыши на элементы программирования.
Чтобы предоставить сведения о IntelliSense, служба языка может использовать файлы TypeScript d.ts и комментарии JSDoc. Для большинства распространенных библиотек JavaScript d.ts файлы автоматически загружаются. Дополнительные сведения о получении данных IntelliSense см. в разделе JavaScript IntelliSense.
Проверка синтаксиса
Языковая служба использует ESLint для обеспечения проверки синтаксиса и линтинга. Если необходимо задать параметры проверки синтаксиса в редакторе, выберите Инструменты>Опции>JavaScript/TypeScript>Linting. Параметры линтинга указывают на глобальный файл конфигурации ESLint.
В следующем коде вы увидите выделение синтаксиса зеленым цветом (зеленые волнистые подчеркивания) в выражении. Наведите указатель мыши на выделение синтаксиса.
Последняя строка этого сообщения сообщает, что языковая служба ожидала запятую (,). Зеленая волнистая линия означает предупреждение. Красные волнистые линии указывают на ошибку.
В нижней области можно щелкнуть вкладку Список ошибок, чтобы увидеть предупреждение и описание, а также имя файла и номер строки.
Этот код можно исправить, добавив запятую (,) до "data".
Для получения дополнительной информации о линтинге см. раздел .
Закомментируйте код
Панель инструментов, которая является строкой кнопок в строке меню в Visual Studio, может помочь повысить производительность по мере использования кода. Например, можно переключить режим завершения IntelliSense (IntelliSense — это помощь по написанию кода, которая отображает список подходящих методов, среди прочего), увеличьте или уменьшите отступ строки или закомментируйте код, который не требуется компилировать. В этом разделе мы закомментируем некоторый код.
Выберите одну или несколько строк кода в редакторе, а затем нажмите кнопку "Закомментировать выбранные строки"
на панели инструментов. Если вы предпочитаете использовать клавиатуру, нажмите клавиши CTRL +K, CTRL+C.
Символы комментариев JavaScript, // добавляются в начало каждой выбранной строки, чтобы закомментировать код.
Свернуть блоки кода
Если вам нужно упростить представление некоторых регионов кода, его можно свернуть. Выберите небольшое серое поле с знаком минуса внутри него в поле первой строки функции. Если вы пользуетесь клавиатурой, поместите курсор в любом месте кода конструктора и нажмите клавиши Ctrl+M, Ctrl+M.
Блок кода свернут до первой строки, за которым следует многоточие (...). Чтобы снова развернуть блок кода, щелкните тот же серый прямоугольник, который теперь имеет знак плюса, или нажмите клавиши Ctrl +M, Ctrl+M еще раз. Эта функция называется структурирование и особенно удобна для сворачивания длинных функций или целых классов.
Просмотр определений
Редактор Visual Studio упрощает проверку определения типа, функции и т. д. Одним из способов является переход к файлу, который содержит определение, например, выбрав Перейти к определению в любом месте, на который ссылается элемент программирования. Еще более быстрый способ, который не перемещает фокус от файла, с которым вы работаете, — это использовать Peek Definition. Рассмотрим определение метода render в приведенном ниже примере.
Щелкните правой кнопкой мыши render и выберите просмотреть определение в меню содержимого. Или нажмите клавиши ALT +F12.
Всплывающее окно отображается с определением метода render. Вы можете прокрутить всплывающее окно или даже просмотреть определение другого типа из просматриваемого кода.
Закройте окно предварительного просмотра определения, выбрав значок "x" в правом верхнем углу всплывающего окна.
Просмотр встроенных подсказок
Начиная с версии 17.12 Visual Studio 2022, подсказки наложения показывают дополнительную информацию о исходном коде, отображаемую встроено. Обычно это используется для отображения выводимых типов, имен параметров и других неявных сведений из кода непосредственно в редакторе.
Чтобы настроить встроенные подсказки, выполните следующие действия.
Перейдите в "Средства" > "Параметры" > "Текстовый редактор" > "Все языки" > "Встроенные подсказки"и выберите вариант просмотра встроенных подсказок.
Перейдите к разделу Средства > Опции > Текстовый редактор > JavaScript/TypeScript > Advanced > General и настройте вспомогательные подсказки, которые вы хотите скрыть или показать.
По умолчанию большинство этих параметров отключены.
Использование фрагментов кода
Visual Studio предоставляет полезные фрагменты кода, которые можно использовать для быстрого и простого создания часто используемых блоков кода.
фрагменты кода доступны для различных языков программирования, включая JavaScript. Давайте добавим цикл for в файл кода.
Поместите курсор, где вы хотите вставить фрагмент кода, щелкните правой кнопкой мыши и выберите фрагмент кода>вставки фрагмента кода.
фрагмент кода 
Поле вставки фрагмента кода появится в редакторе. Выберите Общие, а затем дважды щелкните на элемент в списке.
фрагмент кода 
Это добавляет фрагмент цикла for в код:
for (var i = 0; i < length; i++) {
}
Вы можете просмотреть доступные фрагменты кода для вашего языка, выбрав Изменить>IntelliSense>Вставить фрагмент кода, а затем выбрав папку языка.