Сучасна диджитал-освіта для дітей — безоплатне заняття в GoITeens ×
Mazda CX 30
×

Інструменти та застосунки macOS для розроблення у 2022 році

Підписуйтеся на Telegram-канал «DOU #tech», щоб не пропустити нові технічні статті

Привіт, мене звати Дмитро, я Front-End Solution Architect у Plarium. Мій департамент розробляє усілякі бізнес-рішення, щоб пришвидшити розвиток ігрових проєктів та команд.

Щоб спростити процес розроблення, розширити його можливості та поліпшити власну продуктивність, я постійно пробую нові інструменти та підходи. Для цього матеріалу відібрав ті, які виявилися дійсно ефективними, і які я використовую щодня.

Я поділюся інструментами та застосунками, які полегшують повсякденну рутину розробника, та додатковими інструментами, що стануть у пригоді всім, хто використовує macOS.

Інструменти командного рядка

Homebrew

Менеджер пакетів для macOS, Homebrew, дозволяє встановити пакети, які відсутні у вашій операційній системі (MacOS чи Linux) за замовчуванням. Наприклад Python3, Node чи щось більш високорівневе. Цей інструмент схожий на apt-get для Ubuntu (Linux на основі Debian).

iTerm2

iTerm2 — гарна альтернатива дефолтному застосунку Terminal.app для macOS. Це сучасний застосунок із функціями, що вам завжди були потрібні, але ви просто про це не знали. Мені подобається, що програма має велику кількість налаштувань.

Ефект показати/сховати

ZSH

Z оболонка (також відома як zsh) — це оболонка Unix, побудована на базі bash (дефолтна оболонка macOS) з додатковими функціями. ZSH розроблена для інтерактивного використання і також є потужною мовою скриптів.

Oh My ZSH!

Oh My Zsh — чудова платформа з відкритим вихідним кодом для керування конфігурацією Zsh. Вона має чимало корисних функцій, допоміжних застосунків, разючий список плагінів, тем і багато чого іншого. Що стосується тем, я надаю перевагу використанню powerlevel10k. Лише погляньте на неї.

Тема powerlevel10k

Fig

Fig додає автозаповнення на зразок VSCode до наявного термінала. Як це виглядає, можна побачити нижче.

Джерело Fig.io

Цей застосунок і має загальні скорочення (для git тощо), і надає можливість створювати власні скорочення для проєкту. Все, що потрібно зробити, щоб їх додати, це ініціалізувати папку .fig у вашому проєкті й створити файл __shortcuts.ts з описом скорочень.

Джерело Fig.io

Також fig може автоматично підхоплювати npm-скрипти вашого проєкту. Або можна створити окремий список автозавершень, додавши об’єкт fig до файлу package.json. Випадне меню з командами може виглядати так, як показано нижче.

Джерело Fig.io

Fig активно розвивається, туди постійно додаються нові функції. Наприклад, командна взаємодія, яка дозволяє ділитися скриптами з учасниками команди, або зручний редактор dotfiles, нові плагіни тощо. Повний перелік майбутніх функціональностей ви знайдете на сайті проєкту.

Volta

Volta — це легкий спосіб керування інструментами командного рядка JavaScript. Можна сказати, що це краща версія NVM.

Наприклад, команда volta pin node@12 зафіксує точну версію NodeJS у package.json, щоб ви могли закомітити свій вибір у Git. З цього моменту щоразу, коли ви запускаєте Node у своєму проєкті, Volta буде автоматично перемикатись на ту версію Node, яку ви обрали. І всі ваші контриб’ютори можуть зробити те саме, встановивши Volta на своїй робочій машині.

Ngrok

