Mis herramientas para desarrollar en Mac 👩‍💻 👨‍💻

Sommaire

Procedimiento
Brew
Configuración de Iterm2
Configuración de vscode
Recursos y enlaces útiles

¡Hola a todos! 👋

Recientemente tuve que reinstalar mi entorno de desarrollo en Mac. Aproveché para hacer una gran limpieza de los utilitarios y programas que utilizo a diario. Así que les comparto esta lista de herramientas que me permiten ser productivo!

Procedimiento

Primero instalaremos Brew, luego configuraremos nuestro nuevo terminal ( iterm2 ). Después instalaremos algunas extensiones interesantes de visual studio code.

Brew

Brew es un gestor de paquetes para mac. Permite instalar programas desde la línea de comandos así como programas gráficos. Les comparto una pequeña lista de utilidades y programas que uso a diario.

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

Configuración de Iterm2

Oh my zsh es un framework de código abierto que permite gestionar fácilmente la configuración de zsh. Se pueden instalar temas, plugins ...

Instalación

Abrir Iterm2, e instalar oh my zsh.

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

Les recomiendo luego instalar las fuentes "Powerline Fonts" ( aquí )

Luego deberá cambiar las preferencias y los temas directamente en iterm2 ( menu "session" ) para elegir un tema que le guste con una fuente "Powerline Fonts"

Configuración de vscode

Instalar extensiones

Aquí encontrará varios tipos de extensiones :

Soporte de lenguajes & snippets ( jsx, toml, js, react, rails )
Temas & mejoras gráficas ( material theme, bracket pair colorizer, LogFileHighlighter, rainbow-csv, ... )
Productividad ( json-pretty-printer, vscode-eslint, guides, vscode-wakatime, ... )
Utilidades git ( gitlens, git-graph )
Funcionalidades adicionales ( gc-excelviewer, vscode-docker, vsliveshare, ... )

Archivo: 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 ( instrucciones, aquí )

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

Configuración de vscode

Aquí hay un extracto de mi archivo settings.json, que puede usar para configurar su IDE & sus extensiones.

{
  "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"
  }
}

¡Y eso es todo! 👏

Recursos y enlaces útiles

Comentarios

Cargando...