My tools for developing on Mac 👩‍💻 👨‍💻

Sommaire

Workflow
Brew
iTerm2 Configuration
VSCode Configuration
Useful resources and links

Hello everyone! 👋

I recently had to reinstall my development environment on Mac. I took the opportunity to do a major cleanup of the utilities & software I use daily. I'm sharing this list of tools that help me stay productive!

Workflow

We will first install Brew, then we will configure our new terminal ( iterm2 ). Then we will install some interesting extensions for Visual Studio Code.

Brew

Brew is a package manager for Mac. It allows installing command-line programs as well as graphical applications. Here is a short list of utilities & software I use daily.

brew install \
  nvm # node version manager
  nmap # network utils
  curl # make resquests via terminal
  jsonpp # json pretty print
  imagemagick # image utils
  catimg # cat image in terminal
  dive # inspect docker images
  git # Source Control Manager

brew cask install
  cakebrew # homebrew GUI
  google-chrome	# web browser
  visual-studio-code # IDE
  imageoptim # optimize pictures utils
  mtmr # touchbar utils
  postman # request API utils
  graphiql # same as postman, but specific for graphql
  docker # Docker desktop
  iterm2 # Alternative terminal
  psequel	# Postgres GUI interface

iTerm2 Configuration

Oh my zsh is an open-source framework that makes it easy to manage your zsh configuration. You can install themes, plugins ...

Installation

Open Iterm2, and install oh my zsh.

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

I then recommend installing the "Powerline Fonts" font set ( here )

You will then need to change the preferences and themes directly in iterm2 ( menu "session" ) to choose a theme you like with a "Powerline Fonts" font

VSCode Configuration

Install extensions

Here you will find several types of extensions :

Language support & snippets ( jsx, toml, js, react, rails )
Themes & visual enhancements ( material theme, bracket pair colorizer, LogFileHighlighter, rainbow-csv, ... )
Productivity ( json-pretty-printer, vscode-eslint, guides, vscode-wakatime, ... )
Git utilities ( gitlens, git-graph )
Additional features ( gc-excelviewer, vscode-docker, vsliveshare, ... )

File: vs_code_extensions_list.txt

blanu.vscode-styled-jsx
bungcip.better-toml
CoenraadS.bracket-pair-colorizer
DavidAnson.vscode-markdownlint
dbaeumer.vscode-eslint
eamodio.gitlens
emilast.LogFileHighlighter
Equinusocio.vsc-community-material-theme
Equinusocio.vsc-material-theme
equinusocio.vsc-material-theme-icons
euskadi31.json-pretty-printer
esbenp.prettier-vscode
formulahendry.auto-rename-tag
GrapeCity.gc-excelviewer
HookyQR.beautify
Hridoy.rails-snippets
karigari.chat
kisstkondoros.vscode-gutter-preview
mechatroner.rainbow-csv
mhutchie.git-graph
mikestead.dotenv
ms-azuretools.vscode-docker
MS-CEINTL.vscode-language-pack-fr
ms-vsliveshare.vsliveshare
ms-vsliveshare.vsliveshare-audio
ms-vsliveshare.vsliveshare-pack
slevesque.vscode-zipexplorer
spywhere.guides
TabNine.tabnine-vscode
WakaTime.vscode-wakatime
wix.vscode-import-cost
xabikos.JavaScriptSnippets
xabikos.ReactSnippets

First, launch vscode & install vscode into the PATH ( instructions here )

Then, create the file vs_code_extensions_list.txt with the extensions' content. Then run the following command, which will install the extensions listed in this file.

cat vs_code_extensions_list.txt | xargs -n 1 code --install-extension

VSCode configuration

Here is an excerpt from my settings.json file, which you can use to configure your IDE & your extensions.

{
  "window.zoomLevel": 1,
  "breadcrumbs.enabled": true,
  "workbench.colorTheme": "Dracula",
  "editor.fontSize": 15,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.wordWrapColumn": 100,
  "editor.minimap.enabled": false,
  "editor.smoothScrolling": false,
  "editor.minimap.showSlider": "mouseover",
  "editor.minimap.maxColumn": 120,
  "editor.cursorStyle": "block",
  "editor.cursorBlinking": "phase",
  "editor.insertSpaces": true,
  "terminal.external.osxExec": "iTerm.app",
  "terminal.integrated.shell.osx": "zsh",
  "files.associations": {
    "*.inky": "slim",
    "*.js": "javascriptreact"
  }
}

And that's it! 👏