8 мощных расширений кода Visual Studio для интерфейсных разработчиков

Хотя Microsoft выпустила первую стабильную версию Visual Studio Code, его мощный редактор кода всего несколько месяцев назад, Март 2016, у него уже есть много доступных расширений, которые могут поднять опыт кодирования на следующий уровень. Официальные расширения кода Visual Studio размещены в Visual Studio Code MarketplaceМногие из которых могут быть отличной помощью для веб-разработчиков.

В этом посте я протестировал несколько расширений VS Code, связанных с разработкой интерфейса, и составил список тех, которые я считаю наиболее интуитивно понятными, простыми в использовании и удобными. Это далеко не полный список. Потратьте время, чтобы просмотреть рынок самостоятельно и посмотреть, что еще он может предложить вам, тем более что многие замечательные расширения еще впереди.

Установить расширение довольно просто в Visual Studio Code, как вы можете сделать это в редакторе кода. В VS Code Marketplace каждое расширение имеет свою собственную страницу, и вы можете найти команду, с которой вы можете установить данное расширение, в верхней части этой страницы.

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Команда всегда начинается с термина ext. Чтобы установить расширение, просто нажмите CTRL + P внутри VS Code, чтобы запустить панель быстрого открытия, скопируйте и вставьте в нее эту команду и, наконец, перезапустите редактор кода, чтобы новое расширение заработало.

HTML фрагменты

Если вы хотите часто писать HTML в коде Visual Studio, HTML фрагменты Расширение может стать удобным инструментом, так как добавляет сложную поддержку HTML. Хотя VS Code имеет базовую поддержку HTML, такую как цветовая подсветка синтаксиса, расширение HTML Snippets знает гораздо больше.
Вероятно, наиболее полезная функция этого расширения заключается в том, что когда вы начинаете вводить имя тега HTML (без начальной угловой скобки), фрагменты HTML быстро отображают список доступных параметров с краткой информацией о каждом из них.
Якорный тег HTML-кода Когда вы щелкаете по нужному элементу, HTML Snippets добавляет полный тег HTML5 с его наиболее распространенными свойствами. Например, если вы хотите добавить ссылку (тег привязки) к вашему документу, просто введите a в VS Code, выберите правильную опцию во всплывающем окне, и фрагменты HTML вставят необходимые сниппет в ваш редактор без каких-либо хлопот.

Автор этого расширения также обращает внимание на удаление устаревших элементов, поэтому, если вы хотите использовать HTML-тег, который вы не можете найти во всплывающем списке, стоит проверить, действует ли он по-прежнему или нет.

HTML CSS Завершение Класса
HTML CSS Завершение Класса может быть полезным расширением, если вам нужно использовать много классов CSS в вашем проекте. Нам, разработчикам, часто случается так, что мы не совсем уверены в точном названии класса, но это просто пассивная мысль в качестве пассивного знания.

Это интеллектуальное расширение дает решение этой проблемы, поскольку оно выбирает имена всех классов CSS в текущей рабочей области и отображает список о них.
Допустим, вы хотите создать сайт с помощью Zurb Foundation и хотите использовать небольшую сетку. Вы не помните, как точно названы классы, но знаете, что у них есть семантические имена.

С помощью HTML CSS Class Completion вам нужно всего лишь начать набирать слово small, и на вашем экране сразу же появятся доступные опции, чтобы вы могли легко выбрать нужную вам.
Пример завершения класса HTML CSS

Посмотреть в браузере
Посмотреть в браузере это простое, но мощное расширение для кода Visual Studio. Это может облегчить разработку интерфейса, позволяя вам быстро просмотреть результаты своей работы в браузере во время кодирования. Вы можете открыть свой HTML-файл в браузере по умолчанию непосредственно из VS Code, нажав сочетание клавиш CTRL + F1.

Обратите внимание, что просмотр в браузере поддерживает только HTML, поэтому, если вы хотите увидеть свой сайт, вам нужно открыть файл HTML. Вы не можете напрямую обращаться к браузеру из файла CSS или JavaScript.

