Как запустить javascript в visual studio code

Руководство. Node.js для начинающих

Если вы новичок в использовании Node.js, это руководство поможет вам начать с некоторых основ.

• Использование Node.js в Visual Studio Code
• Создание первого веб-приложения Node.js с помощью Express
• Попробуйте использовать модуль Node.js

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

• Установка Node.js в Windows или в подсистеме Windows для Linux.

Если вы впервые пробуете Node.js, рекомендуем выполнить установку непосредственно в Windows. Дополнительные сведения см. в статье Выбор между установкой Node.js в Windows и подсистеме Windows для Linux.

Использование Node.js в Visual Studio Code

Если вы еще не установили Visual Studio Code, вернитесь к предыдущему разделу предварительных требований и выполните действия по установке, связанные с Windows или WSL.

1. Откройте командную строку и создайте новый каталог с помощью команды mkdir HelloNode , а затем введите каталог: cd HelloNode .
2. Создайте файл JavaScript с именем «app.js» и переменной с именем «msg» в: echo var msg > app.js
3. Откройте каталог и файл app.js в VS Code с помощью команды code . .
4. Добавьте простую строковую переменную («Hello World»), а затем отправьте содержимое строки в консоль, введя его в файле «app.js»:

var msg = 'Hello World'; console.log(msg); 

Обратите внимание, что при вводе console в файл «app.js», VS Code отображает поддерживаемые параметры, связанные с объектом console , который можно выбрать из использования IntelliSense. Попробуйте поэкспериментировать с Intellisense, используя другие объекты JavaScript.

Создание первого веб-приложения Node.js с помощью Express

Express — это минимальная, гибкая и оптимизированная платформа Node.js, которая упрощает разработку веб-приложения, которое может обслуживать несколько типов запросов, таких как GET, PUT, POST и DELETE. Express поставляется с генератором приложений, который автоматически создает архитектуру файлов для приложения.

Чтобы создать проект с помощью Express.js, выполните следующие действия.

1. Откройте командную строку (командная строка, Powershell или любой другой вариант).
2. Создайте новую папку проекта: mkdir ExpressProjects и введите этот каталог: cd ExpressProjects
3. Используйте Express для создания шаблона проекта HelloWorld: npx express-generator HelloWorld —view=pug

Примечание. Мы используем команду npx , чтобы выполнить пакет Node Express.js без фактической установки (или временно установить его в зависимости от того, как вы хотите его представить). Если вы попытаетесь использовать команду express или проверить установленную версию Express с помощью: express —version , вы получите ответ, о том, что Express не удается найти. Если вы хотите глобально установить Express, чтобы применять его на постоянной основе, используйте: npm install -g express-generator . Список пакетов, установленных npm, можно просмотреть с помощью npm list . Они будут перечислены по глубине (количество вложенных каталогов в глубину). Установленные пакеты будут иметь глубину 0. Зависимости пакета будут иметь глубину 1, дополнительные зависимости на уровне глубины — 2 и т. д. Дополнительные сведения см. в статье Различие между npx and npm на сайте StackOverflow.

• bin . Содержит исполняемый файл, который запускает приложение. Он запускает сервер (через порт 3000, если не указана альтернатива) и настраивает базовую обработку ошибок.
• public . Содержит все общедоступные файлы, включая файлы JavaScript, таблицы стилей CSS, файлы шрифтов, изображения и другие ресурсы, необходимые пользователям при подключении к веб-сайту.
• routes . Содержит все обработчики маршрутов для приложения. В этой папке автоматически создаются два файла, index.js и users.js , которые служат примерами разделения конфигурации маршрута приложения.
• views . Содержит файлы, используемые модулем шаблонов. Express настроен на поиск подходящего представления при вызове метода преобразования. Обработчик шаблонов по умолчанию — Jade, но Jade является устаревшим в сравнении с Pug, поэтому для изменения подсистемы просмотра (шаблона) мы использовали флаг —view . Параметры флага —view и другие можно увидеть, используя express —help .
• app.js . Начальная точка приложения. Она загружает все и начинает обслуживать запросы пользователей. По сути, это связующий элемент, который содержит все части вместе.
• package.json . Содержит описание проекта, диспетчер скриптов и манифест приложения. Его основное назначение заключается в отслеживании зависимостей приложения и их соответствующих версий.

