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

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

  • автор:

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

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

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

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

install package in vs code

Для установки нового пакета зайдите в выпадающее меню «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 vscode

Нужно сначала установить 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.

Настройка Visual Studio Code для JavaScript, HTML и CSS

Visual Studio Code – это кроссплатформенный редактор кода для разработки web проектов, выпущенный Microsoft под Windows, Linux и macOS. VS Code распространяется бесплатно, постоянно развивается, а функционал расширяется плагинами. Платформа особенно популярна среди Frontend разработчиков, но также используется и другими программистами. Среди основных возможностей стоит отметить: отладчик, работа с Git, подсветка синтаксиса, встроенный терминал и пакетный менеджер.

После установки Visual Studio Code, которая не должна вызвать никаких проблем, пользователь получает полноценную платформу для написания кода. Без дополнительных манипуляций здесь доступен Emmet, а функционал легко дополняется расширениями через Visual Studio Marketplace, доступный также через интерфейс редактора. В магазин можно попасть, кликнув на иконку Extensions расположенную в боковой панели или нажав сочетание клавиш Ctrl + Shift + X

vs code расширения

Расширения для Frontend разработки

Emmet

Упрощает процесс написания кода, позволяя с помощью коротких команд формировать большие структуры кода. Плагин уже встроен в VS code, а полный список возможностей можно посмотреть на официальном сайте расширения. Короткий пример позволяющий проиллюстрировать работу Emmet: вам необходимо создать 20 элементов нумерованного списка, вы набираете ol>li*20 и нажимаете Tab или Enter – список из 20 элементов готов.

Live Server

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

ESLint

Утилита для проверки стандарта написания кода на JavaScript. Дополнение относится к программам, называемые линтеры, которые проверяют код на правильность написания и соответствия современным практикам кодирования. После анализа ESLint выделяет ошибки и неточности, которые теперь легко увидеть и исправить.

Auto Rename Tag

Автоматически переименовывает парные теги HTML/XML – таким образом остается поменять только один из двух тегов закрывающий или открывающий.

Bracket Pair Colorizer 2

Расширение раскрашивает код, тем самым позволяя лучше разбираться во вложенности элементов. Код становится более понятным, а риск совершить ошибку уменьшается.

Path Autocomplete

Плагин подсказывает пути к файлам, показывая возможные варианты, что позволяет не искать папки вручную.

Prettier — Code formatter

Позволяет автоматически приводить код в порядок согласно внутренним правилам плагина и индивидуальным настройкам пользователя. Проще говоря – расставит пробелы и переносы, заменит одинарные кавычки на двойные или наоборот и так далее.

CSS Peek

Позволяет смотреть и редактировать стили прямо в html файле. Просто зажимаете Ctrl далее наводите на класс и кликаете. После этих манипуляций появляется всплывающее окно – соответствующий файл CSS, куда и можно вносить изменения.

Debugger for Chrome

Расширения для отладки JavaScript кода. Данный плагин позволяет работать в браузерах на базе Chromium, для Firefox придется установить Debugger for Firefox.

Настраиваем VS Code под себя

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

vs code настройки

  • File – Preferences – Settings;
  • Ctrl + Shift + p – откроется поисковая строка где вначале вы увидите Preferences: Open User Settings

Рассмотрим некоторые полезные настройки

Auto Save – можно выбрать автоматическое сохранение, не сохранять автоматически, сохранять при смене или потере фокуса.

Font Size – размер шрифта в пикселях.

Line Height – высота строки.

Console: Font Size – размер шрифта для терминала.

Font Family – выбор шрифта.

Tab Size – можно задать количество пробелов в табуляции.

Open Files in New Window – позволяет настраивать создание файлов в новом окне или табе.

Word Wrap – управлением тем, как следует переносить строки – по ширине окна, не переносить и т.д.

Format On Paste – определяет, будет ли редактор автоматически форматировать вставленный код.

Minimap – включить или отключить миникарту.

Confirm Delete – убрать или оставить окно с подтверждением удаления файла.

Format On Save – настройка, отвечающая за автоматическое форматирование кода после сохранения файла. Модуль форматирования должен быть установлен отдельно, например, «Prettier — Code formatter», описанный выше.

