Жаль, что я не знал об этих инструментах, когда начинал программировать

Перевод статьи Марио Ойоса “Tools I wish I had known about when I started coding”.

В мире технологий есть тысячи инструментов, которые вам могут рекомендовать. Как понять, с чего начать?

Для меня как человека, начавшего программировать относительно недавно, этот ливень информации был слишком оглушительным, чтобы суметь разобраться. Я устанавливал расширения, которые не только не помогали мне в работе, но временами даже мешали.

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

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

Расширения Chrome

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

• WhatFont  – В названии отражена вся суть. С помощью этого расширения можно определить, какие шрифты использует понравившийся вам сайт, с тем чтобы использовать их и в своих проектах.
• Pesticide  – Полезен для просмотра внешних границ ваших <div> и изменения CSS. Это был просто спасательный круг, когда я пытался изучать box-model.
• Colorzilla  –  Полезен для копирования цветов сайта. Инструмент копирует цвет прямо в ваш буфер обмена, поэтому не нужно тратить много времени на подбор правильной RGBA-комбинации.
• CSS Peeper – полезен для поиска цветов и ассетов, использованных на сайте. Когда вы только начинаете, хорошим упражнением служит точное копирование сайта, который вам кажется привлекательным. Этот инструмент позволяет вам заглянуть «под капот» сайта и посмотреть как цветовую гамму, так и другие ассеты страницы.
• Wappalyzer – Полезен для просмотра используемых на сайте технологий. Вам бывало любопытно, какой фреймворк используется на сайте или на чем основан какой-то сервис? Можете дальше не искать.
• React Dev Tools – Инструменты полезны для отладки ваших React-приложений. Естественно, это вам пригодится только если вы программируете приложение React.
• Redux Dev Tools – Полезны для отладки приложений, использующих Redux. Конечно, они вам пригодятся только если вы внедряете Redux в своих приложениях.
• Vimeo Repeat and Speed – Полезен для ускорения видео Vimeo. Если вы смотрите обучающие видео (как и большинство разработчиков), вы знаете, как удобно бывает установить скорость просмотра на 1,25 вместо обычной 1,0. Также есть версии для YouTube.

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

Для себя в качестве редактора я выбрал Visual Studio Code.

Люди любят свои текстовые редакторы, и я не исключение. Однако я уверен, что большая часть этих расширений будет работать и в других редакторах. Вот расширения, которые мне нравятся:

Auto Rename Tag – Автоматическое переименование парных HTML-тэгов. Вы создали тэг <p>. А теперь хотите изменить его, причем чтобы закрывающий тэг </p> изменился тоже. Прсто меняете один, а второй изменится сам. Теоретически, это улучшает вашу производительность в 2 раза.

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 – Дополнительные guide lines в коде. Это еще один визуальный сигнал для проверки правильного закрытия скобок. Если вы заметили, я очень «визуальная» личность.

Code Spell Checker – Проверка орфографии, учитывающая camelCase. Еще один распространенный источник ошибок это опечатка в названии переменной или функции. Этот инструмент проверки правописания будет искать необычные слова и, что особенно хорошо, учитывать способ записи в JavaScript.

Git Lens – облегчает понимание того, кто и когда вносил изменения. Очень нужный инструмент для поиска виновного в поломке кода, поскольку это уж точно не ваша вина.

Path Intellisense – Автозаполнение пути местонахождения файла. Это супер полезно для импорта каких-то вещей из других файлов. Очень облегчает навигацию по дереву файлов.

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

VSCode-Icons – Добавляет иконки к дереву файлов. Если на вашу структуру файлов даже смотреть больно, этот инструмент может вам помочь. В наличии иконки практически для любого вида файлов, благодаря чему их будет легче выловить взглядом во время поисков.

Заключение

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

Но старайтесь не попадать в ловушку установки всех подряд инструментов. Сначала стоит научиться пользоваться теми, что у вас уже есть, а это может занять некоторое время.

Если у вас есть свои любимые инструменты, – делитесь ими в комментариях. Возможно, кому-нибудь они тоже будут полезны.

[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]