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 command
Ssh-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