22 инструмента, которые упростят жизнь начинающему веб-программисту

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

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

Расширения для Chrome

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

• WhatFont — Название говорит само за себя. Это простой способ поиска шрифтов на ваших любимых сайтах, которые вы хотите использовать в собственных проектах.
• Pesticide — полезен для просмотра контуров ваших <div> и модификации CSS. Этот инструмент стал для меня палочкой-выручалочкой, когда я изучал блочную модель в верстке.
• Colorzilla — позволяет копировать точные цвета с сайта. Цвет копируется прямиком в буфер обмена, так что вам не придется до бесконечности подбирать правильную комбинацию RGBA.
• CSS Peeper — помогает определять цвета и атрибуты, используемые на сайте. Можно клонировать красивые сайты, разобраться в цветовой схеме и посмотреть, что еще интересного есть на странице.
• Wappalyzer — определяет технологии, которые используются на сайте. Если вам интересно, какой фреймворк использует сайт или на каком сервисе он хостится — просто воспользуйтесь данным инструментом.
• React Dev Tools —помогает отлаживать приложения на React. Уточню, что этот инструмент пригодится только React-программистам.
• Redux Dev Tools — поможет отлаживать приложения на Redux. Инструмент пригодится только для Redux-приложений.
• JSON Formatter — с его помощью JSON будет выглядеть чище в браузере. Вы когда-нибудь всматривались в уродливый пузырь JSON, пытаясь понять, как глубоко в нем запрятана нужная вам информация? Так вот, с этим расширением вместо трех часов вам хватит двух.
• Vimeo Repeat and Speed — позволяет ускорять Vimeo-ролики. Если вы, как и большинство разработчиков, смотрите видеотуториалы, то знаете, насколько иногда полезно ускорить их воспроизведение в 1,25 раз. Есть версии и для YouTube.

Расширения для VS Code

Visual Studio Code — мой выбор. Людям нравится его текстовые редакторы, и я не исключение. Но уверен, что большинство из этих расширений найдутся и для других редакторов. 

• Auto Rename Tag — автоматическое переименование парных HTML-тегов. Вы создали тег <p>. Теперь вы хотите его изменить, как и тег закрытия </p> на какой-то другой. Просто измените один — и второй изменится сам! Ваша продуктивность также изменится в лучшую сторону.
• HTML CSS Support — CSS-поддержка для HTML-документов. Это полезно для получения четкой подсветки синтаксиса и предложений кода, так что CSS будет вызывать в вас желание завязать с программированием ну больше двух раз в день.
• HTML Snippets — полезные кодовые снипеты. Это еще один хороший оптимизатор. В паре с Emmet вам вообще больше не придется вручную набирать теги HTML.
• Babel ES6/ES7 — добавляет синтаксную расцветку в JavaScript Babel. Если вы используете Babel, с этим инструментом, вам будет намного проще разобраться в собственном коде. Особенно если любите поиграть с современными функциями JavaScript.
• Bracket Pair Colorizer — добавляет цвета в скобки для упрощения визуализации блоков. Очень удобно для выявления самых распространенных багов, когда вы забыли закрыть скобку или переборщили с ними.
• ESLint — интегрирует ESLint в Visual Studio Code. Удобно получать подсказки об ошибках в процессе написания кода и, в зависимости от конфигурации, оттачивать хороший стиль кодинга.
• Guides — добавляет в код дополнительные направляющие линии. Еще один визуальный помощник, который позволяет убедиться, что вы правильно закрываете скобки. Как видите, я очень люблю визуализации.
• JavaScript Console Utils — облегчает ведение журнала консоли. Если вы, как и большинство разработчиков, ловили себя на том, что заходите в консоль в процессе отладки (я знаю, что нужно использовать отладчик), этот инструмент облегчит вам создание полезных операторов console.log().
• Code Spell Checker — отличный инструмент для отлавливания опечаток в переменных или названиях функций. Этот спелчекер находит необычные слова и очень полезен для контроля за тем, как мы пишем на JavaScript.
• Git Lens — определяет, когда и кем сделаны изменения. Очень удобно для сбора доказательной базы против того, по чьей вине все поломалось. Тем более что вы-то уж точно не виноваты — этого не может быть.
• Path Intellisense — автозаполнение пути файла. Супер-удобно для импортирования всякого из других файлов. Навигация по файловому дереву становится сплошным удовольствием.
• Prettier — автоматическое форматирование кода. Забудьте о тех временах, когда приходилось вручную перелопачивать код, чтобы навести в нем порядок. Prettier сделает это намного быстрее и лучше, чем вы. Очень рекомендую.
• VSCode-Icons — добавляет иконки в файловое дерево. Если при взгляде на вашу файловую структуру у вас начинают кровоточить глаза, эта штука поможет. У нее найдется иконка буквально под любой тип файла, и она поможет разобраться, на что вы сейчас смотрите.