Bonjour à tous ! 👋

J'ai récemment dû ré-installer mon environnement de développement sur Mac. J'en ai profité pour faire un gros tri sur les utilitaires & logiciels que j'utilise au quotidien. Je vous partage donc cette liste d'outils qui me permet d'être productif !

Cheminement

Nous allons tout d'abord installer Brew, puis nous configurerons notre nouveau terminal ( iterm2 ). Ensuite nous installerons quelques extensions interessantes de visual studio code.

Brew

Brew est un gestionnaire de package pour mac. Il permet d'installer des programmes en ligne de commande ainsi que des programmes graphiques. Je vous propose une petite liste d'utilitaires & logiciels qui me servent quotidiennement.

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

Configuration de Iterm2

Oh my zsh est un framework open source qui permet de facilement gérer sa configuration zsh. On peut installer des thèmes, plugins ...

Installation

Ouvrir Iterm2, et installer oh my zsh.

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

Je vous conseille ensuite d'installer les polices d'écriture "Powerline Fonts" ( ici )

Il vous faudra ensuite changer les préférences et les thèmes directement sur iterm2 ( menu "session" ) pour choisir un thème qui vous plait avec une police d'écriture "Powerline Fonts"

Configuration de vscode

Installer des extensions

Vous retrouverez ici plusieurs types d'extensions :

  • Prise en charge de langages & snippets ( jsx, toml, js, react, rails )
  • Thèmes & amélioration graphique ( material theme, bracket pair colorizer, LogFileHighlighter, rainbow-csv, ... )
  • Productivité ( json-pretty-printer, vscode-eslint, guides, vscode-wakatime, ... )
  • Utilitaires git ( gitlens, git-graph )
  • Ajout de fonctionnalités ( gc-excelviewer, vscode-docker, vsliveshare, ... )

Fichier: vs_code_extensions_list.txt

blanu.vscode-styled-jsxbungcip.better-tomlCoenraadS.bracket-pair-colorizerDavidAnson.vscode-markdownlintdbaeumer.vscode-eslinteamodio.gitlensemilast.LogFileHighlighterEquinusocio.vsc-community-material-themeEquinusocio.vsc-material-themeequinusocio.vsc-material-theme-iconseuskadi31.json-pretty-printeresbenp.prettier-vscodeformulahendry.auto-rename-tagGrapeCity.gc-excelviewerHookyQR.beautifyHridoy.rails-snippetskarigari.chatkisstkondoros.vscode-gutter-previewmechatroner.rainbow-csvmhutchie.git-graphmikestead.dotenvms-azuretools.vscode-dockerMS-CEINTL.vscode-language-pack-frms-vsliveshare.vslivesharems-vsliveshare.vsliveshare-audioms-vsliveshare.vsliveshare-packslevesque.vscode-zipexplorerspywhere.guidesTabNine.tabnine-vscodeWakaTime.vscode-wakatimewix.vscode-import-costxabikos.JavaScriptSnippetsxabikos.ReactSnippets

Tout d'abord, lancer vscode & installer vscode dans le PATH ( marche à suivre, ici )

Ensuite, créer le fichier vs_code_extensions_list.txt avec le contenu des extensions. Exécuter ensuite la commande suivante, qui va installer les extensions listées dans ce fichier.

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

Configuration de vscode

Voici un extrait de mon fichier settings.json, que vous pouvez utiliser pour configurer votre IDE & vos 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"  }}

Et voilà ! 👏

Resources et liens utiles