Demily Clément
Posted on July 24, 2020
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
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 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)"
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
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
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"
}
And There you go ! 👏
Do not hesitate to suggest tools that are useful to you on a daily basis!
Resources and useful links
Posted on July 24, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related