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

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

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

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

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

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 :)

А какими инструментами пользуетесь вы? :)