Инструменты, о которых мне следовало бы знать прежде, чем я стал кодить

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

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

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

В данной статье я собираюсь описать расширения 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.
• JSON Formatter - полезен для того, чтобы JSON в браузере выглядел более чистым. Вы когда-нибудь смотрели на уродливое полотно JSONа, пытаясь понять, насколько глубоко вложена необходимая вам информация? Ну, теперь вы потратите всего 2 часа вместо 3.
• Vimeo Repeat and Speed - Полезен для ускорения видео Vimeo. Если вы смотрите видеоуроки, подобные большинству веб-разработчиков, вы знаете, насколько удобно использовать ускорение воспроизведенеия в 1,25 раза. Существуют также версии для 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. Удобно для получения подсказок об ошибках при написании кода. В зависимости от вашей конфигурации, это может помочь сохранить хороший codestyle.
• Guides - добавляет дополнительные направляющие строки в код. Еще один визуальный сигнал, помогающий убедиться, что вы правильно закрываете скобки.
• JavaScript Console Utils - упрощает ведение логов консоли. Если вы похожи на большинство разработчиков, то вы постоянно логируете что-то в консоли (я знаю, что мы должны использовать отладчик). Эта утилита упрощает создание полезных инструкций console.log().
• Code Spell Checker - проверка орфографии, которая учитывает camelCase. Другим распространенным источником ошибок является опечатка в переменных или именах функций. Эта проверка орфографии будет искать необычные слова и довольно хорошо себя показывает в понимании того, как мы пишем вещи в JavaScript.
• Git Lens - облегчает просмотр, когда и кем были сделаны изменения. Всегда приятно обвинить конкретного человека в том, что код сломался, и это не является вашей ошибкой.
• Path Intellisense - автозаполнение пути к файлу. Это очень удобно для импорта чего-то из других файлов. Упрощает навигацию по файловому дереву.
• Prettier - автоматический форматировщик кода. Забудьте о днях, когда вам приходилось вручную править отступы и делать вещи читабельными для людей. Prettier сделает это за вас намного быстрее и лучше, чем вы когда-либо могли. За это я не могу ручаться, конечно.
• VSCode-Icons - добавляет значки в дерево файлов. Если вы взгялнете на вашу файловую структуру, вы причините боль вашим глазам. Эта штука может помочь. Практически для любого типа файла выставляет иконку, что облегчает распознавание того, что вы ищете.

В заключение

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

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

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

Оригинал статьи Tools I wish I had known about when I started coding.

Присоединяйтесь к нашим каналам FrontEndDev и Web Stack в Telegram чтобы не пропустить самое интересное!

Если Вам понравилась статья, поделитесь ей в соц сетях. Нам будет приятно ^^