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

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

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

Поделиться
Твитнуть
Поделиться
Класснуть
Запинить
Visual Studio Code - Обзор редактора, возможности, настройка и сниппеты - Видеоурок
Смотреть урок на YouTube
Создание контентного сайта на Jekyll от А до Я

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

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

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

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

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

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

  • 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.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,
	"terminal.integrated.fontSize": 16,
	"editor.renderWhitespace": "boundary",
	"breadcrumbs.enabled": false
}

Отключить всплывающие подсказки в Visual Studio Code:

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

Премиум уроки от WebDesign Master

Курс по созданию сайта от А до Я на Jekyll

Создание сайта от А до Я. Комплексный курс

Курс по созданию интернет-магазина на OpenCart

Создание современного интернет-магазина от А до Я

Фриланс для начинающих

Я - фрилансер! Базовый курс для начинающих

Другие уроки по теме «Инструменты»

  • Gulp include на стороне сервера Browsersync + Build
  • OptimizedHTML 5: Важные обновления стартера для JS-разработки
  • Gulp 4 - Актуальное и исчерпывающее руководство для самых маленьких
  • Актуальный способ установки и настройки окружения Windows WSL 2 (Windows Subsystem for Linux)
  • PageSpeed Insights - Оптимизация (обновление)
  • October CMS - Первое знакомство

Разделы сайта:

  • Курсы
  • HTML и CSS
  • Веб-дизайн
  • Инструменты
  • Оффтоп
  • MODx
  • WordPress
  • jQuery
  • Адаптивный веб-дизайн
  • Создание иконок
  • Обработка изображений
  • Иллюстрации и Инфографика
  • Интерфейсы UI/UX
  • Прототипирование
  • JavaScript
  • Хостинг

Полезные ресурсы:

  • Lazy Load Placeholder
  • Документация Gulp 4
  • Рабочее место разработчика
2021 © WebDesign Master