Build a Mac front-end environment

Hello everyone, here I am again. After several months of internship in Didi, I changed my internship to another company and got a new Mac. Therefore, I recorded the process of configuring the basic front-end development environment for myself, which can also be a reference for some friends who need it. Hope can help to big 🏠

Homebrew

Getting a new Mac requires installing all the usual software. The first recommended installation is Homebrew.

Homebrew official website

Command + space, and then terminal, The console input/bin/bash – c “$(curl – fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)” then can be installed

When the installation is complete, this will be displayed

After the installation success message is displayed, you can configure the path.

Echo ‘eval “$(/opt/homebrew/bin/brew shellenv)”‘ >> /Users/

Eval “$(/opt/homebrew/bin/brew shellenv)”

After completing the above two steps, the console enters breW-v with the version number and the configuration is successful

Git environment

After homebrew is installed, Git can be installed using Homebrew. Git installation official website

Console type brew install git

If the installation is successful, type git –version at the end to see the version number

Initialize the

Once git is installed, initialize it. When using Git for the first time, we need to configure the user name and email for Git. The user and email can use github or your company’s GitLab warehouse account

Configuring a User Name

git config --global user.name "Username"
Copy the code

Configure your email

git config --global user.email "Email address"
Copy the code

Once this is configured, we can type in and see all of our configuration information, and then see if user.name and user.email are configured correctly

git config -l
Copy the code

Then you can configure the SSH key. The SSH key allows a secure connection to be established between the system and GitLab. Using HTTPS requires frequent password input when uploading code, whereas using SSH eliminates this step.

  • Check whether the SSH secret key exists. Console input:cat ~/.ssh/id_rsa.pub
  • If the key does not exist, you need to generate an SSH key. Execute the commandSsh-keygen -t rsa -c "email address"
  • Add an SSH key on Gitlab. Run the following command to view the public key:cat ~/.ssh/id_rsa.pub“, and then copy the large string that is displayed
  • Open GitLab and find the SSH Keys under Profile Settings. In Add an SSH Key, paste the string key you just copied into the key box. Under Title, set a nice name for the key and click Add Key.

Console optimization

zsh

ZSH (Z-shell) is a shell designed for interactive use and can also be used as a script interpreter. It contains many of the best features found in bash, KSH, TCSH and other shells, as well as many of its own. Starting with MacOS Catalina, the default shell was changed from bash to ZSH.)

If the ZSH currently installed on your machine is not the latest version (ZSH –version views the current version), you can use Brew Install ZSH to install it.

oh-my-zsh

Download website

  • Compatible with bash

  • Automatic CD: Just enter the name of the directory

  • Command option completion: for example, enter git and press Tab to display what commands git has

  • One-time directory completion: For example, if you enter Doc/ Doc and press Tab, Documents/document/ will automatically change

    Various enhancement plug-ins and beautification theme support

When you see this, the installation is successful.

ZSH enhancement plug-in is commonly used

ZSH -syntax- Highlighting plugin

Enter the following commands in sequence

git clone https://github.com/zsh-users/zsh-syntax-highlighting.git 
Copy the code
vim ~/.zshrc
Copy the code

Find plugins=(git) in the file, parentheses are the list of plugins, git is the default plug-in installed. Add the plug-in

plugins=(
  git
  zsh-syntax-highlighting
)
Copy the code

Make plug-ins work

source ~/.zshrc
Copy the code

Zsh-autosuggestions Automatic path completion

When you enter the command, it will prompt automatic completion (gray command prompt will appear, you have accessed the command), and then press the keyboard → (right direction key)

git clone git://github.com/zsh-users/zsh-autosuggestions $ZSH_CUSTOM/plugins/zsh-autosuggestions
Copy the code
vim ~/.zshrc
Copy the code

Find the plugins in the file and add

plugins=(
  git
  zsh-syntax-highlighting
  zsh-autosuggestions
)
Copy the code

Make plug-ins work

source ~/.zshrc
Copy the code

Autojump plugin

To quickly jump between directories, you can go directly to the j + directory name, or you can open the Jo + directory name in the Finder instead of frequent CDS

The installation

brew install autojump
Copy the code
vim ~/.zshrc
Copy the code

Find the plugins in the file and add

plugins=(
  git
  zsh-syntax-highlighting
  zsh-autosuggestions
  autojump
)
Copy the code

Then add it at the end of the ZSHRC file (the last line)

[[ -s $(brew --prefix)/etc/profile.d/autojump.sh ]] && . $(brew --prefix)/etc/profile.d/autojump.sh
source $ZSH/oh-my-zsh.sh
Copy the code

Make plug-ins work

source ~/.zshrc
Copy the code

Node Environment Installation

Mainly Node and common tools

brew install node
Copy the code

After the installation is complete, enter node -v to display the version number

Node version management tool installed

brew install nvm
Copy the code

Then follow the installation prompts to create the.nvm directory

mkdir ~/.nvm
Copy the code

Edit the ~/.zshrc configuration file

vim ~/.zshrc 
Copy the code

Add the following to the ~/.zshrc configuration file, the last line

export NVM_DIR="$HOME/.nvm" [ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && . "/opt/homebrew/opt/nvm/nvm.sh" # This loads nvm [  -s "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm" ] && . "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm" # This loads nvm bash_completionCopy the code

Make the configuration work

source ~/.zshrc
Copy the code

Then enter NVM -v to view the version number. If the version number is displayed, the installation is successful