macOS Ventura: Set up a Mac for Development

Cover Image for macOS Ventura: Set up a Mac for Development
Lauro Silva

This setup works for me. It’s opinionated. The intention is that by outlining in detail my development processes, I’ll evaluate and refine my work environment.

Set System Preferences

Make sure you’re using the latest OS. Currently, it’s macOS Ventura and you can download the open beta from here.

From System Settings → Desk and Dock:

  • Remove most applications from the Dock
  • "Double-click a window's title bar" off
  • Automatic Hide
  • Smaller Dock
  • "Show recent applications in Dock" off
  • "Show indicators for open applications" off
  • "Automatically rearrange Spaces based on most recent use" off
  • "Automatically hide and show the menu bar" always

From System Settings → Appearance:

  • "Appearance" set to Dark
  • "Accent color" set to gray
  • "Show Icon size" set to small
  • "Allow wallpaper tinting in windows" turn on

From System Settings → Control Center → Battery

  • "Show Percentage" turn on

From System Settings → Control Center → Clock

  • Set to 24-hour clock
  • Show date "Always"
  • Disable "Show the day of the week"

From System Settings → Keyboard

  • "Key repeat rate" set to fastest

From System Settings → Keyboard → All input Sources

  • disable "Correct spelling automatically"
  • disable "Capitalize words automatically"
  • disable "Use smart quotes and dashes"
  • use ” for double quotes
  • use ’ for single quotes

From System Settings → Trackpad

  • “Tracking Speed” set to the fastest
  • “Click” set to lightest

From System Settings → Notifications

  • Turn off every notification, except for calendar (I use Cron)
  • "Allow notification when the display is sleeping" off
  • "Allow notifications when the screen is locked" off
  • "Allow notifications when mirroring or sharing the display" off

From System Settings → Siri

  • Disable

From System Settings → iCloud

  • Turn off everything except "Photos", "Contacts", "Notes" and "Messages”

From System Settings → Spotlight

  • Disable all Spotlight applications (I use RayCast)

From Finder → Settings

  • On the sidebar hide all items except "AirDrop" "Applications" "Documents" "Downloads" and “Desktop”
  • Hide all tags
  • Show all Filename Extensions
  • Select “Remove Items from Bin after 30 Days”

Set System Preferences From the Terminal

Update the computer name:

sudo scutil --set ComputerName "newname"
sudo scutil --set LocalHostName "newname"
sudo scutil --set HostName "newname"

Do not open previous previewed files (e.g. PDFs) when opening a new one:

defaults write com.apple.Preview ApplePersistenceIgnoreState YES

Show Library folder:

chflags nohidden ~/Library

Show hidden files:

defaults write com.apple.finder AppleShowAllFiles YES

Show path bar:

defaults write com.apple.finder ShowPathbar -bool true

Show status bar:

defaults write com.apple.finder ShowStatusBar -bool true

Install Homebrew

Homebrew is a package management system that simplifies the installation of software on Apple's operating system. Install homebrew with the following:

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

You will install the following terminal applications:

brew install \
  wget \
  exa \
  git \
  nvm \
  pnpm \

You can also install GUI applications using homebrew. We’ll install the following applications:

brew install --cask \
  dropbox \
  cron \
  slack \
  visual-studio-code \
  zoom \
  1Password \
  discord \
  notion \
  hazeover \
  cleanshot \
  loom \

Useful tip. You can update everything using the following command:

brew update && brew upgrade && brew cleanup && brew doctor

Setup Git & GitHub CLI

The GitHub CLI is a command-line interface to GitHub for use in your terminal or your scripts. We’ll install it with the following command:

brew install gh

Login: 

gh auth login

Set global name and email:

git config --global user.name "Your Name"
git config --global user.email "you@your-domain.com"

We can improve git’s log with the following config:

git config --global alias.lg "log --color --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit"

Inside a git repository, you can now use git lg.

Set default branch to main:

git config --global init.defaultBranch main

Print global git configuration (double-check that everything looks good):

git config --list
# or alias
# gitconfig

We’ll also create a global git ignore. Start by creating a .gitignore:

touch ~/.gitignore

Then open and edit the file using vim or your code editor and add the following:

