🗓️ 29 Oct 2020·🕑 7 min read

Setup MacOS Buat Development

Berbagai aplikasi dan pengaturan yang saya gunakan di MacOS untuk development, sebagai seorang web developer.

Setup MacOS Buat Development

Photo by Gustavo Espindola

Table Of Contents

Preface

Artikel ini merupakan dokumentasi hidup, artinya ketika saya pakai sesuatu yang baru atau perlu saya tambahkan maka artikel ini bakal saya update juga.

Terakhir diupdate: 24 Desember 2023

Saat tulisan ini pertama ditulis, saya belum tau cara setup aplikasi, konfigurasi, dan tools buat development yang sering saya pakai di Macbook secara cepat. Beberapa kali saya kesulitan ketika harus pegang Macbook dalam keadaan fresh sesuai kebutuhan saya. Entah itu dapet fasilitas dari kantor, habis direset, maupun Macbook baru.

Bahkan pernah saya butuh seharian buat konfigurasi semua yang saya butuhkan, sehingga tidak bisa langsung produktif. Tiap udah ngerasa semuanya komplit, pas kerja ternyata ada yang kurang dan akhirnya kerjaan keganggu karena harus lanjut setup lagi biar kerjanya nyaman.

Artikel ini saya bikin sebagai catatan supaya lebih mudah ketika harus setup ulang nantinya. Karena saya seorang Web Developer, kebanyakan aplikasi dan konfigurasi yang saya lakukan disini bakal seputar JavaScript / NodeJS. Jadi, kalau kamu seseorang yang profesinya sama dengan saya, semoga artikel ini bisa jadi catatanmu juga.

.   .   .

Homebrew

Install Homebrew sebagai package manager di Mac. Cara install Homebrew cukup jelas di websitenya.

Copy
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

.   .   .

Aplikasi Desktop

Aplikasi yang saya digunakan dibagi menjadi dua jenis, yaitu install otomatis melalui Homebrew dan install manual

Install Otomatis

Setelah Homebrew ter-install, saya bisa lanjutkan install semua aplikasi yang saya butuhkan via Homebrew secara otomatis:

Copy
brew install --cask docker google-chrome iterm2 imageoptim kap notion openvpn-connect postman raycast slack spotify sequel-pro visual-studio-code whatsapp

Perintah di atas akan menginstall aplikasi yang saya butuhkan, yaitu:

Program Fungsi
Docker Environment Tool
Google Chrome Web Browser
iTerm2 Alternatif Terminal Bawaan
ImageOptim Image Compressor
Kap Screen Recorder
Notion Aplikasi Catatan
OpenVPN Connect Client Buat Pakai VPN
Postman API Tool
Raycast Launcher
Slack Komunikasi
Spotify Musik
Sequel Pro Database UI
Visual Studio Code Code Editor
Whatsapp Whatsapp Desktop

Install Manual

Karena gak semua aplikasi tersedia di Homebrew Cask secara default, jadi harus install sendiri.

Program Fungsi
Codewhisperer Terminal auto completion
Focus To-Do Pomodoro & Todo App
LogiOptions+ Logitech Mouse App
ObinsKit Anne Pro 2 Keyboard App
XAMPP 7.3.33.0 PHP 7.3 + MySQL Runner

Shell

Saya terbiasa pakai Zsh sebagai Shell utama, untungnya karena MacOS Sonoma sudah include Zsh sebagai default Shell. Jadi tinggal install Oh My Zsh aja supaya semua plugin yang saya butuhkan langsung terinstall.

Install Ohmyzsh

Copy
sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

Ohmyzsh Plugins

Plugin-plugin yang saya sering pakai di ZSH adalah sebagai berikut:

Built-in Plugin

Plugin-plugin yang sudah otomatis ada ketika menginstall Ohmyzsh sehingga tinggal diaktifkan saja

Plugin Fungsi
Alias Finder Untuk mencari alias di Shell
Autojump Lompat direktori di Shell dengan cepat
Copydir Copy path direktori yang aktif ke clipboard
Git Shortcut perintah Git
Yarn Shortcut perintah Yarn
ZSH Interactive CD Navigasi direktori lebih mudah
ZSH Reload Cara cepat reload konfigurasi ZSH

External Plugin

Plugin Ohmzsh yang harus di download manual:

