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

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

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

Как установить VS Code Extensions

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

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

8 мощных расширений кода Visual Studio

HTML фрагменты

Если вы хотите часто писать HTML в коде Visual Studio, расширение HTML Snippets может стать удобным инструментом, так как добавляет сложную поддержку HTML. Хотя VS Code имеет базовую поддержку HTML, такую как окраска синтаксиса, расширение HTML Snippets знает гораздо больше.

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

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

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

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

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

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

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

View in Browser - это простое, но мощное расширение для кода 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

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

Использование этого расширения довольно просто, поскольку JSHint помечает ошибки красным, а уведомления - зеленым подчеркиванием. Если вы хотите получить больше информации о проблемах, просто наведите курсор на подчеркнутые части, и JSHint сразу поместит метку с описанием проблемы..
Фрагменты кода jQuery

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

Все фрагменты jQuery, кроме одного, начинаются с JQ префикс. Единственным исключением является FUNC вызвать это вставляет анонимную функцию в редактор.

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

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

Если вы используете это расширение, вы не нужно переключаться между терминалом и редактором, но вы можете легко выполнять задачи управления пакетами прямо в коде Visual Studio.

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

Вы можете получить доступ к командам, связанным с Bower, запустив палитру команд нажав F1, типирование “Беседка” в строке ввода, нажав на “Беседка” в раскрывающемся списке и выберите соответствующую команду Bower.
Git History

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

С установленным расширением Git History вы можете просмотреть историю всего файла, или конкретная линия внутри него. Вы также можете сравнить предыдущие версии из того же файла.

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