Всем привет, дорогие друзья! Компания 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.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
Другие уроки по теме «Инструменты»
- Gulp include на стороне сервера Browsersync + Build
- OptimizedHTML 5: Важные обновления стартера для JS-разработки
- Gulp 4 - Актуальное и исчерпывающее руководство для самых маленьких
- Актуальный способ установки и настройки окружения Windows WSL 2 (Windows Subsystem for Linux)
- PageSpeed Insights - Оптимизация (обновление)
- October CMS - Первое знакомство