Semi – включить / отключить автоматическое добавление ; в конце строи – настройка от «Prettier — Code formatter».

Это далеко не все настройки доступные в VS code и даже пробежаться по всем вскользь будет не так быстро. Для того, чтобы лучше ориентироваться во всем этом многообразии, можно воспользоваться левым меню, которое делит весь список на категории. Настройки чьи дефолтные значения были изменены можно увидеть в формате JSON кликнув на соответствующую иконку.

vs code настройки

Горячие клавиши для быстрой работы

В VS Code сразу же после установки доступно большое количество горячих клавиш. Для того, чтобы открыть весь список необходимо нажать Ctrl + K Ctrl + S, также попасть сюда можно через File – Preferences – Keyboard Shortcuts. На этой странице можно не только найти нужную команду, но и поменять комбинацию горячей клавиши на более удобную.

Рассмотрим некоторые популярные хоткеи:

Ctrl + F (⌘ + F) – вызвать поиск

Ctrl + / (⌘/) – закомментировать одну или несколько строк

Shift + Alt + ↓ / ↑ ( ⇧⌥↓ / ⇧⌥↑) – дублирует строку на которой установлен курсор

Ctrl + Shift + \ (⇧⌘\) – перейти к парной скобке

F2 – дает возможность переименовать переменную во всем документе

Shift + Alt + F (⇧⌥F) – отформатировать документ – работает совместно с Prettier — Code formatter или другими подобными расширениями

F12 – перекинет к объявлению переменной даже если это в другом файле

Alt + Z (⌥Z) – включить / выключить перенос слов

Alt + ↑ / ↓ (⌥Option + ↑ / ↓) – меняет местами выделенный участок кода или строку с соседней строкой

Ctrl + D (⌘ + D) – множественной редактирование одинаковых структур кода, каждый раз нажимая команду вы присоединяете к редактированию еще одну похожую структуру

Сниппеты

Сниппеты в VS Code – это шаблоны кода, которые можно разворачивать в документе с помощью краткой команды. Принцип работы схож с выше упомянутым Emmet-ом, только здесь вы создаете заготовки самостоятельно. Функционал может быть не сильно востребованным у новичков, но в процессе повышения уровня сниппеты могут помочь ускорить разработку и сократить количество ошибок.

Для того, чтобы приступить к созданию сниппетов введите в командной панели (Ctrl + Shift + p) snippet и выберите из предложенного Configure User Snippets. После этого выберите язык программирования, в нашем случае ищем JavaScript или New Global (работает со всеми типами файлов). Далее откроется документ, который и будет хранилищем наших шаблонов. Здесь сразу же можно увидеть пример.

 "Print to console":

«Print to console» – название сниппета

«prefix» – команда для активации шаблона

«body» – что будет выводиться

$1 – где будет курсор после создания сниппета

$2 – где будет курсор если нажать Tab

Если вы создадите глобальный файл, тогда еще будет «scope», где прописывается поддерживаемый язык для этого сниппета.

Напоследок

Мы рассказали про основные настройки Visual Studio Code для Frontend разработки, но в арсенале редактора еще много сюрпризов и решая различные задачи вы будете узнавать о нем все новое и новое.

Skypro — научим с нуля

17 полезных плагинов JavaScript в VS Code

Редактор кода Visual Studio Code помогает быстрее писать код, например, он подчёркивает ошибки красным цветом и показывает подсказки. Но работу можно сделать ещё приятнее, если установить нужное расширение.

Плагинов VS Code много. Здесь мы расскажем об одних из самых популярных — они пригодятся при работе с JavaScript.

ESLint

Проверяет код на синтаксические ошибки и предлагает исправления.

Конечно, в VS Code уже есть встроенная система IntelliSense, которая показывает подсказки. Но ESLint больше подходит, например, если вам нужны разные настройки — для JSX, для чистого JS, для среды Node.js. Ещё линтер можно встроить в систему проверки кода и перед отправкой файлов в репозиторий ещё раз убедиться, что всё в порядке.

Better Align

Выравнивает переменные, свойства объекта и другие элементы кода по операторам : , = , += , -= , *= , /= или по стрелке => . При этом длина переменных не важна.

