22 полезных инструмента для начинающих кодеров

Расширения для Chrome

Следующие средства помогают в работе через консоль Chrome:

• WhatFont — помогает легко определить, какой шрифт используется на сайте. Можно открыть любимый ресурс, узнать шрифт и использовать его для собственных проектов.
• Pesticide  — позволяет увидеть границы <div>-ов и редактировать CSS. Незаменимый помощник для тех, кто только начинает работать с элементами стилей.
• Colorzilla — с его помощью можно определить точный цвет с любого сайта. После определения номер цвета автоматически копируется в буфер обмена, так что вам больше не придется подбирать нужное RGBA-значение.
• CSS Peeper  — пригодится для изучения цветов и ассетов, которые используются на разных сайтах. Начинающим кодерам будет полезно попробовать скопировать страницу, которая им нравится. Так они смогут разобраться в ее строении.
• Wappalyzer  — позволяет увидеть, какие технологии (фреймворки и сервисы) использует сайт.
• React Dev Tools  — если вы разрабатываете приложения на React, это средство понадобится вам для их дебага.
• Redux Dev Tools  — аналогичное расширение для дебага приложений на Redux.
• JSON Formatter  — с помощью этого расширения ваши JSON будут выглядеть в браузере аккуратнее. Если вам когда-нибудь попадались непонятные JSON-ы, то поставьте себе этот инструмент. Так вам придется разбираться не три часа, а два.
• Vimeo Repeat and Speed  — полезное средство для ускорения роликов на Vimeo. Если вы смотрите обучающие видео по программированию на Vimeo, вы знаете, что иногда их стоит проматывать на скорости 1,25.

Расширения для Visual Studio Code

• Auto Rename Tag  — автоматически переименовывает парные HTML-тэги. Например, вы создали тэг <p> и хотите переименовать его вместе с закрывающим тэгом </p>. С помощью этого средства вам нужно будет сменить название только одного тэга, второй переименуется автоматически. В теории ваша продуктивность должна вырасти в два раза. 
• HTML CSS Support — поддержка CSS для HTML-документов.
• HTML Snippets  — полезное средство, которое предлагает готовые сниппеты. Установите еще Emmet, и вам почти не нужно будет вводить какой-либо HTML-код.
• Babel ES6/ES7  — выделяет цветом синтакс JavaScript Babel. Если вы используете Babel, то это средство поможет вам лучше разбираться в коде.
• Bracket Pair Colorizer  — выделяет цветом скобки для лучшей визуализации блоков. Пригодится, если вы часто забываете закрывать скобки в коде.
• ESLint  — интегрирует ESLint в Visual Studio Code. Подсказывает о возможных багах во время написания кода.
• Guides  — добавляет дополнительные гайдлайны в код. Еще одно средство, которое помогает следить за правильным закрытием скобок.
• JavaScript Console Utils  — упрощает запись логов через консоль.
• Code Spell Checker — проверка правописания, которая отлично подходит для работы с JavaScript.
• Git Lens  — с помощью этого расширения вам будет легче увидеть, кто, когда и какие изменения вносил в код.
• Path Intellisense  — автозаполнение пути файла. Очень удобно, если вам нужно импортировать что-то из других файлов. Значительно упрощает навигацию.
• Prettier  — автоформатирование кода. Забудьте те времена, когда вам приходилось вручную разбивать код, чтобы он выглядел более понятно.
• VSCode-Icons — добавляет иконки в файловую структуру. Пригодится если вам больно смотреть на свое дерево файлов и вы не понимаете, что к чему.

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

Источник.

Материалы по теме:

10 незаменимых инструментов для работы с Instagram

10 полезных «фишек», которые помогают работать с сервисами Google

8 приложений для продуктивной работы

17 полезных расширений для браузера