Инструменты фронтенд-разработчика

Сергей Денисов

Ведущий фронтенд-разработчик HeadHunter (hh.ru)

Хочу поделиться инструментами, которыми пользуюсь как фронтенд-разработчик. Я люблю вещи с минимально необходимой настройкой. А лучше вообще без неё — чтобы сразу работало «‎из коробки» (кстати, поэтому предпочитаю продукты Apple, а для работы — MacBook Pro). Надеюсь что-то из этого списка станет вам интересно.

IntelliJ IDEA

Любимая рабочая IDE. Здесь проходит 99% моей работы с кодом. Кажется, IntelliJ IDEA умеет всё ,что только можно, для любого языка или популярного фреймворка. Начало работы простое: открываешь проект, начинается индексация и программа предлагает установить недостающие плагины. Далее идёт перезагрузка — и, можно работать. Также здесь можно поправить что-то не касающееся моего стека или языка (XSLT, Java, Python, SQL и т.д.), с полной поддержкой. Я работаю почти всегда на настройках «‎по умолчанию», но иногда могу отключить что-то лишнее.. Единственный плагин, который я поставил дополнительно — это Key Promoter X. Очень удобная штука, которая учит чаще пользоваться горячими клавишами.

Google Chrome + DevTools

Любимый браузер, где проходит 99% отладки кода Максимально удобный и функциональный инструмент для фронтенд-разработчика, куда постоянно добавляются всё новые и новые возможности. Если функциональности не хватает, её всегда можно расширить плагинами. Я использую несколько:

• React Developer Tools и Redux DevTools — связаны с моим стеком;
• Proxy SwitchyOmega — удобный менеджер настроек прокси с возможностью создания множественных профилей. В основном использую для переключения между тестовыми серверами;
• Vimbox Переводчик — на лету переводит выделенный текст и позволяет заносить в словарь неизвестные термины.

Terminal

Это нативный CLI на macOS, который теперь относится к Zsh. Использую на базовом уровне работы с файлами, скриптами и Git. А также для подключения к виртуалкам и Docker-контейнерам по SSH. Не делал никакой кастомизации, кроме выбора цветовой гаммы и проброса ключей.

GitHub Desktop

Через GitHub Desktop работаю исключительно с Github и люблю видеть красивые диффы в его стиле. Вся остальная работа с Git проходит через Terminal.

VS Code

Пока использую VS Code только для правки мелких файлов вне проекта. Мечтаю переехать на него как основную IDE. Останавливает только необходимость создавать мощный конфиг для привычной функциональности.

Браузеры

Safari, Firefox, Opera и т.д. — порой необходимо проверить какие-то серьезные правки в коде до того, как передашь задачу в тестирование. И иногда даже использовать отладчик.

Microsoft Remote Desktop

Microsoft Remote Desktop полезен для доступа к виртуалкам с Windows и Internet Explorer. А также для тестирования и отладки.

Parallels Desktop

На мой взгляд, лучшая платформа для виртуальных машин для macOS. Я перепробовал все возможные платформы для виртуалок, но отловить баг на Ubuntu в Chrome до этого нигде не получалось (всё жутко тормозило, хотя я выделял максимум ресурсов). А вот на Parallels Desktop я легко смог это сделать это получилось легко. Сейчас у меня на ней стоит только Ubuntu (хотя одно время также были бесплатные виртуалки от Microsoft).

Xcode

В Xcode использую только режим Simulator для тестирования и отладки виртуальных устройств на iOS (которые, по опыту, в работе с веб-сайтами не уступают реальным). Инструмент поддерживает подключение к отладчику в Safari — это удобно.

Figma

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

MDN

Использую MDN как основной источник информации по веб-технологиям. Пока не подводила.

StackOverflow

Лучший сервис для поиска ответов на вопросы по технологиям. Посещаю его регулярно, предпочитаю развернутые ответы, где указаны источники. Ещё сам периодически отвечаю на вопросы. Сейчас мой аккаунт — в top 6% overall.

Can I use

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

Dash

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

Babel/ESLint/Prettier/autoprefixer

Думаю, такой набор инструментов фронтенд-разработчика стоит подключать в любом фронтенд-проекте. Babel, ESLint, Prettier и autoprefixer настраиваются один раз — в соответствии с требованиями по поддержке браузеров. А потом забываются до обновления требований или самих пакетов. И можно практически безопасно писать современный код. Бывают, конечно, исключения, но, на практике, не так часто.

На этом всё. Буду рад, если поделитесь в комментариях вашими любимыми инструментами!