EditorConfig

Расширение помогает разработчикам, которые работают над одним проектом, придерживаться единого стиля кода. EditorConfig перезаписывает настройки пользователя и рабочего окружения, заменяя их настройками, найденными в файлах .editorconfig .

Prettify JSON

Расширение форматирует файлы в формате JSON.

JavaScript (ES6) code snippets

Этот сниппет ускоряет разработку: вы вводите короткое сочетание клавиш, а вместо них появляется целая строка кода. Например, команда enf вызовет export const log = (parameter) => < console.log (parameter); >.

npm Intellisense

Пригодится при разработке под Node.js. Начните писать название модуля — по первым символам плагин подскажет варианты.

Git History

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

Project Manager

Когда вы работаете сразу над несколькими проектами, приходится переключаться между ними — это не всегда удобно. Project Manager решает эту проблему. С ним вы можете создавать, открывать, закрывать и быстро переключаться между различными проектами прямо из интерфейса Visual Studio Code.

Document this

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

Todo+

Обычно участки кода, которые планируется позже отрефакторить, помечают комментарием TODO. Могут быть и другие комментарии, например, FIXME, NOTE. Тodo+ сканирует файл и выводит все комментарии на отдельную панель.

REST Client

Позволяет отправлять HTTP-запросы и сразу же просматривать на них ответы. Например, для отправки GET-запроса достаточно ключевого слова GET и URL — рядом появится кнопка. При нажатии откроется отдельная вкладка с результатом выполнения запроса.

VSCode-random

Подойдёт, если вам нужен набор сгенерированных данных. Расширение включает несколько генераторов, которые выдают названия стран, URL-адреса, цвета, имена людей, названия улиц, валидные email, случайные числа и ещё много другого. Всё проще, чем готовить такие данные самостоятельно.

Import Cost

Пакеты в NPM (менеджере пакетов) могут быть очень объёмными. С помощью этого расширения можно увидеть размер пакета после подключения прямо в редакторе и выбрать оптимальный. А ещё вы можете задать порог — и пакеты тяжелее этого порога подсветятся красным.

Code Runner

Благодаря плагину вы сможете запустить код или сниппет на многих языках. Например, C, C++, Java, JavaScript, PHP, Python.

Snippets

Сниппеты — сокращения для часто используемых фрагментов кода. Их нужно сначала заучить, но после этого работа сильно ускоряется. Например, вам больше не нужно каждый раз писать const packageName = require(‘packageName’); — достаточно написать req и нажать клавишу tab . И таких примеров много.

Tabnine AI

Нейросеть поможет ускорить работу благодаря автодополнению кода. Аналог GitHub Copilot и других подобных сервисов.

Handlebars/Handlebars Preview, pug/htmlPugConverter

Помогают в работе с популярными шаблонизаторами handlebars и Pug.

Handlebars подсвечивает синтаксис.

Handlebars Preview быстро компилирует шаблон Handlebars и показывает результат в окне предварительного просмотра.

htmlPugConverter упрощает конвертацию HTML в синтаксис Pug и обратно.

pug — сниппет для шаблонизатора Puge/Jade.

Попробуйте эти расширения при работе с JavaScript сами. Вот увидите — жизнь станет намного проще. А если не понравится, любой плагин можно удалить — как и установить — в один клик.

Материалы по теме

  • Обзор редакторов кода
  • 10 библиотек для CSS и JS анимации
  • Топ-20 плагинов для Figma
  • Как искать и выбирать npm-пакеты
  • HTML-шаблонизаторы

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Читать дальше

Dev Mode в Figma. Быстрый обзор бета-версии

Dev Mode в Figma. Быстрый обзор бета-версии

Если вы читаете эту статью, Dev Mode в Figma наконец-то вышел в открытую бету. Быстренько рассказываем, что это такое, и как его включить и настроить.

Раньше верстальщикам была доступна только вкладка Inspect с базовой информацией о стилях конкретного элемента.

Некоторые разработчики не рекомендовали копировать стили оттуда, потому что всегда это работало с нюансами. Пока сложно сказать, насколько стили стали точнее, но работать стало определённо удобнее. Сами Adobe называют Figma новым пространством для разработчиков, с возможностями, которые помогают быстрее переводить дизайн в код. Давайте проверим.

  • 10 августа 2023