Ngrok — це сервіс, що дозволяє відкрити доступ до внутрішніх ресурсів машини (наприклад, до вебсервера), на якій він запущений, з зовнішньої мережі. Це добре для ситуацій, коли ваш проєкт знаходиться у стадії розроблення. Ngrok дозволить:

  • демонструвати свій вебпроєкт без повноцінного розгортання;
  • створити вебхук на локальній машині;
  • перевірити мобільні застосунки, підключені до локально запущеного бекенду.

Інтерфейс консолі Ngrok виглядає так:

Джерело ngrok.com

Десктопні застосунки

VS Code + плагіни

VS Code — мабуть, найпопулярніший редактор коду за субʼєктивним сприйняттям, а також за опитуваннями State of JS 2020 та State of Frontend 2022.

Джерело 2020.stateofjs.com

Ось моя добірка найкорисніших плагінів VS Code plugins:

  • Auto Close Tag. Автоматично додає кінцевий тег HTML/XML на кшталт Visual Studio IDE або Sublime Text.
  • Auto Rename Tag. Автоматично перейменовує парні теги HTML/XML на кшталт Visual Studio IDE.
  • Bracket Peek. Допомагає переглянути рядок коду, що містить відкривальну дужку, під час перевірки відповідної кінцевої дужки.
  • GitLens. Розширює можливості Git, вбудовані в Visual Studio Code. Це допоможе миттєво візуалізувати авторство коду за допомогою Git blame анотацій і CodeLens, легко переміщуватися та досліджувати репозиторії Git, отримувати цінну інформацію за допомогою команд порівняння та багато іншого.
  • Import Cost. Відображає в редакторі розмір імпортованого пакета.
  • Indent-Rainbow. Робить відступ більш читабельним.
  • Path Intellisense. Автоматично заповнює імена файлів.
  • Project Manager. Допомагає легко отримати доступ до проєктів, незалежно від того, де вони розташовані.
  • Shortcut Menu Bar. Додає понад 35 зручних кнопок, як-от показати відкриті файли, зберегти, переключити термінал, панель активності тощо. Також можна створювати власні кнопки за допомогою спеціальних команд.
  • Thunder Client. Це клієнтський плагін Rest API, який не важить дуже багато. Якщо ви користуєтесь базовими функціями Postman, цей плагін здатен його замінити.
  • Trailing Spaces. Дозволяє виділяти кінцеві пробіли та миттєво видаляти їх.
  • Turbo Console Log. Набагато полегшує процес пошуку і виправлення помилок завдяки автоматизації операції написання діагностичних повідомлень.

GitKraken

GitKraken — це інструмент Git GUI, схожий на Atlassian Sourcetree, але потужніший і більш витончений. Мені подобається цей інструмент з багатьох причин.

  • Має простий у використанні drag-n-drop у рутинних операціях на кшталт об’єднання гілок.
  • Має чудовий режим Soloing, де можна бачити історію тільки певних гілок.
  • Може групувати проєкти у workspaces.
  • Має інтегрований пошук за назвою гілки, issues panel, створення та управління PR тощо (все в одному інструменті).

Джерело gitkraken.com

  • Має дуже корисну функцію, яка вирішує конфлікти злиття (як у WebStorm IDE).

Джерело gitkraken.com

  • Дозволяє в один клік відкотити різні команди для гілок, як-от Checkout, Commit, Discard, Delete branch, Remove remote та Reset branch to a commit.

Джерело gitkraken.com

ResponsivelyApp

ResponsivelyApp — дуже корисний інструмент для перевірки того, як вебзастосунок виглядає на екранах з різною роздільною здатністю. Це значно полегшує розроблення.

Джерело responsivelyapp.com

RunJS

RunJS — це ігровий майданчик для JavaScript на робочому столі. Ви можете досліджувати та експериментувати з JavaScript і TypeScript, візуалізувати свої ідеї та отримувати миттєвий зворотний зв’язок під час написання коду. Це дуже корисний інструмент для тестування коду JavaScript, довшого за 1 рядок, або для створення фрагментів коду тощо. Цей інструмент робить виконання подібних операцій зручнішим, ніж DevTools браузера.

