Mes outils pour développer sur Mac 👩💻 👨💻
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-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
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à ! 👏