Горячие клавиши Figma для быстрой работы

Горячие клавиши Figma для быстрой работы

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

Скрыть или показать интерфейс Фигмы (Ctrl + \ или ⌘ + \ для Mac)

Эта комбинация клавиш позволяет вам быстро убрать все лишнее с экрана, чтобы вы могли сосредоточиться на своем дизайне. Или, наоборот, показать все элементы интерфейса, если вам нужно что-то найти или изменить.

Быстрый поиск по меню (Ctrl + / или ⌘ + / для Mac)

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

А если не пользуетесь — попробуйте.

  • 7 августа 2023

Старт в Figma для верстальщика

Старт в Figma для верстальщика

Figma — это онлайн-редактор графики для дизайнеров интерфейсов и веб-разработчиков. Это удобная, бесплатная альтернатива Photoshop.

Большое преимущество платформы — возможность работать прямо в браузере. При этом есть и десктопная версия. Расскажем, что надо знать верстальщику при работе с макетом в Figma.

  • 2 августа 2023

Инструменты для работы со шрифтами

Инструменты для работы со шрифтами

Работа со шрифтами и типографикой — важная часть вёрстки текста. Новые шрифты появляются очень часто, за этим сложно уследить. Существует множество инструментов, которые помогают находить нужные шрифты, управлять ими и улучшать внешний вид текста.

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

  • 29 июня 2023

10 горячих клавиш VS Code, которые ускорят вашу работу

10 горячих клавиш VS Code, которые ускорят вашу работу

Горячие клавиши — добро, польза и экономия времени. Давайте разберёмся, как с их помощью упростить себе жизнь в Visual Studio Code.

  • 13 июня 2023

10 лучших тем для VS Code

10 лучших тем для VS Code

VS Code — популярный редактор кода со множеством полезных инструментов. Сегодня мы поделимся с вами 10 темами, чтобы работать стало ещё приятнее. Выбирайте на свой вкус и цвет.

  • 11 июня 2023

10 полезных плагинов VS Code для вёрстки

10 полезных плагинов VS Code для вёрстки

Visual Studio Code — один из самых популярных редакторов кода. Его удобно использовать, и у него есть множество полезных расширений, с помощью которых легко оптимизировать работу. Такие плагины помогают допускать меньше ошибок при написании кода, да и значительно сокращают время работы.

Чтобы установить расширения, перейдите во вкладку «Extensions» и в поиске найдите подходящие плагины.

  • 9 июня 2023

Подборка микроанимаций для фронтенда с CodePen в 2023

Подборка микроанимаций для фронтенда с CodePen в 2023

⭐ Микроанимация — короткое взаимодействие, которое помогает пользователю лучше сориентироваться в интерфейсе и почувствовать совершенное действие.

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

  • 12 апреля 2023

Как собрать проект на Webpack

Как собрать проект на Webpack

Webpack — это сборщик модулей для JavaScript-приложений. Он позволяет разделять код на модули, которые затем могут быть импортированы и использованы в других частях приложения. Это полезно для структурирования кода, оптимизации производительности и поддержки сторонних библиотек.

Подробнее о Webpack мы писали в другой статье, а пока давайте создадим простой проект, который складывает два числа, а заодно научимся пользоваться Webpack.

  • 7 апреля 2023

Как скопировать файлы в каталог сборки

Как скопировать файлы в каталог сборки

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

Копирование статических файлов в каталог сборки — одна из таких функций. Выполнить эту задачу можно несколькими способами, наиболее простой — использование специального плагина CopyWebpackPlugin . Рассмотрим подробнее, как это делать.

Плагин CopyWebpackPlugin позволяет скопировать файлы из одного каталога в другой, сохраняя их иерархию.

Для начала установите CopyWebpackPlugin в свой проект:

npm install copy-webpack-plugin --save-dev 

После установки настройте конфигурацию Webpack, добавив новый экземпляр плагина в секцию plugins конфига. Пример:

const CopyWebpackPlugin = require('copy-webpack-plugin'); const path = require('path'); module.exports = < // ваша конфигурация Webpack здесь plugins: [ new CopyWebpackPlugin(< patterns: [ < from: path.resolve(__dirname, 'src/assets'), to: path.resolve(__dirname, 'dist/assets') >] >) ] >; 

В плагине содержится массив объектов patterns . Каждый объект patterns указывает на исходный файл или каталог назначения, куда копировать файлы. В примере указано, что нужно скопировать все файлы из каталога src/assets в dist/assets во время сборки.

Теперь все статические файлы будут скопированы в каталог сборки при запуске команды npm run build или той, которую вы используете для запуска сборки.

�� Научитесь работать с webpack и сократите время на разработку, сборку и тестирование проекта.

Копирование нескольких файлов

Для копирования нескольких файлов с помощью плагина CopyWebpackPlugin добавляем каждый каталог или файл в отдельный объект-шаблон в массиве patterns .

Каждый объект-шаблон содержит свойство from , оно указывает путь к файлу или каталогу для копирования. Свойство to — это путь, по которому нужно скопировать файлы или каталоги.

const CopyWebpackPlugin = require('copy-webpack-plugin'); module.exports = < //ваша конфигурация Webpack здесь plugins: [ new CopyWebpackPlugin(< patterns: [ < from: 'src/images', to: 'dist/images' >, < from: 'src/index.html', to: 'dist' >, ], >), ], >; 

В примере первый объект-шаблон копирует каталог images из src в dist/images , а второй — копирует файл index.html из src в dist .

Добавляйте столько объектов-шаблонов, сколько нужно для копирования всех необходимых файлов и каталогов.

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

Другие способы

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

Лоадер file-loader позволяет копировать статические файлы в указанную папку при сборке проекта.

Чтобы использовать file-loader , установите его с помощью npm :

npm install file-loader --save-dev 

Затем добавьте его в конфигурационный файл webpack.config.js :

module.exports = < // . ваша конфигурация webpack . module: < rules: [ < test: /\.(png|jpe?g|gif)$/i, use: [ < loader: 'file-loader', options: < name: '[name].[ext]', outputPath: 'images/', >, >, ], >, ], >, >; 

В этом примере file-loader используется для копирования файлов изображений в каталог images внутри каталога сборки.

Лоадер url-loader работает аналогично file-loader , но может преобразовывать маленькие файлы в Data URL, вместо копирования их в каталог сборки. Это может быть полезно для уменьшения количества запросов к серверу.

Для использования url-loader необходимо его установить:

npm install url-loader --save-dev 

Затем добавить в конфигурационный файл webpack.config.js :

module.exports = < module: < rules: [ < test: /\.(png|jpg|gif)$/i, use: [ < loader: 'url-loader', options: < limit: 8192, >, >, ], >, ], >, >; 

Поместите файлы, которые хотите скопировать, в соответствующий каталог в вашем проекте, например, в папку src/images . Если размер файла меньше 8 кБ, он будет встроен в виде Data URL. При сборке проекта все файлы будут обработаны и скопированы.

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

  • 30 марта 2023

JavaScript in Visual Studio Code

Visual Studio Code includes built-in JavaScript IntelliSense, debugging, formatting, code navigation, refactorings, and many other advanced language features.

Working with JavaScript in Visual Studio Code

Most of these features just work out of the box, while some may require basic configuration to get the best experience. This page summarizes the JavaScript features that VS Code ships with. Extensions from the VS Code Marketplace can augment or change most of these built-in features. For a more in-depth guide on how these features work and can be configured, see Working with JavaScript.

IntelliSense

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

Sorry, your browser doesn’t support HTML 5 video.

VS Code provides IntelliSense within your JavaScript projects; for many npm libraries such as React , lodash , and express ; and for other platforms such as node , serverless, or IoT.

See Working with JavaScript for information about VS Code’s JavaScript IntelliSense, how to configure it, and help troubleshooting common IntelliSense problems.

JavaScript projects (jsconfig.json)

