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

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

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

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

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

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

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

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

• Официальная страница Visual Studio Code;
• GitHub Gist - Автоматизация повторного использования кода;

Используемые мной 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,

После перезагрузки редактора, всплывающие окна при наведении пропадут.