npm install 

npx cross-env DEBUG=HelloWorld:* npm start 

Совет Часть DEBUG=myapp:* приведенной выше команды означает, что вы указываете Node.js включить ведение журнала в целях отладки. Не забудьте заменить «myapp» именем своего приложения. Имя приложения можно найти в файле package.json в свойстве «name». Использование npx cross-env устанавливает переменную среды DEBUG в любом терминале, но ее также можно задать с помощью конкретного терминала. Команда npm start сообщает npm о необходимости запуска скриптов в файле package.json .

Теперь вы можете просмотреть работающее приложение, открыв веб-браузер и перейдя по адресу: localhost:3000

Теперь, когда приложение HelloWorld Express выполняется локально в браузере, попробуйте внести изменения, открыв папку «views» в каталоге проекта и выбрав файл «index.pug». После открытия измените h1= title на h1= «Hello World!» и выберите Сохранить (Ctrl+S). Просмотрите изменения, обновив URL-адрес localhost:3000 в веб-браузере.

Чтобы остановить запуск приложения Express, в терминале введите: CTRL+C

Использование модуля Node.js

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

Средство	Используется для
gm, sharp	Обработка изображений, включая редактирование, изменение размера, сжатие и т. д., непосредственно в коде JavaScript
PDFKit	Поколение PDF
validator.js	Проверка строки
imagemin, UglifyJS2	Минификация
spritesmith	Создание листа спрайтов
winston	Ведение журналов
commander.js	Создание приложения командной строки

Давайте воспользуемся встроенным модулем ОС для получения сведений об операционной системе компьютера:

1. В командной строке откройте интерфейс командной строки Node.js. После входа вы увидите подсказку > , сообщающую вам, что вы используете Node.js: node
2. Чтобы определить операционную систему, используемую в данный момент (которая должна возвращать ответ, сообщающий о том, что вы работаете под Windows), введите: os.platform()
3. Чтобы проверить архитектуру ЦП, введите: os.arch()
4. Чтобы просмотреть доступные в системе процессоры, введите: os.cpus()
5. Оставьте интерфейс командной строки Node.js, введя .exit или дважды нажав CTRL+C.

Совет Модуль OS Node.js можно использовать для выполнения таких действий, как проверка платформы и возврата переменной для конкретной платформы: Win32/.bat для разработки Windows, дарвин/.sh для Mac/unix, Linux, SunOS и т. д. (например, var isWin = process.platform === «win32»; ).

Краткое руководство. Создание функции JavaScript в Azure с помощью Visual Studio Code

С помощью Visual Studio Code создайте функцию JavaScript, которая отвечает на HTTP-запросы. Протестируйте код в локальной среде, а затем разверните его в бессерверном окружении Функций Azure.

Содержимое этой статьи изменяется в зависимости от выбора модели программирования Node.js в селекторе в верхней части страницы. Модель версии 4 является общедоступной и предназначена для более гибкого и интуитивно понятного интерфейса для разработчиков JavaScript и TypeScript. Дополнительные сведения о различиях между версиями 3 и 4 см. в руководстве по миграции.

Выполнение этого краткого руководства повлечет за собой небольшие затраты в размере нескольких центов в долларах США или меньше в вашей учетной записи Azure.

Существует также версия этой статьи для интерфейса командной строки.

Настройка среды

Перед началом работы убедитесь, что выполнены следующие предварительные требования.

• Учетная запись Azure с активной подпиской. Создайте учетную запись бесплатно.
• Node.js 14.x или более поздней версии. Используйте команду node —version , чтобы проверить установленную версию.
• Visual Studio Code на одной из поддерживаемых платформ.
• Расширение «Функции Azure» для Visual Studio Code. Это расширение устанавливает Функции Azure Core Tools при первом локальном запуске функций.