# Folder view configuration files
.DS_Store
Desktop.ini

# Thumbnail cache files
._*
Thumbs.db

# Files that might appear on external disks
.Spotlight-V100
.Trashes

# Compiled Python files
*.pyc

# Compiled C++ files
*.out

# Application specific files
venv
node_modules
.sass-cache

# VSCode
.vscode/

# npm
npm-debug.log

# yarn
yarn-error.log

# eslint
.eslintcache

# General
.DS_Store
.AppleDouble
.LSOverride

# Icon must end with two \r
Icon

# Thumbnails
._*

# Files that might appear in the root of a volume
.DocumentRevisions-V100
.fseventsd
.Spotlight-V100
.TemporaryItems
.Trashes
.VolumeIcon.icns
.com.apple.timemachine.donotpresent

# Directories potentially created on remote AFP share
.AppleDB
.AppleDesktop
Network Trash Folder
Temporary Items
.apdisk

Set to ignore in all git repositories:

git config --global core.excludesfile ~/.gitignore

Install Node.js

Install nvm. Node Version Manager (NVM), as the name implies, is a tool for managing Node versions on your device. This will make it easy to switch between node versions.

brew install nvm

Add nvm.sh:

source ~/.nvm/nvm.sh

Install the latest version:

nvm install node

Set the latest version to default:

nvm use node

Confirm that you're causing the latest version:

node -v && npm -v

Browser

I use Arc as my main browser. It’s fantastic.

Fonts

I use Apple’s SF Mono fonts for my editor and terminal’s fonts. You can download Apple fonts here.

Editor

I use the following VS Code extensions:

material-icon-theme
auto-rename-tag
prettier-vscode
vscode-eslint
night-owl-x-one-dark
rainbow-brackets
prettier-vscode
vscode-tailwindcss
github.copilot
github.copilot-labs

My VS Code settings are the following:

{
  "editor.accessibilitySupport": "off",
  "terminal.integrated.env.osx": {
    "FIG_NEW_SESSION": "1"
  },
  "workbench.colorTheme": "Night Owl X One Dark",
  "material-icon-theme.folders.color": "#42a5f5",
  "workbench.iconTheme": "material-icon-theme",
  "editor.minimap.enabled": false,
  "workbench.sideBar.location": "right",
  "workbench.editor.enablePreview": false,
  "editor.inlineSuggest.enabled": true,
  "editor.fontFamily": "SF Mono, Menlo, Monaco, 'Courier New', monospace",
  "editor.fontSize": 13,
  "terminal.integrated.fontFamily": "SF Mono, Menlo, Monaco, 'Courier New', monospace",
  "terminal.integrated.fontSize": 13,
  "window.zoomLevel": 1,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.detectIndentation": true,
  "editor.lightbulb.enabled": false,
  "editor.fontLigatures": false,
  "editor.rulers": [80],
  "editor.snippetSuggestions": "inline",
  "editor.suggest.showKeywords": false,
  "editor.wordBasedSuggestions": false,
  "editor.suggest.localityBonus": true,
  "editor.acceptSuggestionOnCommitCharacter": false,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.suggestSelection": "recentlyUsed"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.suggestSelection": "recentlyUsed"
  },
  "editor.tabSize": 2,
  "editor.renderWhitespace": "boundary",
  "editor.glyphMargin": false,
  "editor.folding": false,
  "files.exclude": {
    "**/.env": true,
    "USE_GITIGNORE": true
  },
  "files.associations": {
    "*.md": "mdx"
  },
  "files.defaultLanguage": "{activeEditorLanguage}",
  "javascript.validate.enable": false,
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/coverage": true,
    "**/dist": true,
    "**/build": true,
    "**/.build": true,
    "**/.gh-pages": true
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "eslint.options": {
    "overrideConfig": {
      "rules": {
        "no-debugger": "off"
      }
    }
  },
  "terminal.integrated.scrollback": 10000,
  "explorer.openEditors.visible": 0,
  "editor.lineNumbers": "on",
  "workbench.startupEditor": "none",
  "workbench.panel.defaultLocation": "right",
  "workbench.editor.limit.enabled": true,
  "workbench.editor.limit.perEditorGroup": false,
  "workbench.editor.limit.value": 10,
  "debug.javascript.codelens.npmScripts": "never",
  "breadcrumbs.enabled": false,
  "npm.runSilent": true,
  "explorer.confirmDragAndDrop": false,
  "editor.multiCursorModifier": "ctrlCmd",
  "editor.formatOnPaste": false,
  "javascript.updateImportsOnFileMove.enabled": "never",
  "typescript.updateImportsOnFileMove.enabled": "never",
  "editor.cursorSmoothCaretAnimation": true,
  "editor.smoothScrolling": true,
  "editor.suggestSelection": "first",
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "eslint.packageManager": "npm",
  "npm.packageManager": "npm",
  "editor.acceptSuggestionOnEnter": "on",
  "editor.tokenColorCustomizations": {
    "textMateRules": []
  },
  "workbench.statusBar.visible": false,
  "editor.cursorBlinking": "solid",
  "editor.formatOnSave": true,
  "emmet.showAbbreviationSuggestions": false,
  "emmet.showExpandedAbbreviation": "never",
  "github.copilot.enable": {
    "*": true,
    "yaml": false,
    "plaintext": false,
    "markdown": false,
    "jsonc": false,
    "mdx": true,
    "typescriptreact": true
  },
  "git.autofetch": true
}

