Visual Studio Code - Обзор редактора, возможности, настройка и сниппеты. Visual Studio Code - Обзор редактора, возможности, настройка и сниппеты Используемые мной Extensions

Всем привет, дорогие друзья! Компания Microsoft за все свое долгое время существования выпустили немало различных сред и инструментов разработки. Весной 2015 года компания порадовала многих разработчиков и представила новый продукт под названием Visual Studio Code .

Класснуть

Запинить

Не смотря на то, что инструмент был выпущен уже относительно давно, я не решался делать на него обзор по одной простой причине - во первых банально не было времени и те инструменты, которыми пользуюсь меня устраивали вполне. Я не очень люблю делать обзоры различных сред разработки IDE и прочих подобных инструментов потому, что это всего-лишь инструменты, а на канале у нас преимущественно практические уроки. Однако Visual Studio Code заинтересовал меня довольно давно, я следил за развитием редактора, пробовал различные версии в реальной работе и уже успел выполнить несколько проектов с использованием этого инструмента.

Сегодня мы рассмотрим данный редактор с точки зрения использования во фронтенде (ведь Visual Studio Code имеет богатый функционал не только для фронтенда, но и тесно интегрирован с другими инструментами Microsoft).

В первую очередь хочется отметить, что данный редактор работает под управлением всех популярных операционных систем, таких, как Linux, MacOS и Windows и кроме того, он бесплатен.

Этот урок пригодится вам если вы уже пользовались другими редакторами, например, Atom, Sulime Text или Brackets и хотите попробовать что-то новое, изучить возможности нового инструмента и даже взять его в свой боевой арсенал на постоянной основе. Также рекомендую вам ознакомиться с ним если вы только начинаете изучать веб-разработки и не можете определиться с выбором редактора на первых порах. Visual Studio Code удовлетворит ваши потребности в любом случае. Здесь есть если не всё, то многое. А если чего-то нет, то функционал редактора можно легко расширить с помощью дополнений (EXTENSIONS).

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

Дополнительные материалы и полезные ссылки:

Используемые мной Extensions:

Apache Conf - подсветка синтаксиста для файлов конфигурации Apache;
Gist Extension - создание, открытие и редактирование Гистов;
Sass - поддержка и подсветка Sass-синтаксиса, автокомплит стилей;
Twig - подсветка систаксиста PHP шаблонизатора Twig (пригодится при работе с OpenCart);

Пресет моих настроек Visual Studio Code:

{ "git.ignoreMissingGitWarning": true, "workbench.startupEditor": "newUntitledFile", "terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\bash.exe", "workbench.statusBar.feedback.visible": false, "window.menuBarVisibility": "toggle", "workbench.statusBar.visible": false, "workbench.activityBar.visible": false, "editor.minimap.enabled": false, "files.defaultLanguage": "html", "editor.fontSize": 16, "editor.tabSize": 2, "workbench.editor.tabSizing": "shrink", "editor.detectIndentation": false, "editor.insertSpaces": false, "editor.folding": false, "editor.glyphMargin": false, "editor.smoothScrolling": true, "emmet.triggerExpansionOnTab": true, "editor.quickSuggestions": { "other": false, "comments": false, "strings": false }, "editor.suggestOnTriggerCharacters": false, "editor.parameterHints": false, "editor.hover": false, "terminal.integrated.fontSize": 15, "editor.renderWhitespace": "boundary" }

Отключить всплывающие подсказки в Visual Studio Code:
Надоедливые всплывающие подсказки можно отключить незадокументированным параметром:
"editor.hover": false, После перезагрузки редактора, всплывающие окна при наведении пропадут.

Как только кому-нибудь приходит в голову мысль заняться программированием, первый вопрос который задаёт новичок – «Какой компилятор использовать для создания программы?» . Бывалые проектировщики и кодеры знают, что вопрос поставлен не корректно, так как компиляторов великое множество и выбрать можно любой.

Однако такие программы как Visual Studio не предлагаются бесплатно, так как они представляют собой среду разработки, в одной программе собраны: текстовый редактор с подсветкой , готовое дерево проекта, компилятор, отладчик и многие другие профессиональные инструменты.

Дерево проекта

Нет денег на покупку, а учиться надо!

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

Исправление ошибок

Суть такова, что его может скачать любой пользователь имеющий рабочую почту здесь: при регистрации потребуется указать email , чтобы на него пришло письмо с активацией аккаунта. Там же находится ссылка для загрузки приложения.

Visual Studio Express отличается от стандартной среды разработки тем, что в нём нет некоторых профессиональных библиотек, которые используются для создания серьёзных проектов. Тем не менее, все необходимые инструменты для создания и компиляции исходного кода есть: новичку первое время, больше ничего не понадобиться.

Графики

Как создать проект?

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

На стартовой странице найти строку «Новый проект» и кликнуть – программа автоматически начнёт создавать проект. В открывшемся окне нужно будет указать название проекта, место где будет храниться на компьютере, а также расширение файла (если это язык С++, указываем cpp ).

