Mac Setup for Web Development

[SuperAL]

Mac Setup for Web Development

Notes based on the video: Setting up a Mac for Web Development - Homebrew / Terminal / git / Code Editor / Node.js

Steps:

• Spotlight（Shortcut: Command + Space）-> Terminal -> xcode-select --install -> Install

Why we should install this: How to Install Command Line Tools in Mac OS X (Without Xcode)

• /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" Paste that in a macOS Terminal prompt. -> input your computer power-on password

official website: Homebrew

• brew cask install iterm2

official website: iTerm2

• iterm2 profiles -> open profiles -> edit profiles -> 1. General: working directory reuse -> 2. Colors: Foreground green -> 3. Keys: Load Preset Natural Text Editing -> 4. Font: Anonymous Pro

Alt + Arrow Keys can move the cursor in terminal

• bash / zsh / oh my zsh
  brew install bash # update bash

Upgrade to bash4 in MacOSX: sudo vim /etc/shells -> paste this /usr/local/bin/bash and comment others

• brew install git

• brew install vcprompt # to see which branch you are on

• vim .bash_profile -> paste config based on this then save

• brew cask install spectacle

• brew cask install alfred

System Preferences -> Keyboard -> Shortcuts -> Spotlight -> Uncheck shortcut Command + Space -> Change Alfred shortcut to Command + Space

• brew cask install hyperswitch -> set custom shortcuts

• brew cask install google-chrome

Extensions: uBlockOrigin / Privacy Badger / One Tab / Json Viewer / Stylus(userstyles.org) / Vue Devtools / React Devtools

• install nvm: curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash

• install stable version of nodejs: nvm install stable # nvm install <nodejs version>

Put .nvmrc file in the project folder, after cd into this project, the nodejs version will be automatically switched.

• brew cask install visual-studio-code

Use bash command to install all the extensions automatically:
while read line; do code --install-extension "$line"; done < vs-extensions.txt
vs-extensions.txt holds all the extensions' id line by line
VSC Settings Reference：vscode-settings

• npm install -g lite-server eslint tldr

• brew cask install flux

• create .gitignore file in home directory:

node_modules/
.DS_Store

Notes:

command:

1. mkdir dev # create new folder named dev
2. cd dev/ # enter dev folder
3. rm -rf dev/ # delete dev folder
4. touch index.html # create index.html file
5. code . # launch VS Code from the command line within the context of a folder
6. lite-server # open the current project in the browser

vim:

1. Press I -> Insert Mode
2. Enter :wq means write then quit
3. Delete current line: dd

brew:

1. Search app: brew search hyperswitch

VisualStudioCode:

1. Open Setting file: Command + Comma

Websites：

• explainshell
• TLDR

Further:

• Homebrew Bundle