Набор начинающего веб-разработчика

Каждый опытный разработчик считает своим долгом что-нибудь порекомендовать джуниору. На беднягу обрушивается целый ливень информации, в которой сложно сориентироваться. Не разобравшись, он устанавливает различные плагины, которые совершенно не помогают или даже мешают.

Предлагаем вам подборку действительно полезных расширений, которые могут здорово облегчить разработку для веба. Она будет полезна как начинающим, так и опытным специалистам.

Вы найдете здесь плагины для Google Chrome и VS Code. Если в своей работе вы используете другой браузер или редактор исходного кода, не беда! Скорее всего, эти инструменты доступны и для них.

Плагины для Google Chrome

Веб-девелопер проводит очень много времени, изучая свои и чужие проекты через консоль разработчика. Эти плагины помогут сэкономить немного времени:

Расширение действительно позволяет многое узнать об используемых на сайте шрифтах. Теперь вы легко можете найти симпатичный шрифт и добавить его в собственный проект.
Спасательный круг для начинающего верстальщика. Обводит нужный элемент рамочкой, чтобы можно было разглядеть его границы и расположение на странице.
Замечательный инструмент для работы с цветом. При клике копирует код прямо в буфер обмена, так что можно не мучиться с RGBA-комбинациями.
Возможно, самая удобная альтернатива «раскопкам» в консоли. Многофункциональный CSS-инспектор позволяет легко и быстро находить стили каждого элемента. Настоящий клад для начинающих веб-мастеров, незаменимый при учебном копировании существующих страниц.
Плагин расскажет вам о том, какие технологии, фреймворки и библиотеки используются на сайте.
Если вы программируете веб-приложение на, этот отладчик вам просто необходим.
Понятное и полезное расширение для работы с состояниями в приложениях, использующих .
Приводит в аккуратный вид JSON-код в браузере. Если вы когда-нибудь пытались разобрать нечитаемый объект, то сможете оценить всю пользу этого инструмента.
Плагин добавляет 2 кнопки в плеер Vimeo для управления повтором и скоростью. Очень полезен при просмотре обучающих видео.

Плагины для Visual Studio Code

VS Code – один из самых популярных редакторов среди веб-разработчиков, однако перечисленные плагины (или их аналоги) можно найти и для других программ:

Если вы меняете имя открывающего тега, это расширение самостоятельно находит и редактирует закрывающий. Казалось бы, такая мелочь, но экономит много времени.
Облегчает работу с CSS-кодом в HTML-документах: подсвечивает синтаксис и предлагает автодополнение.
Расширение позволяет создавать шаблоны кода и удобно их использовать. В комбинации с Emmet составляет очень мощный инструмент, упрощающий труд разработчика.
. Плагин для прогрессивных JS-программистов, использующих новый стандарт языка и Babel.
Да, это расширение просто раскрашивает пары скобок. Мечта визуалов. Теперь точно не запутаетесь во вложенных блоках.
Всемирно признанный инструмент для линтинга. Позволяет гибко настраивать свою конфигурацию, обеспечивает .
Расширение создает дополнительные направляющие линии для визуального разделения кодовых блоков. Очень полезная опция для начинающих программистов.
Каждый javascript-разработчик знает, что нужно использовать debugger, но все же тайком пользуется методами объекта console. С этим плагином отладка кода в консоли будет намного удобнее.
Проверяет имена переменных, функций и даже комментарии на орфографические ошибки и опечатки, подчеркивая неправильно написанные слова. Учитывает специфический способ записи camelCase.
Добавляет в Visual Studio Code . Теперь можно узнать автора коммита, просмотреть историю изменений и получить много другой ценной информации.
Расширение предлагает автодополнение для имен подключаемых файлов. Это позволяет ориентироваться в структуре проекта и защищает от ошибок в адресах.
Must-have для любого человека, которому приходится работать с кодом. Этот инструмент способен придать любой мешанине знаков вполне приличный и читаемый вид.
Добавляет разные иконки к разным типам файлов и папок. Очень полезный плагин для огромных проектов со сложной структурой.

Набор инструментов

Каждый разработчик со временем формирует собственный «рабочий чемоданчик». Возможно, какие-то плагины из перечисленных найдут свое место в вашем. Отбирайте инструменты с умом, изучайте их, используйте на полную катушку, а ненужные безжалостно отбрасывайте.