Increase development productivity in MacOS

Amir Yonatan
Mar 15, 2018 · 3 min read

A few months ago I started working at Wix. Believe it or not, but this is the first time in 13 years of software engineering that I got a MacBook Pro as my workstation.
Throughout this few months I played around with the operating system, and set up my workspace until I finally reached a point where I’m happy with it, so I decided to share a few of my insights with you.

Gestures & Keyboard

In my work, I’m using the Apple’s Trackpad 2, which it’s gestures are absolutely amazing. Although, I found that dragging items is not comfortable, as it requires a tap for selection and then dragging the item. Luckily Ran Yitzhaki showed me how to assign three fingers gestures to dragging:

System Preferences → Accessibility → Mouse & Trackpad → Trackpad Options…

In there, enable Enable dragging, and choose three finger drag.


Regarding the keyboard, first, we need to increase our keyboard response time, under:

System Preferences → Keyboard

Change Key Repeat to Fast, and Delay Until Repeat to Short, as specified .

Second, as a person who English is his 2nd language, my keyboard contains 2 languages. Which means I need a comfortable keyboard shortcut to toggle between them, without overriding a shortcut that is used in my dev tools. I found that Option + Spacebar, is the best combination for my work.
To set up the keyboard shortcut:

System Preferences → Keyboard → Shortcuts tab → Input Sources

Enable Select the previous input source, and set the key combination for Option + Spacebar. Since I only have 2 languages I disabled Select next source in Input menu as it has the same functionality.

Terminal

The builtin terminal in OSX is ok, but I found the is better. Xander Dunn wrote a very good comparison post .

After you , and installing it, I found that these customizations are a must:

  • make iTerm2 Default Term
  • Install Shell Integration
  • In PreferencesGeneral set Quit when all windows are closed
  • In PreferencesGeneral unset Confirm closing multiple sessions
  • In PreferencesGeneral unset Confirm “Quit iTerm” if windows are open
  • In PreferencesGeneral set Check for updates automatically
  • In Preferences → Appearance use Dark theme.
  • In Preferences → Profiles under Working Directory choose Reuse previous session’s directory. This will change the default behaviour when opening a new tab, to start in the current path, and not in the Home Directory.

Zsh, Oh My Zsh

Zsh is a new shell that extends the functionality and user experience over the default macOS shell.

If Zsh is not installed yet:

brew install zsh

Execute this to install Oh My Zsh:

sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

When finished, I suggest adding 3 more plugins:

$ git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlightinggit clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestionsgit clone https://github.com/djui/alias-tips.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/

Then, let’s take a look in Zsh config file:

$ vim ~/.zshrc
  • My favourite theme is: robbyrussell
  • These is my plugins list:
    plugins=(git z zsh-autosuggestions zsh-syntax-highlighting alias-tips npm node osx)

VSCode

is one of the best things that came out of Microsoft in the past few years. It’s a lightweight code editor, with great coding languages support.
As a web developer, I find it increased my productivity and speed very much. The installation can be found .
After installing, I suggest installing these add-ons:

  • Atom One Dark Theme
  • Beautify
  • Debugger for Chrome
  • Import Cost
  • markdownlint
  • npm
  • React Food Truck
  • stylelint
  • TSLint
  • VSCode Great Icons

And use this as configuration:

{  "window.zoomLevel": 1,  "files.autoSave": "onFocusChange",  "editor.fontSize": 15,  "workbench.editor.enablePreview": false,  "editor.tabSize": 2,  "search.exclude": {    "**/node_modules/**": true,    "**/bower_components/**": true,    "**/dist/**": true,    "**/target/**": true  },  "beautify.config": {    "indent_size": 2  },  "terminal.integrated.fontSize": 15,  "typescript.check.npmIsInstalled": false,  "workbench.colorTheme": "Atom One Dark",  "tslint.autoFixOnSave": true,  "eslint.autoFixOnSave": true,  "workbench.startupEditor": "none",  "explorer.confirmDragAndDrop": false,  "explorer.confirmDelete": false,  "workbench.iconTheme": "vscode-great-icons",  "prettier.eslintIntegration": true}

That’s all for now!
I hope you found this post helpful, if you have any comments or any other suggestions let me know.

Amir Yonatan

Written by

FED Guild Master @ Wix