Hyper.js

Install Hyper Terminal:

brew install --cast hyper

Install hyper-night owl:

hyper i hyper-night-owl

Install Fig - context-aware autocomplete for your terminal:

brew install fig

Sign in to Fig and install Spaceship Prompt a minimalistic, powerful, and extremely customizable Zsh prompt.

Update fonts in Hyper.js. Open .hyper.js:

code ~/.hyper.js

Replace the existing settings with the following:

"use strict";
// Future versions of Hyper may add additional config options,
// which will not automatically be merged into this file.
// See https://hyper.is#cfg for all currently supported options.
module.exports = {
    config: {
        // choose either `'stable'` for receiving highly polished,
        // or `'canary'` for less polished but more frequent updates
        updateChannel: 'stable',
        // default font size in pixels for all tabs
        fontSize: 15,
        // font family with optional fallbacks
        fontFamily: 'SF Mono, "DejaVu Sans Mono", Consolas, "Lucida Console", monospace',
        // default font weight: 'normal' or 'bold'
        fontWeight: 'normal',
        // font weight for bold characters: 'normal' or 'bold'
        fontWeightBold: 'bold',
        // line height as a relative unit
        lineHeight: 1.2,
        // letter spacing as a relative unit
        letterSpacing: 0,
        // terminal cursor background color and opacity (hex, rgb, hsl, hsv, hwb or cmyk)
        cursorColor: 'rgba(248,28,229,0.8)',
        // terminal text color under BLOCK cursor
        cursorAccentColor: '#000',
        // `'BEAM'` for |, `'UNDERLINE'` for _, `'BLOCK'` for █
        cursorShape: 'BLOCK',
        // set to `true` (without backticks and without quotes) for blinking cursor
        cursorBlink: false,
        // color of the text
        foregroundColor: '#fff',
        // terminal background color
        // opacity is only supported on macOS
        backgroundColor: '#000',
        // terminal selection color
        selectionColor: 'rgba(248,28,229,0.3)',
        // border color (window, tabs)
        borderColor: '#333',
        // custom CSS to embed in the main window
        css: '',
        // custom CSS to embed in the terminal window
        termCSS: '',
        // set custom startup directory (must be an absolute path)
        workingDirectory: '',
        // if you're using a Linux setup which show native menus, set to false
        // default: `true` on Linux, `true` on Windows, ignored on macOS
        showHamburgerMenu: '',
        // set to `false` (without backticks and without quotes) if you want to hide the minimize, maximize and close buttons
        // additionally, set to `'left'` if you want them on the left, like in Ubuntu
        // default: `true` (without backticks and without quotes) on Windows and Linux, ignored on macOS
        showWindowControls: '',
        // custom padding (CSS format, i.e.: `top right bottom left`)
        padding: '14px 14px',
        // the full list. if you're going to provide the full color palette,
        // including the 6 x 6 color cubes and the grayscale map, just provide
        // an array here instead of a color map object
        colors: {
            black: '#000000',
            red: '#C51E14',
            green: '#1DC121',
            yellow: '#C7C329',
            blue: '#0A2FC4',
            magenta: '#C839C5',
            cyan: '#20C5C6',
            white: '#C7C7C7',
            lightBlack: '#686868',
            lightRed: '#FD6F6B',
            lightGreen: '#67F86F',
            lightYellow: '#FFFA72',
            lightBlue: '#6A76FB',
            lightMagenta: '#FD7CFC',
            lightCyan: '#68FDFE',
            lightWhite: '#FFFFFF',
            limeGreen: '#32CD32',
            lightCoral: '#F08080',
        },
        // the shell to run when spawning a new session (i.e. /usr/local/bin/fish)
        // if left empty, your system's login shell will be used by default
        //
        // Windows
        // - Make sure to use a full path if the binary name doesn't work
        // - Remove `--login` in shellArgs
        //
        // Windows Subsystem for Linux (WSL) - previously Bash on Windows
        // - Example: `C:\\Windows\\System32\\wsl.exe`
        //
        // Git-bash on Windows
        // - Example: `C:\\Program Files\\Git\\bin\\bash.exe`
        //
        // PowerShell on Windows
        // - Example: `C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe`
        //
        // Cygwin
        // - Example: `C:\\cygwin64\\bin\\bash.exe`
        shell: '',
        // for setting shell arguments (i.e. for using interactive shellArgs: `['-i']`)
        // by default `['--login']` will be used
        shellArgs: ['--login'],
        // for environment variables
        env: {},
        // Supported Options:
        //  1. 'SOUND' -> Enables the bell as a sound
        //  2. false: turns off the bell
        bell: 'SOUND',
        // An absolute file path to a sound file on the machine.
        // bellSoundURL: '/path/to/sound/file',
        // if `true` (without backticks and without quotes), selected text will automatically be copied to the clipboard
        copyOnSelect: false,
        // if `true` (without backticks and without quotes), hyper will be set as the default protocol client for SSH
        defaultSSHApp: true,
        // if `true` (without backticks and without quotes), on right click selected text will be copied or pasted if no
        // selection is present (`true` by default on Windows and disables the context menu feature)
        quickEdit: false,
        // choose either `'vertical'`, if you want the column mode when Option key is hold during selection (Default)
        // or `'force'`, if you want to force selection regardless of whether the terminal is in mouse events mode
        // (inside tmux or vim with mouse mode enabled for example).
        macOptionSelectionMode: 'vertical',
        // Whether to use the WebGL renderer. Set it to false to use canvas-based
        // rendering (slower, but supports transparent backgrounds)
        webGLRenderer: true,
        // keypress required for weblink activation: [ctrl|alt|meta|shift]
        // todo: does not pick up config changes automatically, need to restart terminal :/
        webLinksActivationKey: '',
        // if `false` (without backticks and without quotes), Hyper will use ligatures provided by some fonts
        disableLigatures: true,
        // set to true to disable auto updates
        disableAutoUpdates: false,
        // set to true to enable screen reading apps (like NVDA) to read the contents of the terminal
        screenReaderMode: false,
        // set to true to preserve working directory when creating splits or tabs
        preserveCWD: true,
        // for advanced config flags please refer to https://hyper.is/#cfg
    },
    // a list of plugins to fetch and install from npm
    // format: [@org/]project[#version]
    // examples:
    //   `hyperpower`
    //   `@company/project`
    //   `project#1.0.1`
    plugins: ["hyper-night-owl"],
    // in development, you can create a directory under
    // `~/.hyper_plugins/local/` and include it here
    // to load it and avoid it being `npm install`ed
    localPlugins: [],
    keymaps: {
    // Example
    // 'window:devtools': 'cmd+alt+o',
    },
};
//# sourceMappingURL=config-default.js.map

Folder Structure

Set up a directory structure with the following naming convention at the root directory using the Finder:

  • 1-projects
  • 2-areas
  • 3-resources
  • 4-archive

Every web development repo goes into 1-project and you add the folder at the root directory of the user profile. The rest of the folders go into dropbox. You should have dropbox synced into your desktop. Everything that’s code-related (mostly repos) goes into the first folder and the rest in to Dropbox.