Отладчик для Chrome
Отладчик для Chrome был построен самой Microsoft, и в настоящее время это 4-е место по популярности Расширение кода Visual Studio.

Отладчик для Chrome позволяет отлаживать JavaScript в Google Chrome, не выходя из редактора кода. Это означает, что вам не нужно работать с переданным JavaScript, который видит браузер, но вы можете выполнить отладку прямо из исходных файлов. Видеть это демо чтобы увидеть, как это работает.
Расширение имеет все функции, которые нужны приличному отладчику, такие как установка точек останова, наблюдение за переменными, пошаговое выполнение, удобная консоль отладки и многие другие (см. список возможностей первого релиза).

Чтобы использовать это расширение, вам нужно запустить Chrome с включенной удаленной отладкой и настроить соответствующий файл launch.json. Последнее может занять некоторое время, но вы можете найти подробные инструкции на GitHub о том, как правильно это сделать.

JSHint
Visual Studio Code’s JSHint расширение объединяет популярные JSHint JavaScript линтер прямо в редакторе кода, чтобы вы могли получать информацию о своих ошибках, как только вы их фиксируете. По умолчанию расширение JSHint использует параметры по умолчанию для линтера, которые можно настроить с помощью конфигурационный файл,
Использование этого расширения довольно просто, так как JSHint помечает ошибки красным, а уведомления – зеленым подчеркиванием. Если вам нужна дополнительная информация о проблемах, просто наведите указатель мыши на подчеркнутые части, и JSHint сразу поместит метку с описанием проблемы.
Пример JSHint

Фрагменты кода jQuery
Фрагменты кода jQuery может значительно ускорить разработку интерфейса в коде Visual Studio, так как он позволяет быстро писать jQuery без основных синтаксических ошибок. У фрагментов кода jQuery в настоящее время есть около 130 доступных фрагментов, которые можно вызвать, набрав правый триггер,
Все фрагменты jQuery, кроме одного, начинаются с префикса jq. Единственным исключением является триггер func, который вставляет анонимную функцию в редактор.

Это удобное расширение удобно, когда вы не совсем уверены в правильности синтаксиса и хотите сэкономить время на проверке документации. Это также позволяет легко быстро просматривать доступные опции.
Пример JSHint

Беседка
Беседка Расширение VS Code может сделать ваш процесс веб-разработки более интуитивным, интегрируя Bower пакет менеджер в код Visual Studio.

Если вы используете это расширение, вам не нужно переключаться между терминалом и редактором, но вы можете легко выполнять задачи управления пакетами прямо в коде Visual Studio.
Расширение Bower помогает вам создать файл bower.json для вашего проекта, а также вы можете устанавливать, удалять, искать, обновлять пакеты, управлять кэшем и выполнять множество других задач (см. полный список возможностей).

Вы можете получить доступ к командам, связанным с Bower, запустив палитру команд, нажав клавишу F1, набрав «Bower» в строке ввода, щелкнув по опции «Bower» в раскрывающемся списке и выбрав соответствующую команду Bower.
Бауэр Пример

Git History
Git History позволяет отслеживать изменения проекта Git внутри кода Visual Studio. Это расширение особенно полезно, когда вы хотите внести свой вклад в более крупный проект Github, и вам нужен способ быстро проверить изменения, сделанные другими разработчиками.

С установленным расширением Git History вы можете просматривать историю всего файла или отдельной строки внутри него. Вы также можете сравнить предыдущие версии того же файла.
Вы можете получить доступ к командам, связанным с Git History, если наберете слово «Git» в палитре команд (F1), выберите «Git» в раскрывающемся списке и, наконец, выберите нужную вам команду. Обратите внимание, что вам нужно открыть файл, историю которого вы хотите просмотреть, прежде чем вы сможете выполнить какие-либо действия с ним.
Пример Git History