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

статті

30.09.2022

Оригінал статті опубліковано на DOU.

Привіт, мене звати Дмитро, я 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