Джерело runjs.app

Altair GraphQL Client

Altair допомагає діагностувати помилки в запитах та реалізаціях GraphQL — дбає про рутину, щоб ви могли зосередитися на фактичному виконанні завдань.

Джерело altair.sirmuel.design

Додаткові інструменти

Moom

Moom робить керування вікнами таким же простим, як натискання кнопки миші.

За допомогою Moom можна легко переміщувати та масштабувати вікна до половини екрана, чверті екрана або на весь екран, встановлювати власні розміри та розташування та зберігати макети відкритих вікон для позиціонування одним кліком миші. Спробувавши Moom, ви будете здивовані, як раніше користувалися Mac без нього.

Джерело manytricks.com/moom

CleanShot X

CleanShot X пропонує понад 50 функцій, що робить його, можливо, найкращим інструментом для захоплення зображення екрана.

Джерело cleanshot.com

Sli.dev

Sli.dev — інструмент для створення презентацій. Slidev забезпечує розробникам гнучкість та інтерактивність, щоб зробити їхні презентації ще цікавішими за допомогою інструментів і технологій, з якими вони вже знайомі.

Він не схожий на PowerPoint або Keynote. Вам потрібно самостійно написати розмітку markdown або код html/css (чи навіть компоненти Vue.js). За допомогою таких підходів ви можете контролювати майже кожен аспект презентації, як-от переходи, стилі, текст тощо.

На відміну від схожих на Sli.dev інструментів, на кшталт Spectacle, RevealJS, ImpressJS, перший дає мені змогу з легкістю використовувати css framework Windi CSS, що значно полегшує створення моїх презентацій.

Джерело sli.dev

Notion

Notion — це мультибаза даних для всього, що можна занотувати. Це щось більше, ніж просто документ або таблиця. Notion можна налаштувати відповідно до своїх потреб. Цей застосунок має багато шаблонів та підтримує Kanban або Timeline View, таблиці з відношеннями та обчислювальними полями, командну роботу та багато іншого.

Джерело notion.so

Це все. Вийшов перелік із понад 15 інструментів, які я використовую в щоденній роботі. Переконаний, що вони стануть у пригоді й вам. Буду радий почути ваші рекомендації у коментарях!👇

👍ПодобаєтьсяСподобалось24
До обраногоВ обраному14
LinkedIn
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

Якщо хтось не хоче платити за cleanshot, є досить непоганий аналог shottr

Підтримую. Користувався обома інструментами і обоє роблять свою роботу відмінно, єдине що змусило пересісти з shottr на cleanshot, це постійні рандомні «вильоти» з програми.

2 самі головні інструменти без яких не уявляю свій мак: Alfred та BTT (Better touch tool).
Для прикладу конфіг btt i.imgur.com/zhf4ZWo.png

у мене BTT давно вже встановлено. Не можу зрозуміти його сенсу. Можете поділитися вашим досвідом? Чим ця тулза так необхідна?

1. Жести на тачпаді. (i.imgur.com/TT5wMu8.png)
— свайп 3 пальцями вверх — відкрити вкладку
— свайп 3 пальцями вниз — закрити вкладку
— свайп 3 пальцями вліво та вправо — переміститись на вкладку вліво\вправо
Свайпи з вкладками трігерять шорткати, тому вони роблять практично скрізь а не тількі в браузері. Для цього потрібно змінити жести переключення між десктопами в мак ос на свайпи 4 пальцями.
— тап 3 пальцями: CMD+click (відкрити в новій вкладці)
— клік 4 пальцями — шукати виділенний текст в гугл
— тап 4 пальцями — переключитись між програмами (зручно коли на робочому столі є 2 програми і ти знаєш що завдли переключишся на іншу)
+ ще деякі менш важливі жести