A jsconfig.json file defines a JavaScript project in VS Code. While jsconfig.json files are not required, you will want to create one in cases such as:

  • If not all JavaScript files in your workspace should be considered part of a single JavaScript project. jsconfig.json files let you exclude some files from showing up in IntelliSense.
  • To ensure that a subset of JavaScript files in your workspace is treated as a single project. This is useful if you are working with legacy code that uses implicit globals dependencies instead of imports for dependencies.
  • If your workspace contains more than one project context, such as front-end and back-end JavaScript code. For multi-project workspaces, create a jsconfig.json at the root folder of each project.
  • You are using the TypeScript compiler to down-level compile JavaScript source code.

To define a basic JavaScript project, add a jsconfig.json at the root of your workspace:

 "compilerOptions":  "module": "commonjs", "target": "es6"  >, "exclude": ["node_modules"] > 

See Working with JavaScript for more advanced jsconfig.json configuration.

Tip: To check if a JavaScript file is part of JavaScript project, just open the file in VS Code and run the JavaScript: Go to Project Configuration command. This command opens the jsconfig.json that references the JavaScript file. A notification is shown if the file is not part of any jsconfig.json project.

Snippets

VS Code includes basic JavaScript snippets that are suggested as you type;

Sorry, your browser doesn’t support HTML 5 video.

There are many extensions that provide additional snippets, including snippets for popular frameworks such as Redux or Angular. You can even define your own snippets.

Tip: To disable snippets suggestions, set editor.snippetSuggestions to «none» in your settings file. The editor.snippetSuggestions setting also lets you change where snippets appear in the suggestions: at the top ( «top» ), at the bottom ( «bottom» ), or inlined ordered alphabetically ( «inline» ). The default is «inline» .

JSDoc support

VS Code understands many standard JSDoc annotations, and uses these annotations to provide rich IntelliSense. You can optionally even use the type information from JSDoc comments to type check your JavaScript.

Sorry, your browser doesn’t support HTML 5 video.