• Учетная запись Azure с активной подпиской. Создайте учетную запись бесплатно.
• Node.js 18.x или более поздней версии. Используйте команду node —version , чтобы проверить установленную версию.
• Visual Studio Code на одной из поддерживаемых платформ.
• Расширение Функции Azure версии 1.10.4 или более поздней версии для Visual Studio Code. Это расширение устанавливает Функции Azure Core Tools при первом локальном запуске функций. Node.js версии 4 требуется версия 4.0.5382 или более поздняя версия Core Tools.

Установка или обновление Core Tools

Расширение Функции Azure для Visual Studio Code интегрируется с Функции Azure Core Tools, что позволяет выполнять и отлаживать функции локально в Visual Studio Code с помощью среды выполнения Функции Azure. Прежде чем приступить к работе, рекомендуется установить Core Tools локально или обновить существующую установку, чтобы использовать последнюю версию.

В Visual Studio Code нажмите клавишу F1, чтобы открыть палитру команд, а затем найдите и выполните команду Функции Azure: Установка или обновление основных средств.

Эта команда запускает установку последней версии Core Tools на основе пакета.

Создание локального проекта

В этом разделе вы используете Visual Studio Code, чтобы создать локальный проект Функций Azure на JavaScript. Далее в этой статье вы опубликуете код функции в Azure.

1. Щелкните значок Azure на панели действий. Затем в области Рабочая область (локальная) нажмите кнопку + и выберите пункт Создать функцию в раскрывающемся списке. В ответ на запрос выберите вариант Создать проект.
2. Выберите расположение каталога для рабочей области проекта и нажмите кнопку Выбрать. Нужно либо создать новую папку, либо выбрать пустую папку для рабочей области проекта. Не выбирайте папку проекта, которая является частью рабочей области.

1. Введите следующие сведения по соответствующим запросам:
   

   prompt	Выбор
   Выбор язык для проекта приложения-функции	Выберите JavaScript .
   Выбор модели программирования JavaScript	Выберите Model V3 .
   Выбор шаблона для первой функции проекта	Выберите HTTP trigger .
   Provide a function name (Укажите имя функции)	Введите HttpExample .
   Уровень авторизации	выберите Anonymous , что позволит любому пользователю вызывать конечную точку функции. Дополнительные сведения об уровне авторизации см. в разделе Authorization keys (Ключи авторизации).
   Выбор способа открытия проекта	Выберите Open in current window .

   Используя эти сведения, Visual Studio Code создает проект функций Azure с триггером HTTP. Файлы локального проекта можно просмотреть в Explorer. Дополнительные сведения см. в разделе Generated project files (Созданные файлы проекта).

1. Введите следующие сведения по соответствующим запросам:
   

   prompt	Выбор
   Выбор язык для проекта приложения-функции	Выберите JavaScript .
   Выбор модели программирования JavaScript	Выберите Model V4 .
   Выбор шаблона для первой функции проекта	Выберите HTTP trigger .
   Provide a function name (Укажите имя функции)	Введите HttpExample .
   Выбор способа открытия проекта	Выберите Open in current window .

   Используя эти сведения, Visual Studio Code создает проект функций Azure с триггером HTTP. Файлы локального проекта можно просмотреть в Explorer. Дополнительные сведения о создаваемых файлах см. в Функции Azure руководстве разработчика JavaScript.

Локальное выполнение функции

Visual Studio Code интегрируется с Azure Functions Core Tools, чтобы перед публикацией в Azure можно было запустить этот проект на локальном компьютере разработки.

