admin 23 июля 2018

Набор начинающего веб-разработчика: плагины Chrome и VS Code

Хочешь уверенно проходить IT-интервью?

Готовься к IT-собеседованиям уверенно с AI-тренажёром T1!

Мы понимаем, как сложно подготовиться: стресс, алгоритмы, вопросы, от которых голова идёт кругом. Но с AI тренажёром всё гораздо проще.

💡 Почему Т1 тренажёр — это мастхэв?

  • Получишь настоящую обратную связь: где затык, что подтянуть и как стать лучше
  • Научишься не только решать задачи, но и объяснять своё решение так, чтобы интервьюер сказал: "Вау!".
  • Освоишь все этапы собеседования, от вопросов по алгоритмам до диалога о твоих целях.

Зачем листать миллион туториалов? Просто зайди в Т1 тренажёр, потренируйся и уверенно удиви интервьюеров. Мы не обещаем лёгкой прогулки, но обещаем, что будешь готов!

Реклама. ООО «Смарт Гико», ИНН 7743264341. Erid 2VtzqwP8vqy


Новичку сложно разобраться в многообразии инструментов и расширений. Мы отобрали только самые полезные плагины для браузера и редактора.

Набор начинающего веб-разработчика: полезные плагины Google Chrome и Visual Studio Code

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

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

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

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

Плагины 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

Плагины для 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

Другие статьи по теме:

Комментарии

ВАКАНСИИ

Добавить вакансию
Hotel Search Team Lead (Golang)
по итогам собеседования
Golang-разработчик
Пермь, по итогам собеседования

ЛУЧШИЕ СТАТЬИ ПО ТЕМЕ