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

1
5588
views

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

Инструменты веб-разработки

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

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

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

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

Расширения Chrome

Расширения 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

Расширения VS Code
Photo Courtesy of Pexels

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

Заключение

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

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

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



1 КОММЕНТАРИЙ

  1. Зачем мне все это гомно, если я занимаюсь системным программированием на C?
    Не надо обобщать, напишите, что это относится к WEB.

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here