Набор начинающего веб-разработчика: плагины Chrome и VS Code
Новичку сложно разобраться в многообразии инструментов и расширений. Мы отобрали только самые полезные плагины для браузера и редактора.
Каждый опытный разработчик считает своим долгом что-нибудь порекомендовать джуниору. На беднягу обрушивается целый ливень информации, в которой сложно сориентироваться. Не разобравшись, он устанавливает различные плагины, которые совершенно не помогают или даже мешают.
Предлагаем вам подборку действительно полезных расширений, которые могут здорово облегчить разработку для веба. Она будет полезна как начинающим, так и опытным специалистам.
Вы найдете здесь плагины для Google Chrome и VS Code. Если в своей работе вы используете другой браузер или редактор исходного кода, не беда! Скорее всего, эти инструменты доступны и для них.
Плагины для Google Chrome
Веб-девелопер проводит очень много времени, изучая свои и чужие проекты через консоль разработчика. Эти плагины помогут сэкономить немного времени:
- WhatFont. Расширение действительно позволяет многое узнать об используемых на сайте шрифтах. Теперь вы легко можете найти симпатичный шрифт и добавить его в собственный проект.
- Pesticide. Спасательный круг для начинающего верстальщика. Обводит нужный элемент рамочкой, чтобы можно было разглядеть его границы и расположение на странице.
- Colorzilla. Замечательный инструмент для работы с цветом. При клике копирует код прямо в буфер обмена, так что можно не мучиться с RGBA-комбинациями.
- CSS Peeper. Возможно, самая удобная альтернатива «раскопкам» в консоли. Многофункциональный CSS-инспектор позволяет легко и быстро находить стили каждого элемента. Настоящий клад для начинающих веб-мастеров, незаменимый при учебном копировании существующих страниц.
- Wappalyzer. Плагин расскажет вам о том, какие технологии, фреймворки и библиотеки используются на сайте.
- React Dev Tools. Если вы программируете веб-приложение на React, этот отладчик вам просто необходим.
- Redux Dev Tools. Понятное и полезное расширение для работы с состояниями в приложениях, использующих Redux-архитектуру.
- JSON Formatter. Приводит в аккуратный вид JSON-код в браузере. Если вы когда-нибудь пытались разобрать нечитаемый объект, то сможете оценить всю пользу этого инструмента.
- Vimeo Repeat and Speed. Плагин добавляет 2 кнопки в плеер Vimeo для управления повтором и скоростью. Очень полезен при просмотре обучающих видео.
Плагины для Visual Studio Code
VS Code – один из самых популярных редакторов среди веб-разработчиков, однако перечисленные плагины (или их аналоги) можно найти и для других программ:
- Auto Rename Tag. Если вы меняете имя открывающего тега, это расширение самостоятельно находит и редактирует закрывающий. Казалось бы, такая мелочь, но экономит много времени.
- HTML CSS Support. Облегчает работу с CSS-кодом в HTML-документах: подсвечивает синтаксис и предлагает автодополнение.
- HTML Snippets. Расширение позволяет создавать шаблоны кода и удобно их использовать. В комбинации с Emmet составляет очень мощный инструмент, упрощающий труд разработчика.
- Babel ES6/ES7. Плагин для прогрессивных JS-программистов, использующих новый стандарт языка и Babel.
- Bracket Pair Colorizer. Да, это расширение просто раскрашивает пары скобок. Мечта визуалов. Теперь точно не запутаетесь во вложенных блоках.
- ESLint. Всемирно признанный инструмент для линтинга. Позволяет гибко настраивать свою конфигурацию, обеспечивает чистый единообразный код.
- Guides. Расширение создает дополнительные направляющие линии для визуального разделения кодовых блоков. Очень полезная опция для начинающих программистов.
- JavaScript Console Utils. Каждый javascript-разработчик знает, что нужно использовать
debugger, но все же тайком пользуется методами объектаconsole. С этим плагином отладка кода в консоли будет намного удобнее. - Code Spell Checker. Проверяет имена переменных, функций и даже комментарии на орфографические ошибки и опечатки, подчеркивая неправильно написанные слова. Учитывает специфический способ записи camelCase.
- Git Lens. Добавляет в Visual Studio Code возможности Git. Теперь можно узнать автора коммита, просмотреть историю изменений и получить много другой ценной информации.
- Path Intellisense. Расширение предлагает автодополнение для имен подключаемых файлов. Это позволяет ориентироваться в структуре проекта и защищает от ошибок в адресах.
- Prettier. Must-have для любого человека, которому приходится работать с кодом. Этот инструмент способен придать любой мешанине знаков вполне приличный и читаемый вид.
- VSCode-Icons. Добавляет разные иконки к разным типам файлов и папок. Очень полезный плагин для огромных проектов со сложной структурой.
Набор инструментов
Каждый разработчик со временем формирует собственный «рабочий чемоданчик». Возможно, какие-то плагины из перечисленных найдут свое место в вашем. Отбирайте инструменты с умом, изучайте их, используйте на полную катушку, а ненужные безжалостно отбрасывайте.
Перевод статьи Mario Hoyos Tools I wish I had known about when I started coding