Quickly create JSDoc comments for functions by typing /** before the function declaration, and select the JSDoc comment snippet suggestion:

Sorry, your browser doesn’t support HTML 5 video.

To disable JSDoc comment suggestions, set «javascript.suggest.completeJSDocs»: false .

Hover Information

Hover over a JavaScript symbol to quickly see its type information and relevant documentation.

Hovering over a JavaScript variable to see its type information

The ⌘K ⌘I (Windows, Linux Ctrl+K Ctrl+I ) keyboard shortcut shows this hover information at the current cursor position.

Signature Help

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

Signature help for some DOM methods

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

Auto imports

Automatic imports speed up coding by suggesting available variables throughout your project and its dependencies. When you select one of these suggestions, VS Code automatically adds an import for it to the top of the file.

Just start typing to see suggestions for all available JavaScript symbols in your current project. Auto import suggestions show where they will be imported from:

Global symbols are shown in the suggestion list

If you choose one of these auto import suggestions, VS Code adds an import for it.

In this example, VS Code adds an import for Button from material-ui to the top of the file:

After selecting a symbol from a different file, an import is added for it automatically

To disable auto imports, set «javascript.suggest.autoImports» to false .

Tip: VS Code tries to infer the best import style to use. You can explicitly configure the preferred quote style and path style for imports added to your code with the javascript.preferences.quoteStyle and javascript.preferences.importModuleSpecifier settings.

Formatting

VS Code’s built-in JavaScript formatter provides basic code formatting with reasonable defaults.

The javascript.format.* settings configure the built-in formatter. Or, if the built-in formatter is getting in the way, set «javascript.format.enable» to false to disable it.

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

JSX and auto closing tags

All of VS Code’s JavaScript features also work with JSX:

JSX IntelliSense

You can use JSX syntax in both normal *.js files and in *.jsx files.

VS Code also includes JSX-specific features such as autoclosing of JSX tags:

Sorry, your browser doesn’t support HTML 5 video.

Set «javascript.autoClosingTags» to false to disable JSX tag closing.

Code navigation

Code navigation lets you quickly navigate JavaScript 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.

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 )

Rename

Press F2 to rename the symbol under the cursor across your JavaScript project:

Renaming a variable

Refactoring

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

JavaScript refactoring

Available refactorings include:

  • Extract to method or function.
  • Extract to constant.
  • Convert between named imports and namespace imports.
  • Move to new file.

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

Unused variables and unreachable code

Unused JavaScript code, such the else block of an if statement that is always true or an unreferenced import, is faded out in the editor:

Unreachable source code faded out

You can quickly remove this unused code by placing the cursor on it and triggering the Quick Fix command ( ⌘. (Windows, Linux Ctrl+. ) ) or clicking on the lightbulb.

To disable fading out of unused code, set «editor.showUnused» to false . You can also disable fading of unused code only in JavaScript by setting:

"[javascript]":  "editor.showUnused": false >, "[javascriptreact]":  "editor.showUnused": false >, 

Organize Imports

The Organize Imports Source Action sorts the imports in a JavaScript file and removes any unused imports:

Sorry, your browser doesn’t support HTML 5 video.

You can run Organize Imports from the Source Action context menu or with the ⇧⌥O (Windows, Linux Shift+Alt+O ) keyboard shortcut.

Organize imports can also be done automatically when you save a JavaScript file by setting:

"editor.codeActionsOnSave":  "source.organizeImports": true > 

Code Actions on Save

The editor.codeActionsOnSave setting lets you configure a set of Code Actions that are run when a file is saved. For example, you can enable organize imports on save by setting:

// On save, run both fixAll and organizeImports source actions "editor.codeActionsOnSave":  "source.fixAll": true, "source.organizeImports": true, > 

You can also set editor.codeActionsOnSave to an array of Code Actions to execute in order.

Here are some source actions:

  • «organizeImports» — Enables organize imports on save.
  • «fixAll» — Auto Fix on Save computes all possible fixes in one round (for all providers including ESLint).
  • «fixAll.eslint» — Auto Fix only for ESLint.
  • «addMissingImports» — Adds all missing imports on save.

See Node.js/JavaScript for more information.

Code suggestions

VS Code automatically suggests some common code simplifications such as converting a chain of .then calls on a promise to use async and await

Sorry, your browser doesn’t support HTML 5 video.

Set «javascript.suggestionActions.enabled» to false to disable suggestions.

Enhance completions with AI

GitHub Copilot is an AI-powered code completion tool that helps you write code faster and smarter. You can use the GitHub Copilot extension in VS Code to generate code, or to learn from the code it generates.

GitHub Copilot extension in the VS Code Marketplace

GitHub Copilot provides suggestions for numerous languages and a wide variety of frameworks, and it works especially well for Python, JavaScript, TypeScript, Ruby, Go, C# and C++.

You can learn more about how to get started with Copilot in the Copilot documentation.

Once you have the Copilot extension installed and enabled, you can test it our for your JavaScript projects.

Create a new file — you can use the File: New File command in the Command Palette ( F1 ).

In the JavaScript file, type the following function header:

function calculateDaysBetweenDates(begin, end)  

Copilot will provide a suggestion like the following — use Tab to accept the suggestion:

Copilot JavaScript ghost text suggestion

Inlay hints

Inlay hints add additional inline information to source code to help you understand what the code does.

Parameter name inlay hints show the names of parameters in function calls:

Parameter name inlay hints

This can help you understand the meaning of each argument at a glance, which is especially helpful for functions that take Boolean flags or have parameters that are easy to mix up.

To enable parameter name hints, set javascript.inlayHints.parameterNames . There are three possible values:

  • none — Disable parameter inlay hints.
  • literals — Only show inlay hints for literals (string, number, Boolean).
  • all — Show inlay hints for all arguments.

Variable type inlay hints show the types of variables that don’t have explicit type annotations.

Variable type inlay hints

Property type inlay hints show the type of class properties that don’t have an explicit type annotation.

Property type inlay hints

Parameter type hints show the types of implicitly typed parameters.

Parameter type inlay hints

Return type inlay hints show the return types of functions that don’t have an explicit type annotation.

Return type inlay hints

References CodeLens

The JavaScript references CodeLens displays an inline count of reference for classes, methods, properties, and exported objects:

JavaScript references CodeLens

To enable the references CodeLens, set «javascript.referencesCodeLens.enabled» to true .

Click on the reference count to quickly browse a list of references:

JavaScript references CodeLens peek

Update imports on file move

When you move or rename a file that is imported by other files in your JavaScript project, VS Code can automatically update all import paths that reference the moved file:

Sorry, your browser doesn’t support HTML 5 video.

The javascript.updateImportsOnFileMove.enabled setting controls this behavior. Valid settings values are:

  • «prompt» — The default. Asks if paths should be updated for each file move.
  • «always» — Always automatically update paths.
  • «never» — Do not update paths automatically and do not prompt.

Linters

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

Tip: This list is dynamically queried from the VS Code Marketplace. Read the description and reviews to decide if the extension is right for you.

Type checking

You can leverage some of TypeScript’s advanced type checking and error reporting functionality in regular JavaScript files too. This is a great way to catch common programming mistakes. These type checks also enable some exciting Quick Fixes for JavaScript, including Add missing import and Add missing property.

TypeScript tried to infer types in .js files the same way it does in .ts files. When types cannot be inferred, they can be specified explicitly with JSDoc comments. You can read more about how TypeScript uses JSDoc for JavaScript type checking in Working with JavaScript.

Type checking of JavaScript is optional and opt-in. Existing JavaScript validation tools such as ESLint can be used alongside built-in type checking functionality.

Debugging

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

Debug client side

You can debug your client-side code using a browser debugger such as our built-in debugger for Edge and Chrome, 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.

Popular extensions

VS Code ships with excellent support for JavaScript but you can additionally install debuggers, snippets, linters, and other JavaScript tools through extensions.

Tip: The extensions shown above are dynamically queried. 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

Read on to find out about:

  • Working with JavaScript — More detailed information about VS Code’s JavaScript support and how to troubleshoot common issues.
  • jsconfig.json — Detailed description of the jsconfig.json project file.
  • IntelliSense — Learn more about IntelliSense and how to use it effectively for your language.
  • Debugging — Learn how to set up debugging for your application.
  • Node.js — A walkthrough to create an Express Node.js application.
  • TypeScript — VS Code has great support for TypeScript, which brings structure and strong typing to your JavaScript code.

Common questions

Does VS Code support JSX and React Native?

VS Code supports JSX and React Native. You will get IntelliSense for React/JSX and React Native from automatically downloaded type declaration (typings) files from the npmjs type declaration file repository. Additionally, you can install the popular React Native extension from the Marketplace.

To enable ES6 import statements for React Native, you need to set the allowSyntheticDefaultImports compiler option to true . This tells the compiler to create synthetic default members and you get IntelliSense. React Native uses Babel behind the scenes to create the proper run-time code with default members. If you also want to do debugging of React Native code, you can install the React Native Extension.

Does VS Code support the Dart programming language and the Flutter framework?

Yes, there are VS Code extensions for both Dart and Flutter development. You can learn more at the Flutter.dev documentation.

IntelliSense is not working for external libraries

Automatic Type Acquisition works for dependencies downloaded by npm (specified in package.json ), Bower (specified in bower.json ), and for many of the most common libraries listed in your folder structure (for example jquery-3.1.1.min.js ).

ES6 Style imports are not working.

When you want to use ES6 style imports but some type declaration (typings) files do not yet use ES6 style exports, then set the TypeScript compiler option allowSyntheticDefaultImports to true.

 "compilerOptions":  "module": "commonjs", "target": "es6", // This is the line you want to add "allowSyntheticDefaultImports": true  >, "exclude": ["node_modules", "**/node_modules/*"] > 

Can I debug minified/uglified JavaScript?

Yes, you can. You can see this working using JavaScript source maps in the Node.js Debugging topic.

How do I disable Syntax Validation when using non-ES6 constructs?

Some users want to use syntax constructs like the proposed pipeline ( |> ) operator. However, these are currently not supported by VS Code’s JavaScript language service and are flagged as errors. For users who still want to use these future features, we provide the javascript.validate.enable setting.

With javascript.validate.enable: false , you disable all built-in syntax checking. If you do this, we recommend that you use a linter like ESLint to validate your source code.

Can I use other JavaScript tools like Flow?

Yes, but some of Flow’s language features such as type and error checking may interfere with VS Code’s built-in JavaScript support. To learn how to disable VS Code’s built-in JavaScript support, see Disable JavaScript support.

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

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