DEV Community

Dmitry Maslov
Dmitry Maslov

Posted on


macOS Tools and Apps for Development in 2022

For along of my dev career I tried to ease my every day routine. I tried lots of tools and apps, different approaches that I found in numerous articles and sources. Not all of them were really useful. Some of them made my routine even more time consuming.

So, today I want to share those tools whitch was really effective to me. Let’s begin.

Terminal Tools


The Package Manager for macOS. Homebrew installs the stuff you need that Apple (or your Linux system) didn’t. It’s similar to apt-get for Ubuntu (any Debian based) Linux.


iTerm2 is a replacement for default macOS’s iTerm2 brings the terminal into the modern age with features you never knew you always wanted. I like that the app has a lot of customization inside. And also check this awesome smooth show/hide effect.
iTerm2 interface

not so smooth on 10fps GIF, yeah? 😂


The Z shell (also known as zsh) is a Unix shell that is built on top of bash (the default shell for macOS) with additional features. ZSH designed for interactive use, although it is also a powerful scripting language.

Oh My ZSH!

Oh My Zsh is a delightful, open source, community-driven framework for managing your Zsh configuration. It comes bundled with thousands of helpful functions, helpers, plugins, themes, and a few things that make you shout.. It has an impressive list of plugins, and nice look themes. As for me, I use the powerlevel10k theme.
powerlevel10k theme look

powerlevel10k theme look


Fig adds VSCode-style autocomplete to your existing terminal. Just look at the gif bellow.

Fig in action

image source

It has common shortcusts (for git, etc). It’s possible to create project shortcuts (To create them, all you need to do is init a .fig folder in your project and then create a _shortcuts.ts completion spec).

Fig autocompete

image source

Also fig can catch your project’s npm scripts up automatically. Or you’re able to create a separated list of autocompletes by adding fig object to package.json file.
Dropdown with commands may look as fancy as bellow.

Fig npm scripts

image source


Volta is a hassle-free way to manage your JavaScript command-line tools. Think about it like “A better NVM”. For example.
Volta's command volta pin node@12 will save the exact version of the Node engine in your package.json so you can commit your selection to git. From that point on, every time you run Node inside your project directory, Volta automatically switches to that same version of Node you chose. Similarly, all your collaborators can do the same by installing Volta on their development machine.


Ngrok allows you to expose a web server running on your local machine to the internet. It’s good for situations when your project is still under development (wasn’t deployed yet):

  • Demo your web project without deploying
  • Build webhook consumers on your dev machine
  • Test mobile apps connected to your locally running backend

The ngrok console UI looks like this.
ngrok console UI

image source

Desktop Apps

VS Code + plugins

VS Code is the most popular editor based on latest (2020) State of JS
state of js chart

image source

My list of VS Code plugins (not all, just most helpful):

  • Auto Close Tag - Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text does.
  • Auto Rename Tag - Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.
  • Bracket Peek - This extensions helps you to view the line of code containing an opening bracket when inspecting the matching closing bracket.
  • GitLens - It supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.
  • Import Cost - This extension will display inline in the editor the size of the imported package.
  • Indent-Rainbow - A simple extension to make indentation more readable.
  • Path Intellisense - A plugin that autocompletes filenames.
  • Project Manager - It helps you to easily access your projects, no matter where they are located.
  • Shortcut Menu Bar - Add 35+ handy buttons like beautify, show opened files, save, toggle terminal, activity bar, Find replace etc to the editor menu bar in VSCode. You can also create your own buttons with custom commands.
  • Thunder Client - It’s a lightweight Rest API Client Extension
  • Trailing Spaces - An extension that allows you to highlight trailing spaces and delete them in a flash!
  • Turbo Console Log - This extension make debugging much easier by automating the operation of writing meaningful log message.


GitKraken is a git GUI tool like Atlassian’s Sourcetree, but more powerful and fancy. I like this tool for:

  • easy to use drag-n-drop in my routine operations like merging branches.
  • It has awesome Soloing mode, where you can see history of certain branch.
  • It has an integrated search by branch name, issues panel, PR creation and managing, etc. Everything in one tool.

GitKraken interface

image source
  • And the killer feature for me is integrated Merge Conflict Resolution (like in WebStorm IDE). No more ugly or expensive separated tools for conflict resolving, everything is out of the box. 😎

GitKraken resolve conflict tool

image source
  • And, of course, 1 click undo for checkout, commit, discard, delete branch, remove remote and reset branch to a commit.

GitKraken undo

image source


ResponsivelyApp is a very helpful application to check how your web app looks in different dimensions. It’s easy to develop you app with this tool, because you’re able to see how your code changes affects view on different screens.
ResponsivelyApp interface

image source


RunJS is a JavaScript playground for your desktop. You can explore and experiment with JavaScript and TypeScript, visualise your ideas and get instant feedback as you type. It’s a very helpful tool for testing some JavaScript code which is longer than 1 line, or creating code snippet, etc. It’s more comfortable to do such operations in this tool than in browser’s DevTools.
runJS interface

image source

Altair GraphQL Client

Altair helps you debug GraphQL queries and implementations - taking care of the hard part so you can focus on actually getting things done.
Altair interface

image source

Extra Tools


Moom makes window management as easy as clicking a mouse button—or using a keyboard shortcut, if you’re one of those types of people.
With Moom, you can easily move and zoom windows to half screen, quarter screen, or fill the screen; set custom sizes and locations, and save layouts of opened windows for one-click positioning. Once you’ve tried Moom, you’ll wonder how you used your Mac without it.
Moom interface

image source

CleanShot X

CleanShot X provides over 50 features making it the ultimate screen capturing tool. It feels like 7 apps in one.
CleanShot X interface

image source is a tool for creating presentations. Slidev aims to provide the flexibility and interactivity for developers to make their presentations even more interesting, expressive, and attractive by using the tools and technologies they are already familiar with. It’s not a desktop app like PowerPoint, or Keynote. You need to write the markdown, or html + css code by yourself (or even Vue.js components if you want). With such frameworks you’re able to control almost every aspect of your presentation like transitions, styles, views, texts, etc. Also it’s a fun to work with this tool for me as a developer. I tried a lot of similar to tools, like spectacle, revealJS, ImpressJS, but I like Windi CSS and want to create stuff with this framework (actually I love the TailwindCSS, but Windi gives me the same experience). example

image source


Notion is a multi database for your everything, that can be notated. It’s more than a doc, or a table. You’re able to customize Notion to work the way you do. It has a lot of templates for every need, supports Kanban, or Timeline View, tables with relations and calculated fields, team collaborations and much more.
Notion interface

image source

That’s it. Thanks for reading. Let me know in comments what tools do you use in your daily dev routine. 👇

Top comments (0)