DEV Community

Cover image for Development and productivity tools on Mac πŸ‘©β€πŸ’» πŸ‘¨β€πŸ’»
Demily ClΓ©ment
Demily ClΓ©ment

Posted on • Updated on • Originally published at demily-clement.com

Development and productivity tools on Mac πŸ‘©β€πŸ’» πŸ‘¨β€πŸ’»

Hello everyone ! πŸ‘‹

I recently had to re-install my development environment on Mac. I took the opportunity to sort out the utilities & software that I use on a daily basis. So I share with you this list of tools that allow me to be productive!

How

We will first install Brew, then we will configure our new terminal (iterm2).
Then we will install some interesting extensions of visual studio code.

Brew

Brew is a package manager for mac. It allows you to install command line programs as well as graphics programs. I offer you a small list of utilities & software that 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
Enter fullscreen mode Exit fullscreen mode
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
Enter fullscreen mode Exit fullscreen mode

Iterm2 configuration

Oh my zsh is an open source framework that allows you to easily manage your zsh configuration. You can install themes, plugins ...

Setup

Open Iterm2, and install oh my zsh.

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

then advise you to install the "Powerline Fonts" fonts (here)

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

Vscode configuration

Install extensions

You will find here several types of extensions:

  • Support for languages & snippets (jsx, toml, js, react, rails)
  • Themes & graphic enhancement (material theme, bracket pair colorizer, LogFileHighlighter, rainbow-csv, ...)
  • Productivity (json-pretty-printer, vscode-eslint, guides, vscode-wakatime, ...)
  • git utilities (gitlens, git-graph)
  • New 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
Enter fullscreen mode Exit fullscreen mode

First, run vscode & install vscode in the PATH (more info here)

Then, create the file vs_code_extensions_list.txt with the contents of the extensions. 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
Enter fullscreen mode Exit fullscreen mode

Vscode settings configuration

Here is an excerpt from my settings.json file, which you can use to configure your IDE & 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"
  },
  "files.exclude": {
    "**/.git": true,
    "**/.svn": true,
    "**/.hg": true,
    "**/CVS": true,
    "**/.DS_Store": true
  },
  "files.watcherExclude": {
    "**/.git/objects/**": true,
    "**/.git/subtree-cache/**": true,
    "**/node_modules/*/**": true
  },
  "[ruby]": {
    "editor.defaultFormatter": "jnbt.vscode-rufo"
  },
  "[json]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "gitlens.views.repositories.location": "gitlens",
  "gitlens.views.fileHistory.location": "gitlens",
  "gitlens.views.lineHistory.location": "gitlens",
  "gitlens.views.compare.location": "gitlens",
  "gitlens.views.search.location": "gitlens",
  "gitlens.advanced.messages": {
    "suppressLineUncommittedWarning": true
  },
  "files.autoSave": "off",
  "guides.enabled": false,
  "diffEditor.renderSideBySide": true,
  "extensions.ignoreRecommendations": false,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "git.confirmSync": false,
  "workbench.statusBar.visible": true,
  "git-graph.maxDepthOfRepoSearch": 2,
  "git.showPushSuccessNotification": true,
  "tabnine.experimentalAutoImports": true,
  "auto-rename-tag.activationOnLanguage": [
    "*"
  ],
  "terminal.integrated.fontFamily": "Roboto Mono for Powerline",
  "scm.inputFontFamily": "Roboto Mono for Powerline"
}
Enter fullscreen mode Exit fullscreen mode

And There you go ! πŸ‘

Do not hesitate to suggest tools that are useful to you on a daily basis!

Resources and useful links

Β 

Top comments (0)