Setting up your JS Dev Env

Install brew

Use brew as your default Mac package manager, that allows you to manage your software by running commands in your terminal.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Get brew help

brew help

Example usage:

  brew search TEXT|/REGEX/
  brew info [FORMULA|CASK...]
  brew install FORMULA|CASK...
  brew update
  brew upgrade [FORMULA|CASK...]
  brew uninstall FORMULA|CASK...
  brew list [FORMULA|CASK...]

Troubleshooting:

  brew config
  brew doctor
  brew install --verbose --debug FORMULA|CASK

Contributing:

  brew create URL [--no-fetch]
  brew edit [FORMULA|CASK...]

Further help:

  brew commands
  brew help [COMMAND]
  man brew
  https://docs.brew.sh

Unleash your terminal

• https://ohmyz.sh

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

Feel free to edit your local ~/.zshrc file to select plugins, themes, and options.

Must-have Dev tools

• https://developer.chrome.com/docs/devtools

brew install --cask visual-studio-code google-chrome chrome-devtools gh docker iterm2

brew install nvm yarn typescript localstack thefuck wtfutil

code ~/.zshrc

In order to use nvm and thefuck you must have to add the following to your local ~/.zshrc file:

export NVM_DIR="$HOME/.nvm"
[ -s "/usr/local/opt/nvm/nvm.sh" ] && . "/usr/local/opt/nvm/nvm.sh" # This loads nvm
[ -s "/usr/local/opt/nvm/etc/bash_completion.d/nvm" ] && . "/usr/local/opt/nvm/etc/bash_completion.d/nvm" # This loads nvm bash_completion

eval $(thefuck --alias)

A initial set of basic aliases

alias cls="clear && pwd"

alias zshconfig="code ~/.zshrc"
alias ohmyzsh="code ~/.oh-my-zsh"

Install the latest LTS release of Node

• https://github.com/nvm-sh/nvm#long-term-support

nvm install --lts

Installing latest LTS version.
...
Now using node v16.14.0 (npm vx.y.z)
Creating default alias: default -> lts/* (-> vx.y.z)

• https://github.com/nvm-sh/nvm#intro

nvm use --lts

Specific Env info

node -v && npm -v && yarn -V && tsc -v

v16.14.0
8.3.1
v1.22.17
4.5.5

code docs

• https://code.visualstudio.com/docs/languages/typescript

(code + prettier) preferences -> settings

(ssh key + ssh-agent) config

• Generating a new ssh key and adding it to the ssh agent

ssh-keygen -t rsa -b 4096 -C "superuser@example.com"

ssh-add --apple-use-keychain ~/.ssh/id_superuser_rsa

git config

git config --global user.name 'superuser' && git config --global user.email 'superuser@example.com'

git config user.name && git config user.email && git config remote.origin.url && git config pull.ff

code ~/.ssh/config

Host *
  AddKeysToAgent yes
  UseKeychain yes
  IdentityFile ~/.ssh/id_superuser_rsa

git config --list

credential.helper=osxkeychain
user.name=superuser
user.email=superuser@example.com

Find the Git config file locations

git config --list --show-origin

file:/Library/Developer/CommandLineTools/usr/share/git-core/gitconfig   credential.helper=osxkeychain
file:/Users/superuser/.gitconfig user.name=superuser
file:/Users/superuser/.gitconfig user.email=superuser@example.com

Get code installed extension list

code --list-extensions

aaron-bond.better-comments
andrew-codes.cypress-snippets
andys8.jest-snippets
ApolloGraphQL.apollo-workbench
apollographql.vscode-apollo
ardevia.sculptui-vscode
christian-kohler.npm-intellisense
CoenraadS.bracket-pair-colorizer-2
docsmsft.docs-yaml
donjayamanne.githistory
dsznajder.es7-react-js-snippets
eamodio.gitlens
EditorConfig.EditorConfig
eg2.vscode-npm-script
esbenp.prettier-vscode
firsttris.vscode-jest-runner
formulahendry.auto-close-tag
formulahendry.auto-rename-tag
GitHub.vscode-pull-request-github
gottfired.css2react
GraphQL.vscode-graphql
hbenl.vscode-test-explorer
IBM.output-colorizer
iceworks-team.iceworks-generator
jalisimo.react-jest-vscode-snippets
kavod-io.vscode-jest-test-adapter
leodevbro.blockman
mhutchie.git-graph
mikestead.dotenv
ms-azuretools.vscode-docker
ms-kubernetes-tools.vscode-kubernetes-tools
ms-vscode-remote.remote-containers
ms-vscode.live-server
ms-vscode.test-adapter-converter
ms-vscode.vscode-typescript-tslint-plugin
ms-vsliveshare.vsliveshare
mtxr.sqltools
naumovs.color-highlight
Orta.vscode-jest
planbcoding.vscode-react-refactor
Prisma.prisma
Qest-cz.react-maker
redhat.vscode-yaml
ritwickdey.LiveServer
streetsidesoftware.code-spell-checker
VisualStudioExptTeam.vscodeintellicode
vscode-icons-team.vscode-icons
wayou.vscode-todo-highlight
willnemo.rtlcheatsheet
wix.glean
xabikos.JavaScriptSnippets
yzhang.markdown-all-in-one

Happy Hacking!