A Mac configuration tutorial for developers

preface

Recently, the computer suddenly crashed, restart invalid, the system is damaged. You had to back up data and reinstall the system. The thought of installing the system and then having to install a series of software is very frustrating. I didn’t know much about The MAC system before, and the installation of software was quite chaotic. This time I went through the process again, and it was much smoother. In summary, just in case!

Recommended Software List

Homebrew(Software Package Management)

For example, I now want to install Google Chrome, open the terminal, and use one command to solve this problem.
- Install Homebrew
```
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
Copy the code
```
```
brew install google-chrome
Copy the code
```
iTerm2(terminal)
- The installation
```
brew install iterm2
Copy the code
```
- Configure the iTerm2 topic
ITerm2 Solarized is the theme of the most commonly used Dark theme, download address: ethanschoonover.com/solarized

Profiles -> Colors -> Color Presets -> Import Profiles -> Colors -> Color Presets -> Import Select solarized-> iterm2-coloring-solarized ->Solarized Dark. Itermcolors > iterm2-coloring-solarized -> Dark.
- ITem2 configuration and beautification
configurationOh-My-Zsh
- The installation
```
$ sh -c "$(wget -O- https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
Copy the code
```
- Once installed, you need to set Zsh to the default Shell for the current user (so that Zsh is used when creating a new TAB) :
```
$ chsh -s /bin/zsh
Copy the code
```
- ZSH_THEME=”steeef” this is one of the official themes, you can also choose your favorite theme, ZSH theme list github.com/robbyrussel…
- Application of agnoster theme found garbled characters
  - Download font: github.com/powerline/f… Follow the steps to install
  - I need to configure item2,Preferences -> Profiles -> Text
  - Check the Use Built-in Powerline glyphs option
- Zsh plug-in recommended
  - The automatic suggestions plug-in is zsh-autoSuggestions
    
    Edit ZSHRC
```
vi ~/.zshrc
Copy the code
```
    File, find the plugins in the configuration file, and add zsh-autosuggestions in parentheses
```
plugins=(git zsh-autosuggestions)
Copy the code
```
    Then source the change to take effect
```
source ~/.zshrc
Copy the code
```
    After installing the autoprompt plugin, open the terminal and input the command to suggest your command, just like fish. Just press Tab or → to complete the command directly.
  - Zsh-syntax -highlighting specific commands and highlighting error commands
    
    In this path
```
cd ~/.oh-my-zsh/custom/plugins
Copy the code
```
    Install the download
```
git clone https://github.com/zsh-users/zsh-syntax-highlighting.git
Copy the code
```
    Then activate this plugin through the
```
vi ~/.zshrc
Copy the code
```
    Find the name of the plugins to add to the plugins
```
plugins=(git zsh-autosuggestions zsh-syntax-highlighting)
Copy the code
```
    Then do the same source to make the change work
  - Auto-jump plug-in
    
    Using AutoJump, this plugin will automatically record all the directories you have passed, and the next time you want to go to a directory, automatically identify and jump to it! You can switch the working directory to anywhere you want with a single command j. You don’t need to use CDS very often
    
    Install the download
```
brew install autojump
Copy the code
```
    When the installation is complete, you will be prompted because ZSH is used. Add the following configuration to the ~/.bash_profile
```
# env of autojump
[ -f /usr/local/etc/profile.d/autojump.sh ] && . /usr/local/etc/profile.d/autojump.sh
Copy the code
```
    Configure the plug-in in ZSH
```
vi ~/.zshrc
Copy the code
```
    Find the name of the plugins to add to the plugins
```
plugins=(git zsh-autosuggestions zsh-syntax-highlighting autojump)
Copy the code
```
    After the configuration is complete, load the configuration
```
source ~/.bash_profile
source ~/.zshrc
Copy the code
```
    Then you can use j [path short write] to jump
    
    Path jump error You can use autoJump — Purge to clean up the wrong path
  - Hide the user and host names
    
    Sometimes our user name and host name are too long, such as my xiangchao@xingxiangchaodeMacBook-Pro, which will not look good when the terminal display, we can manually remove
    
    If you are using an Agnoster theme, modify it by editing the theme configuration file
```
 vim ~/.oh-my-zsh/themes/agnoster.zsh-theme
Copy the code
```
    Find the following code:
```
# Context: user@hostname (who am I and where am I) prompt_context() { if [[ "$USERNAME" != "$DEFAULT_USER" || -n "$SSH_CLIENT" ]]; %n@%m Specifies the prompt_segment black default "%(! .%{%F{yellow}%}.) %n@%m" fi }Copy the code
```
    Source ~/.oh-my-zsh/themes/agnoster. ZSH -theme
    
    A screenshot of the previous configuration completed
Quick Look plugin (Preview everything)
- QuicklookStephen: View plain text files with unknown extensions
- QLMarkdown: Space bar previews Markdown text effects
- QLColorCode: Preview code highlighted
- Github includes the Quick Look plugin
Typora(Markdown Weapon)

Development Tool installation

The installationnvm

brew install nvm
Copy the code

Create the.nvm directory as prompted

