Узнайте, как использовать редактор кода для JavaScript
В этом кратком руководстве по редактору кода Visual Studio мы рассмотрим несколько методов, которые упрощают написание, понимание кода и навигацию по нему в 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 см. в статье 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 < length; i++) {
}
Вы можете просмотреть фрагменты кода, доступные для используемого языка, выбрав Изменить>IntelliSense>Вставить фрагмент и указав папку вашего языка.