2. Нормальний менеджмент вікон, замінює Moom або інші аналоги
3. Налаштування чутливості жестів під себе
4. Нашалтування шорткатів
Також наприклад можна зробити так звану «hyper key» з капслока www.scoringnotes.com/...​uts-with-bettertouchtool

я Hyper Key + шорткати зробив через звязку Karabiner-Element та Hammerspoon. Там же window-management. Також мови зручно переключаются через корокте натиснення різних command та option keys. Для кожної мови своя окрема кнопка.
А жести 3 пальцями в сторони тільки для того щоб скролити вкладки і заради цього перемапити скрол десктопів на 4 пальця .. — ну хз, якось не дуже.
Тап 4 пальцями може бути корисним.

А жести 3 пальцями в сторони тільки для того щоб скролити вкладки і заради цього перемапити скрол десктопів на 4 пальця .. — ну хз, якось не дуже.

Нуу, на вкус і цвєт як кажуть) Для мене виглядає доволі природньо, що свайи 4-ма пальцями переключення між десктопами, 3-ма пальцями між вкладками, 2-ма пальцями між сторінками (вперед назад). Типу як ідем від загального зниз до конкретного.

Відмовився від Oh My ZSH! при переїзді на новий мак.

Зараз просто юзаю кастомний конфіг, щоб підсвітити гіт в терміналі, набагато все простіше стало і менше конфіжити треба.

Я, особисто, не можу собі уявити життя без zsh-syntax-highlighting та zsh-autosuggestions) Без OMZ це добро не працює

Пораджу альтернативу moon, фрішний Rectangle
github.com/rxhanson/Rectangle

Auto Rename Tag — вже вбудований в vscode Linked editing в Preferences

zsh зараз являється дефолтним шелом на macos, бо остання версія bash вийшла під новою ліцензією GPLv3

Ще недавно знайшов собі корисне розширення для vscode — colorize
marketplace.visualstudio.com/...​ikillerto.vscode-colorize
в сетінгах можна прописати в яких файлах підсвічувати кольори
"colorize.languages": ["typescript", "javascript", "css", "scss"]

Дуже дякую за CleanShot ❤

Давно так не радів від софта за $29. Прямо бомба.

Від себе можу додати 1Password, в якому крім паролів та іншого зараз крутий менеджмент SSH-ключів з автоматичним використанням через біометрію. Ну і CLI та інтеграція з VS Code.

А макос якось взагалі розвивається? Все більше ловлю себе на думці що основною перевагою макос являється... макбук. Якщо треба швидкий, автономний, легкий, тонкий, масовий (а значить довговічна підтримка) ноут з гарним дизайном, хорошим екраном і крутою клавою і трекпадом — альтернатив на вінді тупо немає. Будуть окремі пункти, але не всі одразу.

Развивается)
Но рядовой дев кроме смены волпейперов ничего не заметит.

Xiaomi — по зазначених пунктах різниці нема, теж шукав аналог. по нюансах — батарея здається трохи менше тримає (не заміряв) і періодично шумно охолоджується. хоча останнє може глюк конкретного екземпляра.

Різниці немає якщо оцінювати по фоткам.
У xiaomi ОС інша. І це вже прірва.

Да пофіг на ОС, особливо коли 11 вінда яка не сильно уступає макос а по деяким характеристикам обганяє. Просто напрягає що немає ноутів так же збалансованих як макбуки.

Да вони не ідеальні, також ломаються, клавіші відпадають чи заліпають. Но вони вилизані (відкалібрований екран, чудова клавіатура, прекрасний тачпад). Їх підтримують. Вони продаються багатомільйонними тиражами і виробник (епл) миттєво реагує на будь-які проблеми. А кому яке діло до, скажімо, Dell XPS чи Asus Zenbook 2020 року? Якщо щось станеться, не буде того ж резонансу і виробнику пофіг. Вот у мого хуавея 2 роки назад відвалився сканер відбитків пальців після апдейта вінди — до сих пір не пофіксили. Одні блютус наушники ніяк не можуть підключитися. Більшість драйверів на сайті виробника не обновлялися з 2019 року (ноут 2018 року). Вот напрягає таке відношення.

