что такое визуал студио код
Обзор Visual Studio Code
Visual Studio Code — бесплатный и очень популярный редактор кода от Microsoft.
Редактор поможет в работе веб-разработчикам и верстальщикам всех уровней. С одной стороны он подходит новичкам, потому что его интерфейс интуитивно прост и понятен. С другой стороны в VS Code встроены много возможностей, которые интересны опытным разработчикам.
Полезные материалы
Первый запуск
При запуске редактора в первый раз открывается стартовая страница, на которой описаны все возможности редактора. Все ссылки интерактивные и открывают нужную часть интерфейса или страницу в браузере.
Редактор поддерживает множество языков программирования и легко настраивается под пользователя. Можно установить различные сочетания клавиш и цветовые схемы.
Посмотрим интерфейс редактора на примере одного из проектов.
Основную часть экрана занимает окно с текстовым содержимым файла. В левой части экрана находятся вкладки активного меню, в котором находятся главные функции редактора. Вкладка проводника открывается по умолчанию при запуске программы. В неё выводятся список открытых файлов и каталог открытой папки.
Поиск
Следующий пункт — поиск. В поле можно ввести искомое значение, и редактор покажет, в каких местах оно находится. При желании можно поменять значение через поле замены.
VS Code из коробки поддерживает работу с системой контроля версий Git. Можно выполнить базовые операции и посмотреть, как изменились файлы с момента последнего коммита.
Настройка Git в Visual Studio Code подробна описана в официальной документации.
Отладчик
VS Code отличает от конкурентов наличие встроенного отладчика. После небольшой настройки можно искать баги в коде прямо из редактора — например, поставить точку остановки и наблюдать за выполнением конкретного участка кода. Помимо этого у редактора есть встроенная консоль, в которую может выводиться результат работы или сообщение об ошибке, если что-то пошло не так. Отладчик можно настроить под разные языки и разные задачи.
Расширения
Последний пункт активного меню позволяет устанавливать расширения. В VS Code есть расширения для большинства языков программирования. Верстальщики тоже не обделены — например, мы собрали подборку из 9 полезных плагинов VS Code.
Главное меню
File. В пункте File находятся команды, которые отвечают за работу с файлами рабочей папки. Через неё можно сохранять и открывать файлы, выбирать папки и выполнять другие действия.
Edit. Через этот пункт можно работать с открытым файлом — отменять последние действия, производить поиск по файлу.
Selection. В пункте Selection можно найти команды для выделения нужного участка кода.
View. Открывать различные приложения, встроенные в редактор кода, можно через пункт View. Здесь дублируются пункты активного меню, а ещё здесь можно открыть терминал, настроить элементы интерфейса и другое.
Go. Через пункт Go можно перемещаться между открытыми файлами и по документу. Также можно разделять рабочую область на части. Это удобно для работы на большом мониторе — можно держать в одном месте разметку и файлы стилей.
Debug. Здесь собраны команды для отладки скриптов.
Terminal. В редактор встроен терминал (он же командная строка). Он может выполнять как отдельные задачи, так и выводить командную строку в интерфейс редактора.
Help. В этом пункте собраны справочные материалы по работе редактора, его основным функциями и общая информация о программе.
VS Code используется разработчиками в компаниях разного размера, а также очень удобен при обучении на профессиональных курсах в HTML Academy. В нём есть все функции, с помощью которых можно написать, протестировать и успешно защитить выпускной проект.
VS Code — инструмент фронтендера
Пройдите обучение в HTML Academy, чтобы работать с редактором кода и другими инструментами как профессионал.
Visual Studio Code — эволюция кроссплатформенного редактора кода на примере версии для OS X
Visual Studio Code — редактор кода, с поддержкой более 30 языков программирования и форматов файлов, а так же обладающий рядом дополнительных, полезных возможностей.
Инструмент вышел весной этого года, и ранее мы уже успели рассказать о базовых возможностях этого кроссплатформенного редактора. Напомню, что использовать VS Code можно на компьютерах под управлением Windows, OS X и Linux.
Однако, за полгода существования инструмент регулярно обновлялся и продолжает обновляться раз в месяц, расширяя свой функционал, список поддерживаемых языков, постоянно улучшая существующие возможности, основываясь на отзывах и пожеланиях пользователей.
Сегодня мы поделимся обзором следующих возможностей Visual Studio Code на примере использования в OS X: интеграция с Unity3D, Visual Studio Online, GitHub, а так же подробными видео-материалами по установке, настройке и комфортной работе с VS Code на Mac.
Чтобы установить Visual Studio Code на свой компьютер необходимо скачать дистрибутив на официальном сайте code.visualstudio.com
Полный список поддерживаемых языков на текущий момент:
Если вы используете Node.js для запуска JavaScript или TypeScript приложений, то Visual Studio Code поддерживает отладчик.
Отладчик так же поддерживается для приложений, которые запускаются на Mono, это ASP.NET 5.0 и Unity3D приложения. Таким образом в VS Code можно разрабатывать современные Web приложения, имея доступ ко всем возможностям, начиная от поддержки IntelliSense и заканчивая отладчиком.
Системы контроля версий
Интеграция с Git
Visual Studio Code поддерживает локальное и удаленное Git хранилища. Как только Git утилита будет установлена, Visual Studio Code необходимо перезапустить и инициализировать Git для текущего рабочего пространства:
Начиная с этого момента с Git можно работать локально. Переключившись на Git окно можно увидеть все измененные файлы и сравнить их содержимое с предыдущими версиями:
VS Code так же позволяет работать с различными ветвями проекта:
Visual Studio Online
Для полноценного использования платформы Git может потребоваться сторонний провайдер. В этой статье рассмотрим GitHub и Visual Studio Online. Если необходимо опубликовать проект с открытым исходным кодом — используйте GitHub, но если код должен быть закрыт от внешнего мира, то нужно будет приобрести подписку.
Visual Studio Online не поддерживает проекты с открытым кодом, но позволяет создавать закрытые проекты и если ваша команда состоит из 5 и менее разработчиков, то использование Visual Studio Online будет бесплатным. При этом, нужно отметить, что система контроля версий, это всего лишь одна из возможностей Visual Studio Online, вместе с тем можно использовать много других возможностей, таких, как утилиты планирования, Kanban доска, виртуальная комната для команды и др. Таким образом, VS Code и VS Online способны обеспечить полную поддержку цикла разработки программного обеспечения.
Для начала работы с Visual Studio Online необходимо зарегистрировать свой аккаунт. После чего можно приступать к созданию нового проекта. Под проектом понимается все рабочее пространство, которое создается внутри Visual Studio Online с возможностью хранить документы, исходный код всех проектов, входящих в решение и тд.
Как только все настройки завершены, нужно получить ссылку на хранилище Git. Для этого перейдем в созданный проект и откройте вкладку Code, где можно скопировать ссылку.
Если Git устанавливался, как часть утилит командной строки XCode, то все необходимые файлы уже есть на Mac и нужно просто выполнить команду: git config —global credential.helper osxkeychain
GitHub
Перейдем на основную страницу проекта и скопируем ссылку, которую необходимо использовать для клонирования содержимого. Воспользуемся терминалом, чтобы выполнить процесс инициализации. Сделать это можно из VS Code, используя контекстное меню или окно Command Palette:
Как и в случае в Visual Studio Online Git можно ассоциировать с выбранным именем: git config —global user.name xxxxx
И теперь проект можно клонировать в выбранный каталог: git clone https:// github.com/xxxxx/testVSCode.git
Команда клонирования создаст на диске новый каталог со всеми исходными файлами внутри и, используя VS Code, откроем полученный каталог.
Unity 3D
Unity3D является популярной средой разработки игр, но на OS X в качестве средства для редактирования кода на C# и JavaScript используется MonoDevelop. Продемонстрируем процесс на C# проекте.
Сразу после этого можно любой C# файл открыть в Code. Обратим внимание, что открыт только файл и, Code все еще не содержит никакой информации о проекте, поэтому множество возможностей по прежнему отключены.
Откроем проект. В зависимости от версии Unity, проектные файлы могут быть не созданы по умолчанию, поэтому можно воспользоваться пунктом меню Open C# Project. В результате выполнения этой команды, в каталоге проекта можно найти sln и csproj файлы:
Эти форматы поддерживаются Visual Studio Code, поэтому можно открыть каталог.
Unity работает с несколькими проектами, которые используются для сборки игры на различных этапах, но чтобы открыть только один из них воспользуемся строкой состояния и нажмем pick a project:
Visual Studio Code отобразит всплывающее окно, где можно выбрать проект. В этом случае нужен проект с суффиксом csharp:
Visual Studio Code использует OmniSharp компилятор, который требует последнюю версию mono, поэтому для избежания ошибок установим последнюю версию mono c сайта mono-project.com.Как только все установлено, Visual Studio Code требуется перезапустить и снова открыть C# файл.
Теперь IntelliSense система работает правильно, и можно продолжать работу в Code:
Отладка
Visual Studio Code поддерживает отладку для node.js проектов и для проектов на mono. Продемонстрируем возможности отладчика на примере интеграции Unity и Visual Studio Code, поскольку Unity использует Mono.
Чтобы активировать отладку в Code необходимо создать файл launch.json и внести туда настройки отладчика. Переходи в окно Debug и нажимаем кнопку Settings, чтобы активировать создание launch.json:
Удаляем из созданного файла весь код для работы с node.js, и добавим следующий:
Если используется Unity plugin, то небходимо проверить, что опция Write Launch File установлена:
Если опция установлена, то необходимо запустить приложение в Unity плейере и launch.json будет создан автоматически.
Для запуска отладчика перейходим в окно Debug и нажимаем Start. Сразу после этого можно перейти в Unity и запустить игру в плейере. Если все хорошо, то можно увидеть работу отладчика:
Отладчик обладает всеми необходимыми атрибутами, характерными для профессиональных инструментов: Breakpoints, Call Stack, Watch, Variables, Debug Action Panel, Debug Console.
Задачи
В контексте Visual Studio Code можно выполнить любую команду командной строки и просмотреть результаты работы прямо из среды разработки. Таким образом можно использовать внешние компиляторы, отладчики, средства тестирования и тд.
Открыв Command Palette и набрав Run Task, Вы можете увидеть, что Code распознал все задачи в конфигурационном файле для grunt и их можно запустить. В результате работы задачи, можно увидеть новый JavaScript файл со всем исходным кодом внутри, преобразованным по алгоритму. При этом, результаты работы будут отображаться в окне Output, что позволит вовремя обнаружить проблему.
Visual Studio Code поддерживает специальные расширения, которые позволяют обрабатывать данные из output окна и преобразовывать их в форматированные сообщения, отображающиеся в списке ошибок.
Azure
Прямой интеграции Visual Studio Code c Azure не предусмотрено. Но существует способ, который облегчает процесс развертывания веб-сайтов из Code в Azure.
Для этого необходимо завести учетную запись Azure, открыть панель управления и создать новое веб-приложение, используя шаблон Web App, благодаря которому в течении нескольких секунд можно создать хостинг пространство для будущего сайта и разместить его там.
Как только инфраструктура создана можно перейти к настройкам. В данном сценарии — Continuous deployment:
Отсюда, видно, что Azure поддерживает возможность развертывания решений из различного типа хранилищ. Именно с помощью интеграции с хранилищами GitHub и Visual Studio Online, описанных ранее, можно связать между собой Code и Azure. Таким образом, получая возможность продолжать выполнять удаленное развертывание кода прямо из интерфейса редактора Visual Studio Code.
Заключение
Visual Studio Code позволяет реализовать различные сценарии работы и выходит за рамки обычного редактора кода. Описанные сценарии охватывают только часть возможных сценариев, подробнее описанных на странице официальной документации.
Так же, мы с удовольствием делимся с вами видео-материалами, включающими в себя пошаговые инструкции по установке, настройке и работе с инструментом Visual Studio Code на Mac:
Visual Studio Code: мощное руководство пользователя
Эта статья написана для начинающих пользователей, которые могут впервые использовать Visual Studio Code. VS Code, как известно, считается «легковесным» редактором кода. По сравнению с редакторами с полной интегрированной средой разработки (IDE), которые занимают гигабайты дискового пространства, VS Code использует менее 200 МБ при установке.
Несмотря на термин «легкий», Visual Studio Code предлагает огромное количество функций, которые продолжают расти и улучшаться с каждым новым обновлением. В этом руководстве мы рассмотрим наиболее популярные функции. У каждого программиста есть свой собственный набор инструментов, который они обновляют всякий раз, когда обнаруживаются новые рабочие процессы. Если вы хотите изучить каждый инструмент и функцию VS Code, ознакомьтесь с их официальной документацией. Кроме того, вы можете отслеживать обновления для новых и улучшенных функций.
Предпосылки
Чтобы следовать этому руководству, вы должны владеть хотя бы одним языком программирования и фреймворком. Вы также должны быть знакомы с системой контроля версией git. Вам также необходимо иметь учетную запись на платформе удаленного хранилища, такой как GitHub. Я рекомендую вам настроить SSH Keys для подключения к вашему удаленному репозиторию.
Мы будем использовать минимальный проект Next.js для демонстрации возможностей VS Code. Если вы новичок в этом, не беспокойтесь, так как фреймворк и используемый язык не являются предметом данного руководства. Преподаваемые здесь навыки можно перенести на любой язык и фреймворк, с которыми вы работаете.
Немного истории
Как только вы привыкли к лучшему опыту написания кода, пришло время обновиться. Не так давно это были полностью интегрированные среды разработки:
Эти платформы обеспечивают полный рабочий процесс разработки, от написания кода до тестирования и развертывания. Они содержат множество полезных функций, таких как анализ кода и выделение ошибок. Они также содержат гораздо больше функций, которые многие разработчики не использовали, хотя они были необходимы для некоторых команд. В результате эти платформы заняли много места на диске и не запустились. Многие разработчики предпочитали использовать передовые текстовые редакторы, такие как emacs и vim, для написания своего кода.
Вскоре появился новый набор независимых от платформы редакторов кода. Они были легкими и обеспечивали множество функций, которые были в основном эксклюзивными для IDE. Я перечислил их ниже в порядке их выпуска:
Достаточно истории и статистики на данный момент. Давайте углубимся в то, как использовать функции кода Visual Studio.
Настройка и обновления
Установщик пакета кода Visual Studio занимает менее 100 МБ и потребляет менее 200 МБ при полной установке. Когда вы посещаете страницу загрузки, ваша ОС будет автоматически обнаружена, и будет выделена правильная ссылка для загрузки.
Обновление VS Code очень просто. Он отображает уведомление при каждом выпуске обновления. Пользователям Windows необходимо щелкнуть уведомление, чтобы загрузить и установить последнюю версию. Процесс загрузки происходит в фоновом режиме, пока вы работаете. Когда он будет готов к установке, появится запрос на перезагрузку. Нажав на это, вы установите обновление и перезапустите VS Code.
Пользовательский интерфейс
Давайте сначала познакомимся с пользовательским интерфейсом:
Пользовательский интерфейс Visual Studio Code разделен на пять основных областей, которые вы можете легко настроить.
Также есть верхняя строка меню, где вы можете получить доступ к системе меню редактора. Для пользователей Linux встроенным терминалом по умолчанию, вероятно, будет оболочка Bash. Для пользователей Windows это PowerShell. К счастью, внутри выпадающего списка терминала находится селектор оболочки, который позволит вам выбрать другую оболочку. Если установлено, вы можете выбрать любой из следующих:
Работа с проектами
В отличие от полноценных IDE, Visual Studio Code не обеспечивает создание проектов и не предлагает шаблоны проектов традиционным способом. Он просто работает с папками. На моей машине для разработки Linux я использую следующий шаблон папок для хранения и управления своими проектами:
Если вы хотите создать новый проект и открыть его в VS Code, вы можете использовать следующие шаги. Откройте терминал и выполните следующие команды:
Вы также можете сделать это в проводнике. При доступе к контекстному меню мыши вы сможете открыть любую папку в VS Code.
Обратите внимание на все поля, которые были заполнены и выбраны. Далее перейдите в терминал и выполните следующее:
Как только редактор будет запущен, вы можете запустить встроенный терминал с помощью сочетания клавиш Ctrl+
(тильда). Используйте следующие команды для генерации package.json и установки пакетов:
Затем откройте package.json и замените раздел scripts следующим:
Окно кода Visual Studio должно выглядеть следующим образом:
Контроль версий с помощью Git
Visual Studio Code поставляется со встроенным менеджером контроля версий Git. Он предоставляет пользовательский интерфейс, где вы можете комментировать, фиксировать, создавать новые ветви и переключаться на существующие. Давайте передадим изменения, которые мы только что сделали в нашем проекте. На панели действий откройте панель управления источником и найдите кнопку «Stage All Changes plus», как показано ниже.
Чтобы создать новую ветку или переключиться на существующую ветку, просто нажмите на название ветки master в строке состояния в левом нижнем углу. Это выведет филиальную панель для вас, чтобы принять меры.
Проверьте следующие расширения для еще лучшего опыта работы с Git:
Поддержка другого типа SCM, такого как SVN, может быть добавлена путем установки соответствующего расширения SCM с рынка.
Создание и запуск кода
Настройки пользователя и рабочей области
По умолчанию должен появиться графический интерфейс редактора настроек. Это помогает пользователям легко вносить изменения в настройки, поскольку доступны тысячи редактируемых настроек. Редактор настроек предоставляет пользователю понятные имена и описания, что делает каждый параметр. Кроме того, связанные параметры были сгруппированы вместе, и есть панель поиска для поиска определенного параметра.
Параметры кода Visual Studio подразделяются на две разные области:
В зависимости от вашей платформы вы можете найти пользовательские настройки VS Code в следующих местах:
Ассоциация языков
В следующий раз, когда вы откроете файл JS, он будет рассматриваться как файл React JSX. Я указал это в своих глобальных настройках, так как я часто работаю с проектами React. К сожалению, это нарушает встроенную функцию под названием Emmet. Это популярный плагин, который помогает разработчикам автоматически заполнять HTML и CSS код очень интуитивно понятным способом. Вы можете исправить эту проблему, добавив следующую конфигурацию в settings.json :
Горячие клавиши
До сих пор мы рассмотрели два сочетания клавиш:
Command Palette обеспечивает доступ ко всем функциям Visual Studio Code, включая сочетание клавиш для общих операций. Если вы устанавливаете расширение, любые действия, инициируемые вручную, будут перечислены здесь. Однако для таких расширений, как Prettier и Beautify, они будут использовать одну и ту же команду Format. Visual Studio Code также имеет свой собственный встроенный модуль форматирования. Чтобы указать, какой плагин должен выполнять действие, вам нужно перейти в редактор настроек и изменить конфигурацию стандартного форматера. Вот пример того, как я установил это в моем случае:
Вы также можете указать другой форматер для конкретного языкового режима. Вот еще несколько сочетаний клавиш, которые необходимо запомнить:
Вот мои любимые команды, которые я часто использую при написании кода:
Если вы зайдете в меню параметров, вы найдете горячие клавиши для большинства команд. Лично я никогда не привык к некоторым сочетаниям клавиш по умолчанию, которые поставляются с Visual Studio Code из-за использования таких редакторов, как Atom, в течение длительного времени. Решением, которое я нашел, было просто установить Atom Keymap. Это позволяет мне использовать сочетание клавиш Ctrl + \ для переключения боковой панели. Если вы хотите отредактировать привязки клавиатуры самостоятельно, просто перейдите в меню File > Preferences > Keyboard Shortcuts. (Code > Preferences > Keyboard Shortcuts в macOS).
Возможности редактора кода
В этом разделе мы быстро рассмотрим различные удобные для разработчика функции, которые предоставляет Visual Studio Code, чтобы помочь вам писать более быстрый и более понятный код.
Intellisense
Это популярная функция, также известная как «автозавершение кода» или автозаполнение. VS Code «из коробки» предоставляет Intellisense для:
Если вы работаете с языком, который не поддерживается сразу после установки, вы можете установить языковое расширение из marketplace, чтобы активировать IntelliSense для нужного языка программирования.
Снипеты
Есть много фрагментов, к которым вы можете получить доступ, если вы запомнили сокращение или ключевое слово, которое вызывает вставку фрагмента. Поскольку вы новичок в этом, вы можете получить доступ к списку всех фрагментов, доступных через Command Palette > Insert Snippets:
Прокрутите вверх и вниз, чтобы просмотреть весь список. Обратите внимание, что большинство фрагментов имеют табуляции, которые позволяют заменять соответствующие разделы кода при их вставке. Вы можете найти больше расширений фрагментов в marketplace. Вы также можете создать свой собственный.
Форматирование
Часто при наборе или вставке кода из разных источников мы склонны смешивать стили кодирования. Например:
Форматирование важно, так как делает код читаемым. Однако это может занять много времени, когда вы сталкиваетесь с большими разделами неформатированного кода. К счастью, Visual Studio Code может выполнить форматирование для вас с помощью одной команды. Вы можете выполнить команду форматирования через палитру команд. Visual Studio Code поддерживает форматирование для следующих языков из коробки:
Вы можете настроить форматирование кода Visual Studio, изменив следующие параметры на true или false :
Однако встроенные средства форматирования могут не соответствовать вашему стилю кодирования. Если вы работаете с такими фреймворками, как React, Vue или Angular, вы обнаружите, что встроенные средства форматирования имеют тенденцию портить ваш код. Вы можете исправить это, отключив форматирование для определенного языка:
После установки вам нужно установить его как форматировщик по умолчанию:
Также рекомендуется установить пакет prettier локально как зависимость dev:
Linting
Lint или ЛИНТЕР является инструментом, который анализирует код и проверяет на наличие синтаксических ошибок, проблем стилизации, вызовы на необъявленных переменных, использование устаревших функций, неправильного охвата и многие другие вопросы. Visual Studio Code не поставляется вместе с Linter. Тем не менее, это облегчает настройку для используемого вами языка программирования. Например, если вы работаете над новым проектом Python, вы получите приглашение установить его для вас. Вы также можете открыть панель команд ( Ctrl+ Shift+ P ) и выбрать команду Python: Select Linter.
Для JavaScript вам нужно установить расширение, такое как ESLint, которое является самым популярным. Это расширение требует, чтобы вы установили ESLint как dev-зависимость. Вам также может понадобиться один или несколько плагинов ESLint, которые помогут вам подобрать стиль и структуру кодирования, которые вы используете.
Отладка
Если вы используете операторы print для отладки, вы должны прекратить это делать, поскольку есть лучший способ отладки вашего кода. С VS Code вы можете устанавливать точки останова и проверять переменные во время работы вашего кода.