1. Чтобы запустить функцию локально, нажмите клавишу F5 или значок Выполнить и отладка на панели действий слева. На панели Терминал отобразятся выходные данные из Core Tools. Ваше приложение запускается в панели Терминал. Отобразится URL-адрес конечной точки активируемой HTTP-запросом функции, которая выполняется локально. При возникновении проблем с запуском в Windows убедитесь, что в качестве терминала по умолчанию для Visual Studio Code не используется оболочка WSL.
2. Во время выполнения Core Tools в Терминале щелкните значок Azure на панели действий. В области Рабочая область разверните узел Локальный проект>Функции. Щелкните правой кнопкой мыши (Windows) или CTRL. Щелкните (macOS) новую функцию и выберите команду Выполнить функцию сейчас. .
3. В поле Ввести текст запроса вы увидите значение текста запроса < "name": "Azure" >. Нажмите клавишу ВВОД, чтобы отправить это сообщение запроса в свою функцию.
4. При выполнении функции локально и возврате ответа в Visual Studio Code отобразится уведомление. Сведения о выполнении функции отображаются на панели Терминал.
5. Откройте панель терминала и нажмите клавиши CTRL+C , чтобы остановить основные инструменты и отключить отладчик.

Убедившись, что функция выполняется правильно на локальном компьютере, опубликуйте проект в Azure с помощью Visual Studio Code.

Вход в Azure

Прежде чем публиковать приложение, необходимо войти в Azure.

1. Если вы не выполнили вход, щелкните значок Azure на панели действий. Затем в области Ресурсы выберите Вход в Azure. . Если вы уже выполнили вход и видите существующие подписки, перейдите к следующему разделу. Если у вас еще нет учетной записи Azure, выберите Создать учетную запись Azure. . Учащиеся могут выбрать Создать учетную запись Azure для учащихся. .
2. При появлении запроса в браузере выберите учетную запись Azure и войдите в нее с помощью учетных данных. Если вы создаете новую учетную запись, вы можете выполнить вход после ее создания.
3. Выполнив вход, можно закрыть новое окно браузера. Подписки, принадлежащие учетной записи Azure, отображаются на боковой панели.

Создание приложения-функции в Azure

В этом разделе показано, как создать приложение-функцию и связанные ресурсы в подписке Azure.

1. Щелкните значок Azure на панели действий. Затем в области Ресурсы щелкните значок + и выберите вариант Создать приложение-функцию в Azure.
2. Введите следующие сведения по соответствующим запросам:
   

   prompt	Выбор
   Выбор подписки	Выберите подписку, которую нужно использовать. Эта подсказка не отобразится, если в области Ресурсы отображается только одна подписка.
   Ввод глобально уникального имени для приложения-функции	Введите имя, допустимое в пути URL-адреса. Имя, которое вы вводите, проверяется, чтобы убедиться, что оно уникально в функциях Azure.
   Выбор стека среды выполнения	Выберите версию языка, которая запускалась локально.
   Выбор расположения для новых ресурсов	Для повышения производительности выберите регион рядом с вами.

   Расширение показывает на панели Azure: журнал действий состояние отдельных ресурсов по мере их создания в Azure.

3. После завершения создания в вашей подписке будут созданы приведенные ниже ресурсы Azure. Имена ресурсов основаны на имени приложения-функции.
   • Группа ресурсов — логический контейнер связанных ресурсов.
   • Учетная запись хранения Azure уровня «Стандартный» для сохранения состояния и других сведений о проектах.
   • приложение-функцию — среду для выполнения кода функции. Приложение-функция позволяет группировать функции в логические единицы и упростить развертывание, масштабирование и совместное использование ресурсов, а также управление ими в рамках единого плана размещения.
   • План службы приложений, который определяет базовый узел для приложения-функции.
   • Экземпляр Application Insights, подключенный к приложению-функции, который отслеживает использование функций в приложении.

После создания приложения-функции и применения пакета развертывания отобразится уведомление.

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

Развертывание проекта в Azure

Развертывание в существующем приложении-функции всегда перезаписывает содержимое этого приложения в Azure.

1. Щелкните значок Azure на панели действий, а затем в области Рабочая область выберите папку проекта и нажмите кнопку Развернуть. .
2. Выберите Развернуть в приложении-функции. , выберите только что созданное приложение-функцию и нажмите Развернуть.
3. После завершения развертывания выберите Просмотреть выходные данные, чтобы просмотреть результаты создания и развертывания, включая созданные ресурсы Azure. Если вы пропустили уведомление, щелкните значок колокольчика в правом нижнем углу, чтобы снова просмотреть его.