mkdir ~/.nvm
Copy the code

Edit the ~/.zshrc configuration file

vi ~/.zshrc
Copy the code

Add the following to the ~/.zshrc configuration file

export NVM_DIR="$HOME/.nvm"
[ -s "/usr/local/opt/nvm/nvm.sh" ] && . "/usr/local/opt/nvm/nvm.sh"
[ -s "/usr/local/opt/nvm/etc/bash_completion.d/nvm" ] && . "/usr/local/opt/nvm/etc/bash_completion.d/nvm"
Copy the code

:wq Save the configuration and exit.

Run the source command to make the configuration take effect

source ~/.zshrc
Copy the code

Check whether the configuration has taken effect

echo $NVM_DIR
# /Users/your-username/.nvm
Copy the code

See the help

nvm --help ... . Note: to remove, delete, or uninstall nvm - just remove the `$NVM_DIR` folder (usually `~/.nvm`)Copy the code

As you can see, deleting NVM is as simple as deleting the $NVM_DIR folder

Installation Node. Js

To view the node.js version, run the following command

nvm ls-remote
Copy the code

You can see many versions. Next, install the LTS version

nvm install 12
Copy the code

After the installation, you can check it out

NVM ls -> v12.22.3 default -> v12.22.3... . LTS/Fermium -> V14.17.3 (-> N/A)Copy the code

As you can see, the installation is a stable version of V12. Because only one version was installed, the version used was V12

Other versions (stable versions are recommended) are used. The following uses the stable VERSION of V10 as an example

NVM install v10.13.0Copy the code

You can see that the current node version is v10

$NVM ls -> v10.13.0 v12.22.3 default -> v10.13.0... . LTS/Fermium -> V14.17.3 (-> N/A)Copy the code

Switch to the default version

NVM Use 12 Now using node V12.22.3 (NPM V6.14.13)Copy the code

Check out the version

V12.22.3 $node - vCopy the code

Remove a version of Node.js

nvm uninstall 10
Copy the code

This section describes common NVM commands

1.NVM list is to find all node versions on this computer - NVM list To view the installed version - NVM list Installed to view the installed version - NVM list available To view the network available version2.NVM install <version> Installs a node of a specified version3.NVM use <version> Switches to the specified version node4.NVM LS lists all versions5.NVM Current Displays the current version6.NVM alias <name> <version> ## Adds an alias to a different version number7.NVM unalias <name> ## Deletes the defined alias8.NVM packages <version> ## Install the NPM package of the specified version in the current node environment9.NVM on Turns on nodeJS control10.NVM off Disables nodeJS control11.NVM Proxy View Settings and proxies12.NVM node_mirror [url] set node_mirror in setting. TXT, default is HTTPS://nodejs.org/dist/NVM npm_mirror [url] NVM npm_mirror [url] npm_mirror [url]//github.com/npm/npm/archive/.
13.NVM uninstall <version> Uninstalls the specified version14.NVM use [version] [arch] Switches the specified node version and bits15.NVM root [path] Sets and views the root path16.NVM version Displays the current versionCopy the code

The installationnrmAn NPM source manager that allows you to quickly switch between the following NPM sources:

npm ——– registry.npmjs.org/
yarn ——- registry.yarnpkg.com/
cnpm ——- r.cnpmjs.org/
taobao —– registry.npm.taobao.org/
nj ——— registry.nodejitsu.com/
npmMirror — skimdb.npmjs.com/registry/
edunpm —– registry.enpmjs.org/

The installation

npm install -g nrm
Copy the code

use

List optional sources

nrm ls 
* npm -------- https://registry.npmjs.org/
  yarn ------- https://registry.yarnpkg.com/
  cnpm ------- http://r.cnpmjs.org/
  taobao ----- https://registry.npm.taobao.org/
  nj --------- https://registry.nodejitsu.com/
  npmMirror -- https://skimdb.npmjs.com/registry/
  edunpm ----- http://registry.enpmjs.org/
Copy the code

The * is the source currently in use, and the output above indicates that the current source is official.

switch

```
nrm use cnpm
// Registry has been set to: http://r.cnpmjs.org/
```
Copy the code

Adding sources You can add custom sources, especially for adding private sources within the enterprise.

```
nrm add  <registry> <url> [home]
```
Copy the code

Delete the source

```
nrm del <registry>
```
Copy the code

Some paid software recommendations – Resources

Bartender 3 (Hide and simplify your top bar icon)
Magnet (powerful window layout tool)
PopClip for Mac
IStat Menus (Computer Performance Monitoring)
Noizio (Quiet, white noise)
IINA (Advanced macOS Video Player)
AppCleaner (Small but powerful unloader)
Kawa (quick switch of input method)
Things3 (Task Management)
Alfred (Powerful Search)

Resources: MacBook Configuration Tutorial from scratch

A Mac configuration tutorial for developers

Recommended Software List

Development Tool installation

Some paid software recommendations – Resources

Related Posts

Modularity principle of Webpack series

FFmpeg 4.2 From Beginning to Master (ii) – QT uses FFmpeg hard decoding and QImage display

Js’s semicolon got me. It’s time to learn