Plugin Fungsi
ZSH Autosuggestions Autocomplete berdasarkan history
ZSH Vim Mode Shell rasa Vim

Setelah memastikan Built-in dan External Plugin di atas telah terinstall, kita tinggal aktifkan plugin-nya di file ~/.zshrc

~/.zshrc
Copy
...

alias af="alias-finder -l"
plugins=( git yarn alias-finder autojump npm zsh_reload copydir zsh-interactive-cd zsh-autosuggestions zsh-vim-mode)
...

Jangan lupa me-reload konfigurasi ~/.zshrc file:

Copy
source ~/.zshrc

Saya pernah membahas tentang plugin-plugin di atas di artikel Koding Lebih Produktif dengan Plugin Terminal

Node.js

Saya memilih buat install Node.js via Node Version Manager (NVM) supaya bisa ganti-ganti versi dengan mudah, karena sering kali saya perlu ganti ke Node versi lama maupun ke Node versi baru. Selain itu, untuk package manager saya masih suka menggunakan Yarn ketimbang NPM karena lebih cepat.

Install NVM & Node.js

Install NVM

Copy
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.36.0/install.sh | bash

Install Node Terbaru

Copy
nvm install node

Ganti Versi Node

Copy
nvm install xx.xx && nvm use xx.xx

Lalu set yang barusan di install sebagai default

Copy
nvm alias default xx.xx

Install Yarn via Homebrew

Copy
brew install yarn

Git

Instalasi dan Konfigurasi Git

Install

Install Git via Homebrew:

Copy
brew install git

Setelah Git terinstall, pastikan atur profil di konfigurasi global

Copy
git config --global user.name "Nama Lengkap" && git config --global user.email "alamatemail@mail.com"

Git Syntax Highlighter

Saya juga suka menggunakan Delta untuk keperluan syntax highlighter di Git supaya lebih nyaman ketika melakukan git diff atau git show.

Install Delta:

Copy
brew install git-delta

Lalu edit file ~/.gitconfig. Biasanya untuk konfigurasinya saya seperti ini saja.

~/.gitconfig
Copy
[core]
    pager = delta

[interactive]
    diffFilter = delta --color-only

[delta]
    navigate = true

[merge]
    conflictstyle = diff3

[diff]
    colorMoved = default

Klik disini untuk lihat apa saja konfigurasi yang tersedia.

System Settings

Bagian ini saya menggunakan MacOS Sonoma dan tergantung preferensi masing-masing…

Desktop & Dock

  • Set “Default web browser” menjadi Google Chrome
  • Disable “Show suggested and recent apps in Dock” supaya jumlah Dock konsisten
  • Sesuaikan size Dock jadi lebih kecil karena size default menurut saya kebesaran

Accessibility

  • Buka “Pointer Control” > “Trackpad Options”, dan set “Dragging Style” menjadi “Three Finger Drag” supaya bisa drag-n-drop pakai tiga jari.

Trackpad

  • Centang “Tap to click” supaya tidak perlu selalu menekan Trackpad untuk klik

Keyboard

Walaupun bahasa yang saya pakai di Mac Bahasa Inggris, saya harus memastikan pengaturan berikut mati supaya tiap kali menulis kata Bahasa Indonesia, Mac gak berusaha ngubah jadi suatu kata yang dia rasa benar.

Di bagian “Input Sources”, klik “Edit” lalu atur opsi berikut:

  • Disable “Show Input menu in menu bar”
  • Disable “Correct spelling automatically”
  • Disable “Capitalize words automatically”
  • Disable “Show inline predictive text”
  • Disable “Add perios with double-space”
  • Disable “Use smart quotes and dashes”

Misc

Pengaturan lain

Cara cepat akses screenshots

  1. Bikin folder bernama “Screenshots” di Desktop
  2. Tekan tombol Cmd + Shift + 5. Trus klik “Options” > “Other Location”
  3. Pilih Folder yang udah dibikin di step 1
  4. Tekan tombol Esc buat keluar dari screenshot setting
  5. Buka Finder, cari folder “Screenshots” di Desktop, trus drag folder nya ke Dock
  6. Posisi foldernya udah di Dock, klik kanan di foldernya trus centang “Fan” di bagian “view content as” & centang “Name” di bagian “sort by”

Gambar 1: Akses screenshot dengan cepat


Bagikan:  
   

Komentar

Copyright © 2024 Tri Hargianto