Запуск функции в Azure

1. Вернувшись в область Ресурсы на боковой панели, разверните узел подписки, узел нового приложения-функции и узел Функции. Щелкните правой кнопкой мыши (в Windows) или используйте Ctrl- щелчок (в macOS) на функции HttpExample и выберите Выполнить функцию. .
2. В поле Ввести текст запроса вы увидите значение текста запроса < "name": "Azure" >. Нажмите клавишу ВВОД, чтобы отправить это сообщение запроса в свою функцию.
3. При выполнении функции в Azure и возврате ответа в Visual Studio Code отобразится уведомление.

Изменение кода и повторное развертывание в Azure

1. В Visual Studio Code в представлении обозревателя выберите файл ./HttpExample/index.js .
2. Замените файл следующим кодом, чтобы создать объект JSON и вернуть его.

module.exports = async function (context, req) < try < context.log('JavaScript HTTP trigger function processed a request.'); // Read incoming data const name = (req.query.name || (req.body && req.body.name)); const sport = (req.query.sport || (req.body && req.body.sport)); // fail if incoming data is required if (!name || !sport) < context.res = < status: 400 >; return; > // Add or change code here const message = `$ likes $`; // Construct response const responseJSON = < "name": name, "sport": sport, "message": message, "success": true >context.res = < // status: 200, /* Defaults to 200 */ body: responseJSON, contentType: 'application/json' >; > catch(err) < context.res = < status: 500 >; > > 

Устранение неполадок

Используйте следующую таблицу для устранения наиболее распространенных проблем, возникающих при использовании этого краткого руководства.

Проблема	Решение
Не удается создать локальный проект приложения-функции?	Убедитесь, что у вас установлено расширение Функций Azure.
Не можете запустить функцию локально?	Убедитесь, что установлена последняя версия Функции Azure Core Tools. При запуске в Windows убедитесь, что в качестве оболочки терминала по умолчанию для Visual Studio Code не настроена оболочка WSL Bash.
Не удается развернуть функцию в Azure?	Проверьте выходные данные на наличие сведений об ошибке. Выходные данные также можно просмотреть, щелкнув значок колокольчика в правом нижнем углу. Публикация выполнялась в существующем приложении-функции? Это действие перезаписывает содержимое этого приложения в Azure.
Не удается выполнить облачное приложение-функцию?	Не забудьте использовать строку запроса для отправки параметров.

Очистка ресурсов

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

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

1. В Visual Studio Code выберите значок Azure, чтобы открыть обозреватель Azure.
2. В разделе «Группы ресурсов» найдите группу ресурсов.
3. Щелкните группу ресурсов правой кнопкой мыши и выберите Удалить.

Дополнительные сведения о затратах на использование Функций см. в статье Estimating Consumption plan costs (Оценка затрат на план потребления).

Дальнейшие действия

С помощью Visual Studio Code вы создали приложение-функцию с простой функцией, активируемой HTTP-запросом. В следующей статье показано, как расширить эту функцию путем подключения к Azure Cosmos DB или службе хранилища Azure. Дополнительные сведения о подключении к другим службам Azure см. в статье Подключение функций к службам Azure с помощью привязок. Если вы хотите узнать больше о безопасности, см. статью Защита Функций Azure.

Как запустить код в Visual studio code (javascript)?

Всем привет! вот такая у меня проблемка. Кто знает как решить?

Лучший ответ

Привет! Чтобы запустить код на JavaScript в Visual Studio Code, вам нужно сделать следующее:

Откройте Visual Studio Code и создайте новый файл, нажав клавиши Ctrl + N (Windows) или Cmd + N (Mac).

Напишите свой JavaScript код в созданном файле.

Сохраните файл с расширением .js, выбрав «File» -> «Save» в главном меню или используя сочетание клавиш Ctrl + S (Windows) или Cmd + S (Mac).

Откройте терминал в Visual Studio Code, выбрав «Terminal» -> «New Terminal» в главном меню или используя сочетание клавиш Ctrl + Shift + ~ (Windows) или Cmd + Shift + ~ (Mac).