І в це же час, народ до сих пір працює на макбуках 2016 року і не скаржаться, купують їх на барахолках по ціні нового ксяомі. Да, деякі зараз скажуть що я не леново 2016 року працюю і все норм, но він з тих пір оперативку 2 раза доставляв, ССД міняв, короче це вже не той леново 2016 року ).

У мене є 13-ка, правда 4-літньої давності. Може на бумазі і рендерах це макбук, но в реальності майже нічого спільного. Товстіший, важчий (якщо зрівнювати з Air), дешевий дизайн, звичайна клава, звичайний тачпад, ок швидкодія як для спеків, автононість не вражаюча. Про такі речі як гарантія і багаторічна підтримка я взагалі мовчу. Єдиний плюс що металічний корпус і ціна. Взагалі ксяомі сильно фотошоплять рендери, де ноути такі няшні, прям макбуки, а насправді китайщина, і в півтора рази товстіші ніж на рендерах.

Також є huawei matebook x pro, вот він, на мою думку, найближчий конкрурент макбуків, а по дизайну і габаритам, навіть кращий за макбуки. Вот тільки швидкодія говно, по відчуттям в півтора-два рази гірший ксяомі з тими же спеками, батарея ок, клавіатура звичайна, тачпад говно (не знаю, тачпад винуватий чи вінда, але жести спрацьовують через раз і не такі плавні як на макбуці). Така собі печатна машинка для ютюбчика, все інша це боль і страждання. Правда я брав мінімальну конфігурацію (i5, 8gb, 256gb), но і ціна була $1000 баксів що не дешево.

я брав пятнашку, так що товщина і рендери мені пофіг. клавіатура в сяомі така сама isolated, але краща ніж в мака — на ній є pgup/pgdn/ins/delete які епл не вважає за потрібне додавати. до чутливості тачпада, екрану нема питань. зато ціна — я брав 800 проти 3000.

клавіатура в сяомі така сама isolated, але краща ніж в мака — на ній є pgup/pgdn/ins/delete які епл не вважає за потрібне додавати

Проблема не в розміщені клавіш (хоча у епла вони таке ж як і на більшості ноутів), а у відчуттях від набору. І той досвід який я відчув в епл сторі за 5 хвилин, набагато кращий ніж від мого домашнього ноута, робочого ноута, і 13″ ксяомі який був раніше. Не зря говорять що у макбуків одна з найкращих клавіатур.

зато ціна — я брав 800 проти 3000.

Классика, порівняння ціни самого дешевего ксяомі з самим дорогим еплом. І то, найдешевша ціна яка я бачу це $1000 на алікспресі за і5, 16гб, 512гб:
www.aliexpress.com/...​tem/1005002663792826.html

Що не дотягує по характеристикам і швидкодії даже до базового макбука, що вже говорити про конфігурацію за 3000.

В любому випадку, це об’єктивно гірша машинка, ну відповідно і дешевша. Важко з цим спорити. Може для ваших задач хватає і вам норм, радий за вас, але задача була знайти такий віндоноутбук який би не уступав макбуку по перечисленим характеристикам. А цей уступає мінімум по половині пунктів.

Ось ксяомі ближче до макбука, но і ціна макбучна. Віддавати 2.5к баксів еплу це одне, а ксяомі — зовсім інше. Причому все-рівно не без компромісів — звук говно, автономність в 2 рази гірше. І зарядку треба буде докупляти (ще 100 баксів) так як та що в комплекті — говно.
www.youtube.com/watch?v=gunKwk2dc5k

GitKraken — це інструмент Git GUI, схожий на Atlassian Sourcetree, але потужніший і більш витончений

