Инструменты, о которых я хотел бы знать, когда начал программировать
Chrome Extensions
Теперь, когда я провозгласил себя веб-разработчиком, я практически живу на своей консоли Chrome. Ниже приведены некоторые инструменты, которые позволяют мне тратить меньше времени на работу:
WhatFont - Это простой способ узнать шрифты, которые используются на других сайтах, так что вы можете взять их для своих собственных проектов.
Pesticide - Полезно для просмотра контуров вашего <div>S и изменения CSS.
Colorzilla - Удобно для точного копирования цветов с веб-сайтов. Программа копирует цвет прямо в ваш буфер обмена, поэтому вы не проведете всё время в попытках получить правильную комбинацию RGBA.
CSS Peeper - С его помощью можно просматривать цвета и другие ресурсы, используемые на веб-сайте. Клонирует веб-сайты, которые вам нравятся. Это дает возможность «подсмотреть» их цветовую гамму и позволяет вам видеть, какие другие активы существуют на странице.
Wappalyzer - Позволяет просматривать технологии, используемые на веб-сайте. Вы когда-нибудь задумывались, какую структуру использует веб-сайт или на каком сервере он размещен? Больше задумываться об этом не придется.
React Dev Tools - Полезно для отладки ваших приложений, написанных на React.
Redux Dev Tools - Полезно для отладки приложений с использованием Redux.
JSON Formatter - Использую для того, чтобы JSON выглядел более чистым в браузере. С помощью этого инструмента вы потратите не больше двух часов.
Vimeo Repeat and Speed - С помощью этого инструмента я ускоряю видео Vimeo. Если вы смотрите видео-уроки, как и большинство веб-разработчиков, теперь вы знаете, как это сделать быстрее. Есть также версии для YouTube.
VS Code Extensions
У каждого программиста есть свой любимый текстовый редактор, и я не исключение. Мой выбор - Visual Studio Code.
Большинство из расширений, представленных ниже, работают для любого редактора, который вы используете. Мои фавориты:
Auto Rename Tag - Автоматическое переименование парных тегов HTML. Вы создали тег <p>. Теперь вы хотите изменить его, а также его вложить тег </p> во что-то другое. Просто измените что-то одно, и другое поменяется автоматически. Теоретически повышает производительность в 2 раза.
HTML CSS Support - Это полезно для получения некоторого аккуратного выделения синтаксиса и предложений кода.
HTML Snippets - еще один полезный ресурс для экономии времени. Соедините с Emmet, и вам едва когда-либо придется вводить HTML снова.
Babel ES6/ES7 – Подсвечивает синтаксис JavaScript Babel. Если Вы используете Babel, это значительно упростит работу над кодом. Если вы любите использовать все современные функции JS, это то, что вам нужно.
Bracket Pair Colorizer - Добавляет цвета в скобки для более легкой визуализации блока. Очень удобно для обнаружения самых распространенных ошибок, если вы, например, не закрыли скобки.
ESLint - Интегрирует ESLint в Visual Studio Code. Дает подсказки об ошибках при написании кода, и, в зависимости от вашей конфигурации, поможет обеспечить хороший стиль кодирования.
Guides - Добавляет дополнительные направляющие линии в код. Еще одна подсказка для вас, чтобы вы правильно закрывали все скобки.
JavaScript Console Utils - Облегчает ведение журнала консоли. Если Вы похожи на большинство разработчиков, вы обнаружите, что входите в консоль в своем отладочном потоке (я знаю, что мы должны использовать отладчик). Эта утилита позволяет легко создать полезную консоль.журнал() отчетности.
Code Spell Checker - Проверка орфографии, которая отвечает за camelCase. Еще один распространенный источник ошибок – жирность? ввода имени переменной или функции. Эта проверка орфографии будет искать необычные слова.
Git Lens - Позволяет увидеть, когда и кем были внесены изменения в код. Если код будет нарушен не по вашей вине, у вас будут неопровержимые доказательства.
Path Intellisense - Автозаполнение файла. С его помощью удобно импортировать данные из других файлов. Это упрощает навигацию по файловому дереву.
Prettier - Автоматический форматировщик кода. Забудьте о днях, когда вам приходилось вручную переписывать свой код. Prettier сделает это за вас намного быстрее и лучше. Но я не буду рекомендовать только этот инструмент для проверки.
VSCode-Icons - добавляет иконки в файловое дерево. Если просмотр вашей файловой структуры причиняет боль, это может помочь J Иконки практически для любого типа файлов облегчат вам поиск нужного файла.
Скорее всего, у вас уже есть собственный набор инструментов, необходимых при написании кода. Надеюсь, некоторые из инструментов, о которых я написал, помогут сделать ваш рабочий процесс более эффективным.
Перевод статьи Tools I wish I had known about when I started coding от Digital Skynet :)
А какими инструментами пользуетесь вы? :)