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

1656675731 instrumenty o kotoryh ya hotel by znat kogda nachinal kodirovat

Марио Хойос

CNu66tf7M3dXzYdMeo4yoXtRZQwTJf722UDH
Фото energepic.com из Pexels

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

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

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

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

Не стесняйтесь прыгать.

Расширение Chrome

kNxI-xqtP3DhSiPB0GHdV19e77slYxRLGs19
Фотография Caio Resende из Pexels

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

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

Расширение кода VS

nWv5yCVARZsqUeBkgfqge6jUTUxoLacUJOlC
Фото предоставлено Pexels

Visual Studio Code – мой избранный редактор.

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

  • Автоматическое переименование меток — автоматическое переименование четных меток HTML. Вы создали a <тег. Теперь вы хотите изменить его, а также его enclosing

    к чему-то другому. Просто смените одно, и другое последует за ним. Теоретически повышает вашу производительность в 2 раза.

  • Поддержка HTML CSS – поддержка CSS для документов HTML. Это полезно для получения четкой подсветки синтаксиса и предложений по коду, чтобы CSS вызвало у вас желание прекратить кодировку только пару раз в день.
  • Фрагменты HTML – полезные фрагменты кода. Еще одна приятная экономия времени. Совместите это с Emmet, и вам почти никогда не придется снова вводить настоящий HTML.
  • Babel ES6/ES7 – добавляет окраску синтаксиса JavaScript Babel. Если вы используете Babel, это облегчит различие того, что происходит в вашем коде. Это хорошо, если вы любите играть с современными функциями JavaScript.
  • Bracket Pair Colorizer – добавляет цвета к скобкам для более легкой визуализации блока. Это удобно для тех слишком распространенных ошибок, когда вы неправильно закрыли скобки или круглые скобки.
  • ESLint – интегрирует ESLint в код Visual Studio. Это удобно для получения подсказок об ошибках при написании кода, и, в зависимости от конфигурации, это может помочь применить хороший стиль кодирования.
  • Направляющие — добавление дополнительных направляющих к коду. Это еще одна визуальная подсказка, чтобы убедиться, что вы правильно закрываете скобки. Если вы не можете сказать, я очень визуальный человек.
  • Утилиты консоли JavaScript – упрощает ведение журнала консоли. Если вы похожи на большинство разработчиков, вы обнаружите, что входите в консоль во время процесса отладки (я знаю, что мы должны использовать отладчик). Эта утилита позволяет легко создавать полезные console.log() заявления.
  • Проверка орфографии кода – проверка орфографии, учитывающая верблюжий регистр. Другим распространенным источником ошибок является опрокидывание названия переменной или функции. Это средство проверки орфографии будет искать необычные слова и хорошо учитывает, как мы пишем вещи в JavaScript.
  • Git Lens – легче видеть, когда и кем были внесены изменения. Это хорошо, когда обвиняете соответствующее лицо, когда код взломан, поскольку это абсолютно никогда не ваша вина.
  • Path Intellisense – автозаполнение пути к файлу. Это очень удобно для импорта вещей из других файлов. Это делает навигацию вашим деревом файлов простой.
  • Prettier – автоматический форматировщик кода. Забудьте о временах, когда вам приходилось вручную вводить отступы в коде и делать вещи читабельными. Prettier сделает это намного быстрее и лучше, чем вы могли бы сами. Я не могу рекомендовать это достаточно.
  • VSCode-Icons – добавляет значки к дереву файлов. Если вы смотрите на структуру файлов, вам больно, это может помочь. Практически для любого типа создаваемого файла есть полезный значок, который облегчит различие того, что вы просматриваете.

В заключение

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

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

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

Если вам понравилась эта статья, пожалуйста, похлопайте ее и просмотрите другие статьи, которые я написал здесь, здесь, здесь и здесь. Также подпишитесь на меня в Twitter.

Добавить комментарий

Ваш адрес email не будет опубликован.