Якось не виглядає він більш витонченим. SmartGit дивились? Працюю з ним вже багато років, на Win + Mac. На мою думку це must have, якщо працюєте з Git-ом.

Подивився, непогано) Дякую за рекомендацію

а як ви його використовуєте? Я так глянув — вроді все те саме що в мене в webStorm є.
Навіщо тоді окрема тулза?

Я завжди вважав, що краще IDE окремо, а SCM тулзи — окремо. Ще з часів TortoiseSVN. Менше херні в комітах, та більше розуміння, що змінилось та як змінилось. Мержи з конфліктами взагалі не уявляю, як би я робив в IDE.

Так в тому ж webStorn засоби резолву конфліктів уже максимально прокачані по функціоналу і UI.
Інтерфейс з трьома панелями, бокові для конфліктуючих версій, середня для фінального мерджа, куди построчно можна добавляти-видаляти з конфілктуючих версій.
Також є все інше, історія, графічне зображення бранчів, засоби ревʼю ПР-ів, etc

copyclip — clipboard менеджер. Дуже зручно. Може копіювати і не переживати, що останній скопійований текст перетреться.

Дякую за рекомендацію)

А без стороннього софту, макос так не вміє?

copyclip — clipboard менеджер. Можна зберігати останні N скопійованих текстів. Дуже зручно.

Я бы тоже посоветовал fish. Там удобней подсказки/поиск по истории и он сильно дружелюбней для большинства людей.
Еще советую CyberChef gchq.github.io/CyberChef раз уж тут есть Notion который не только приложение macOS

Дякую за CyberChef. Я юзав дещо схоже, але трохи простіше — Boop
github.com/IvanMathy/Boop

Замість moon використовую Magnet, безплатний (але гірший) скріншот — Lightshot.

безкоштовний shiftit багато років і навіть не шукав альтернатив, все керування з клавіатури

Замість zsh + fig + Oh my zsh я використовую fish. Подобається його алгоритм підказки моєї наступної команди. Спочатку він набирає статистику, а потім пропонує доповнювати мої команди. Це як другий пілот. Просто чудово. За кракена дякую, подивлюсь.

який тільки плагінів для vs code не напишуть, аби не купляти вебшторм))

Тоже странно. Когда у тебя зп 2к+ то уже можно выделить 50$ в год на реально крутой инструмент для себя любимого.

сам користуюсь IDE, але vs code — найпопулярніший редактор за всю історію в принципі, тому не очікую, що функціонал IDE зможе відтворити величезну екосистему плагінів.

вебшторм))

Цей трешак ще грошей коштує?)) ппц

Лол. Ну нічого, хлопче, колись доростеш.

І обовязково куплю собі 3 екрана, щоб бути справжнім девелопером!

Иде от Джета сплошь тормозные пожиратели памяти. Потому и пишут)

Warp зайшов, але не вистачає кастомізації. Немає, наприклад, прозорості вікна, а це, як виявилось з iTerm, корисна штука.

це ж мануал читати треба)

Це якраз та штука якою вінда кладе макос на лопатки. Дивно що в епл до сих пір по-нормальному не зробили. Да і взагалі Думаю із-за того, що там історично інша концепція — один екран = одна програма, а переключення між програмами це перелистування екранів. Тому не було необхідності вікна масштабувати.

хорошою і дешевшою альтернативою ngrok є pagekite

Дякую за fig — зайшло

Користуюся 4 місяць з задоволенням. Вже навіть не зручно і не звично, коли встановлюєш, якийсь інструмент яки fig ще не підтримує

Відкрив для себе багато цікавого!

Спасибо за статью, интересно, открыл для себя Volta :)

В качестве альтернативы iTerm порекомендовал бы попробовать Warp, очень удобная штука

Воу, крутая штука, спасибо

Термінал, який не працює без логіну кудись на веб? Чому ні.

Підписатись на коментарі