В терминале введите команду node имя_вашего_файла.js, чтобы запустить ваш JavaScript код.

Например, если ваш файл называется «script.js», введите команду node script.js.

Нажмите клавишу «Enter» и ваш JavaScript код будет выполнен в терминале.
Вы также можете использовать расширения для Visual Studio Code, такие как Code Runner или Quokka, чтобы запускать свой JavaScript код непосредственно в редакторе, без необходимости использовать терминал.

Остальные ответы
выбери node js
Yellow_HelloУченик (148) 8 месяцев назад

Геннадий Сибирский Просветленный (20582) Akzhol_Kenzhegali, ну на этом наши уполномочия. это. всё
Yellow_HelloУченик (148) 8 месяцев назад

нашёл решение. просто надо было закачать расширение «run code»

TypeScript in Visual Studio Code

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. It offers classes, modules, and interfaces to help you build robust components.

Installing the TypeScript compiler

Visual Studio Code includes TypeScript language support but does not include the TypeScript compiler, tsc . You will need to install the TypeScript compiler either globally or in your workspace to transpile TypeScript source code to JavaScript ( tsc HelloWorld.ts ).

The easiest way to install TypeScript is through npm, the Node.js Package Manager. If you have npm installed, you can install TypeScript globally ( -g ) on your computer by:

npm install -g typescript 

You can test your install by checking the version.

tsc --version 

Another option is to install the TypeScript compiler locally in your project ( npm install —save-dev typescript ) and has the benefit of avoiding possible interactions with other TypeScript projects you may have.

Hello World

Let’s start with a simple Hello World Node.js example. Create a new folder HelloWorld and launch VS Code.

mkdir HelloWorld cd HelloWorld code . 

From the File Explorer, create a new file called helloworld.ts .

Now add the following TypeScript code. You’ll notice the TypeScript keyword let and the string type declaration.

let message: string = 'Hello World'; console.log(message); 

To compile your TypeScript code, you can open the Integrated Terminal ( ⌃` (Windows, Linux Ctrl+` ) ) and type tsc helloworld.ts . This will compile and create a new helloworld.js JavaScript file.

If you have Node.js installed, you can run node helloworld.js .

If you open helloworld.js , you’ll see that it doesn’t look very different from helloworld.ts . The type information has been removed and let is now var .

var message = 'Hello World'; console.log(message); 

IntelliSense

IntelliSense shows you intelligent code completion, hover information, and signature help so that you can write code more quickly and correctly.

VS Code provides IntelliSense for individual TypeScript files as well as TypeScript tsconfig.json projects.

Hover information

Hover over a TypeScript symbol to quickly see its type information and relevant documentation:

You can also show the hover information at the current cursor position with the ⌘K ⌘I (Windows, Linux Ctrl+K Ctrl+I ) keyboard shortcut.

Signature help

As you write a TypeScript function call, VS Code shows information about the function signature and highlights the parameter that you are currently completing:

Signature help is shown automatically when you type a ( or , within a function call. Use ⇧⌘Space (Windows, Linux Ctrl+Shift+Space ) to manually trigger signature help.

Snippets

In addition to smart code completions, VS Code also includes basic TypeScript snippets that are suggested as you type.

You can install extensions to get additional snippets or define your own snippets for TypeScript. See User Defined Snippets for more information.

Tip: You can disable snippets by setting editor.snippetSuggestions to «none» in your settings file. If you’d like to see snippets, you can specify the order relative to suggestions; at the top ( «top» ), at the bottom ( «bottom» ), or inlined ordered alphabetically ( «inline» ). The default is «inline» .

Errors and warnings

The TypeScript language service will analyze your program for coding problems and report errors and warnings:

• In the Status bar, there is a summary of all errors and warnings counts.
• You can click on the summary or press ⇧⌘M (Windows, Linux Ctrl+Shift+M ) to display the PROBLEMS panel with a list of all current errors.
• If you open a file that has errors or warnings, they will be rendered inline with the text and in the overview ruler.

To loop through errors or warnings in the current file, you can press F8 or ⇧F8 (Windows, Linux Shift+F8 ) which will show an inline zone detailing the problem and possible Code Actions (if available):

Code navigation

Code navigation lets you quickly navigate TypeScript projects.

• Go to Definition F12 — Go to the source code of a symbol definition.
• Peek Definition ⌥F12 (Windows Alt+F12 , Linux Ctrl+Shift+F10 ) — Bring up a Peek window that shows the definition of a symbol.
• Go to References ⇧F12 (Windows, Linux Shift+F12 ) — Show all references to a symbol.
• Go to Type Definition — Go to the type that defines a symbol. For an instance of a class, this will reveal the class itself instead of where the instance is defined.
• Go to Implementation ⌘F12 (Windows, Linux Ctrl+F12 ) — Go to the implementations of an interface or abstract method.

You can navigate via symbol search using the Go to Symbol commands from the Command Palette ( ⇧⌘P (Windows, Linux Ctrl+Shift+P ) ).

• Go to Symbol in File ⇧⌘O (Windows, Linux Ctrl+Shift+O )
• Go to Symbol in Workspace ⌘T (Windows, Linux Ctrl+T )

Formatting

VS Code includes a TypeScript formatter that provides basic code formatting with reasonable defaults.

Use the typescript.format.* settings to configure the built-in formatter, such as making braces appear on their own line. Or, if the built-in formatter is getting in the way, set «typescript.format.enable» to false to disable it.

For more specialized code formatting styles, try installing one of the formatting extensions from the VS Code Marketplace.

Refactoring

VS Code includes some handy refactorings for TypeScript such as Extract function and Extract constant. Just select the source code you’d like to extract and then click on the light bulb in the gutter or press ( ⌘. (Windows, Linux Ctrl+. ) ) to see available refactorings.

See Refactoring TypeScript for more information about refactorings and how you can configure keyboard shortcuts for individual refactorings.

Rename

One of the simplest refactorings is to rename a method or variable. Press F2 to rename the symbol under the cursor across your TypeScript project:

Debugging

VS Code comes with great debugging support for TypeScript, including support for sourcemaps. Set breakpoints, inspect objects, navigate the call stack, and execute code in the Debug Console. See Debugging TypeScript and the overall Debugging topic to learn more.

Debug client side

You can debug your client-side code using a browser debugger such as the built-in Edge and Chrome debugger, or the Debugger for Firefox.

Debug server side

Debug Node.js in VS Code using the built-in debugger. Setup is easy and there is a Node.js debugging tutorial to help you.

Linters

Linters provides warnings for suspicious looking code. While VS Code does not include a built-in TypeScript linter, TypeScript linter extensions available in the Marketplace.

ESLint is a popular linter, which also supports TypeScript. The ESLint extension integrates ESLint into VS Code so you can see linting errors right in the editor and even quickly fix many of them with Quick Fixes. The ESLint plugin guide details how to configure ESLint for your TypeScript projects.

TypeScript extensions

VS Code provides many features for TypeScript out of the box. In addition to what comes built-in, you can install an extension for greater functionality.

Tip: Click on an extension tile above to read the description and reviews to decide which extension is best for you. See more in the Marketplace.

Next steps

To learn more, see:

• TypeScript tutorial — Create a simple Hello World TypeScript in VS Code.
• Editing TypeScript — Specific editing features for TypeScript.
• Refactoring TypeScript — Useful refactorings from the TypeScript language service.
• Compiling TypeScript — Compile TypeScript to a JavaScript target version.
• Debugging TypeScript — Learn about debugging TypeScript both server and client-side with VS Code.

Common questions

Can I use the version of TypeScript that ships with VS 2022?

No, the TypeScript language service that ships with Visual Studio 2019 and 2022 isn’t compatible with VS Code. You will need to install a separate version of TypeScript from npm.

How can I use the latest TypeScript beta with VS Code?

The simplest way to try out the latest TypeScript features in VS Code is to install the JavaScript and TypeScript Nightly extension.