Тёмный интерфейс

Второй вариант-создать проект из выпадающего списка меню: Файл-Новый проект. Далее, также откроется виртуальный помощник, который подскажет какие параметры необходимо указать для создания.

Третий способ, самый быстрый и профессиональный: сгенерировать проект с помощью кнопок CRLT +Shift +N .

В итоге откроется текстовый редактор, где можно будет написать элементарный код:

#include

int main (){}

Чтобы активизировать компилятор нужно нажать зелёную кнопку на верхней панели приложения, но если Вы хотите посмотреть сообщение в консоли, лучше нажать сочетания клавиш: Сtrl +F 5.

Создание демонстрационных проектов

Visual Studio используют не только в разработке программных продуктов: если требуется сделать презентацию или обучающий экскурс есть инструменты для создания графиков, таблиц. Визуальные средства не ограничены двухмерным изображением, создание цветных графиков 3D буквально гипнотизирует слушателей.

Вывод

Visual Studio – высокоуровневая среда разработки, которая подойдёт не только профессиональным программистам, но и начинающим кодерам. В платной версии есть возможность работать без покупки целый месяц, это тестовый период, для ознакомления. Купить и загрузить среду можно на официальной странице проекта .

Вы, наверное, уже знаете, что компания Microsoft выпустила новую версию среды программирования Visual Studio 2015 , и сегодня, как я и обещал, мы подробно рассмотрим данную среду в редакции Community , а также установим ее на операционную систему Windows 7.

Примечание! Если Вы впервые слышите о том, что уже существует 2015 версия Visual Studio, то можете сначала ознакомиться с материалом «Visual Studio 2015 – новая версия среды разработки от компании Microsoft ».

Visual Studio 2015 Community

Visual Studio 2015 Community – это бесплатная, интегрированная среда разработки для создания приложений для Windows, Android и iOS, а также web-приложений.

В Visual Studio 2015 Community в отличие от предыдущего поколения бесплатных редакций Visual Studio Express весь функционал, все возможности находятся в одном месте, напомню, что Express версии существовали в трех выпусках это: для Desktop, для Web и для Windows. Мы с Вами рассматривали выпуски Visual Studio Express 2013 для Windows Desktop и Visual Studio Express 2013 для Web .

Как я уже сказал Visual Studio 2015 Community это бесплатная среда разработки, и она может быть использована индивидуальными разработчиками для создания собственных приложений, а также для проектов с открытым кодом, научных исследований и образования (полные «Условия лицензионного соглашения » ).

Visual Studio 2015 Community позволяет разрабатывать программы с использованием следующих языков программирования: C++, C#, Visual Basic, F#, JavaScript, TypeScript, Python.

Системные требования Visual Studio 2015 Community

Поддерживаемые операционные системы:

Windows 7 с пакетом обновления 1;
Windows 8;
Windows 8.1;
Windows Server 2008 R2 с пакетом обновления 1 (SP1);
Windows Server 2012: ;
Windows Server 2012 R2;
Windows 10.

Требования к оборудованию:

Процессор с частотой 1.6 ГГц (или выше);
1 Гб оперативной памяти (1,5 ГБ при работе на виртуальной машине);
6 Гб свободного пространства на жестком диске;
Жесткий диск (5400 об/мин);
Видеоадаптер с поддержкой DirectX 9, минимально допустимое разрешение экрана — 1024 x 768.

Где скачать Visual Studio 2015 Community?

Загрузить 2015 версию Visual Studio в редакции Community можно, конечно же, с официального сайта, вот страница загрузки .

После того как перешли на страницу жмем «Скачайте Community 2015 »

В итоге у Вас загрузится установщик vs_community.exe .

Установка Visual Studio 2015 Community

Примечание! Как я уже сказал, установку я буду производить на операционную систему Windows 7.

Для установки Visual Studio 2015 Community запускаем файл vs_community.exe, также для установки нам нужно будет подключение к Интернету.

После запуска на некоторое время появится заставка Visual Studio

Затем откроется программа установки, но если в процессе запуска программа установки обнаружит какие-либо факторы, которые могут повлиять на ход установки Visual Studio, она Вам об этом сообщит.

Здесь нам предлагают выбрать «Тип установки », я выбираю «Стандартный », но если Вы не планируете использовать какой-либо функционал в Visual Studio 2015 Community, то можете выбрать тип «Выборочная » где Вы вручную укажете, что конкретно будите использовать. А я жму «Установить » и у меня сразу начнется процесс установки.

Данный процесс займет примерно минут 30-40 и в завершение появится окно, в котором мы нажимаем «Перезагрузить сейчас »

После того как компьютер перезагрузится, можно запускать Visual Studio (Пуск->Все программы->Visual Studio 2015 )

И при первом запуске нам предлагают выполнить вход в Visual Studio, для того чтобы синхронизировать параметры при подключении с разных компьютеров (более подробную информацию можно получить, перейдя по ссылке «Подробнее» ). Но это не обязательно можно нажать «Не сейчас! Возможно, позже » я так и поступаю.