preface

As a programmer, an uncomfortable development environment is a major factor in your productivity, so make sure you take the time to take care of your environment (okay, I know you’re making excuses).

In the last few months, I’ve had two new PCS and two installs (you know, couldn’t back up and restore for various reasons), and each time I had to redo my development environment.

Here is a record of how I built my own Terminal step by step. If you want to do the same as me, you can do the same with direct CV method.

Terminal

Terminal is what we often call a Terminal, and that’s what we call it on The Chinese Version of MAC today.

We need to type a lot of commands into it to do things every day. It’s a lot of time every day.

I remember the first time I clicked on this terminal and saw this:

I be silly. Why so ugly? How can you allow such ugly apps on macOS?

No, if I had to face it every day, IT would ruin my computer (even if it’s a noble 16 “MacBook Pro), and I’d have to find a third-party Terminal to replace it.

iTerm2

ITerm2 is a completely free terminal tool for macOS. It’s a must have for programmers. If you haven’t already, follow this article and get started.

👉iTerm2 official website in line with foreign sites have always been minimalist style (not can’t use, do so flashy why).

Download it directly, unzip it, and drag it into the Application. Open it.

It doesn’t feel right. Your background is black, but it still doesn’t cover up your ugliness.

Don’t worry, congenital deficiency, acquired hard work.

Say goodbye to black and white, the whole of the most SAO terminal, start.

on my zsh

The main character is it, with it, you must be the most beautiful boy in your group.

Oh My Zsh is an open source, community-driven framework for managing your zsh configuration.

The installation

The website provides two installation methods:

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

# via wget
sh -c "$(wget -O- https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
Copy the code

If, for some reason, you are unable to install either of the above methods, try a manual installation:

# download oh-my-zsh source code
git clone git://github.com/robbyrussell/oh-my-zsh.git ~/.oh-my-zsh
# and copy the.zshrc configuration file to the root directory
cp ~/.oh-my-zsh/templates/zshrc.zsh-template ~/.zshrc
# make the.zshrc configuration file valid
source ~/.zshrc Copy the code

B: well… You say with me, clone also not line, cannot describe the reason, net speed does not allow.

So here’s what you do.

Download zip from 👉oh-my-zsh GitHub -> Unzip -> move oh-my-zsh directory to root directory:

cd ~/Downloads
mv ohmyzsh-master ~/.oh-my-zsh
cp ~/.oh-my-zsh/templates/zshrc.zsh-template ~/.zshrc
source ~/.zshrc
Copy the code

If that doesn’t work, you come to me.

Ok, restart iTerm2, is iTerm2 changed?

.zshrc

This is the key configuration file for oh-my-zsh. It is located in the root directory and can be viewed through vim ~/.zshrc.

Each time you change it, you need to manually run source ~/.zshrc if you want it to take effect immediately.

Modify the color scheme

Once you open.zshrc, you can see the configuration for the color scheme:

# Set name of the theme to load --- if set to "random", it will
# load a random theme each time oh-my-zsh is loaded, in which case,
# to know which specific one was loaded, run: echo $RANDOM_THEME
# See https://github.com/ohmyzsh/ohmyzsh/wiki/Themes
ZSH_THEME="agnoster"
Copy the code

Oh-my-zsh offers a number of built-in color schemes, which can be viewed by using the following command:

ls ~/.oh-my-zsh/themes
Copy the code

Can also open the 👉 https://github.com/ohmyzsh/ohmyzsh/wiki/Themes is more intuitive to see all the color scheme.

To set the corresponding color scheme, simply change the value of ZSH_THEME.

If you want every day to be different, you can set it to random. Every time iTerm2 is turned on, a random color scheme will be used.

I used to use this color scheme for a while because I didn’t want to mess around with it: Agnoster, which looks like this:

Of course, one day, I just wanted to do something artificial, so I started matching my own colors. (No backup… Can’t find it…)

If you find the default color scheme unappealing and feel comfortable with your own aesthetic, you can match the colors yourself.

Custom color scheme

Entry: Menu bar -> Profiles -> Open Profiles -> Edit Profiles -> + a configuration -> Select Colors

People like me, who are not aesthetically competent, spend a whole day doing this, only to find that the default is better…

⚠️ don’t touch the afternoon fish to do this to be found by the boss, or off work again.

Third party color scheme

Of course, you and I aren’t the only ones who want to create the best color scheme on our own.

👉 iterm2-color-schemes Schemes are available on 👉GitHub.

You can do this like I did:

Find a directory to store files related to iterm2
mkdir Code/other/iterm2
# download iTerm2 - Color - Schemes
git clone https://github.com/mbadolato/iTerm2-Color-Schemes
The # schemes folder is the directory that actually holds the color scheme
cd iTerm2-Color-Schemes/schemes Copy the code

Also, if clone can’t come down, download zip and decompress it.

You can import all color schemes through the following path:

Menu bar -> Profiles -> Open Profiles -> Edit Profiles -> Select Colors -> Lower right corner Color Presets -> Import…

Just go to the schemes folder on schemes and you’ll be giddy and happy.

It’s okay. There will be a better plan.

Install the font PowerFonts

Why install fonts? Some themes will set ICONS, our computer fonts generally do not support these ICONS, will appear garbled.

Open the 👉Fonts download zip package and decompress it locally to get a lot of Fonts.

# Move the downloaded fonts to the previously created directory
mv ~/Downlaods/fonts-master ~/Code/other/iterm2/fonts
cd ~/Code/other/iterm2/fonts
Execute the installation file
./install.sh
Copy the code

With that installed, set the font using the following path:

Menu bar -> Profiles -> Open Profiles -> Edit Profiles -> Text

You can select the font Meslo and the garbled ICONS will work.

Frosted glass effect/window size

If you want a more aggressive frosted glass effect, and find your own comfortable size (?? , can be set here:

Operation path: menu bar -> Profiles -> Open Profiles -> Edit Profiles -> Window

Custom background

Exciting moment, you can set your terminal to a favorite little sister picture as the background, when knocking on the command will be more exciting:

Hey, Dota cloud players, do you prefer ice girl or fire girl?

Operation path: menu bar -> Profiles -> Open Profiles -> Edit Profiles -> Window

The status bar

You can set up a status bar for each open terminal, showing some system information (such as CPU, RAM, current directory, etc.).

Operation path: menu bar -> Profiles -> Open Profiles -> Edit Profiles -> Select Session

conclusion

Out of this, a high level of appearance terminal of your own is born.

Still, it always feels like it’s a bit of a problem. Is there something more powerful? B: Yes, we’ll use it right away.

Artifact Powerlevel10k

👉Powerlevel10k is simply a ZSH theme, but it is very powerful, hereinafter referred to as P10K.

Install P10k

We are using Oh My Zsh, so we can install p10K like this:

git clone --depth=1 https://github.com/romkatv/powerlevel10k.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/themes/powerlevel10k
Copy the code

Then you need to open ~/.zshrc and set ZSH_THEME:

ZSH_THEME="powerlevel10k/powerlevel10k
Copy the code

Install the font Nerd Fonts

If we need to use some ICONS, this font is not enough. We need a powerful font: 👉Nerd Fonts, which supports the following ICONS:

Install the fonts

You can install it via BREW, as stated on the website:

brew tap homebrew/cask-fonts
brew cask install font-hack-nerd-font
Copy the code

But I don’t recommend this, including downloading the ZIP package, because this file is too big, too big, too big…

We can do this:

Slide open 👉 https://github.com/ryanoasis/nerd-fonts/releases, pages to find Assets area, as shown in figure:

We just need to download the hack.zip font package indicated by the arrow, decompress it and get some TTF font files. Double-click to install it.

ZSHRC Sets the font

POWERLEVEL9K_MODE="nerdfont-complete"
ZSH_THEME="powerlevel10k/powerlevel10k"
Copy the code

Note that it needs to be set before ZSH_THEME.

ITerm2 sets the font

Operation path: menu bar -> Profiles -> Open Profiles -> Edit Profiles -> Select Text

In this way, all the ICONS can be displayed properly.

Automatic configuration

If you specify the ZSH_THEME = “powerlevel10k/powerlevel10k” but without any manual configuration in ZSHRC, opened iTerm2 will trigger automatic configuration process.

You can also run the following command to enter the automatic configuration process again:

p10k configure
Copy the code

The problem is as follows:

  1. Does this symbol look like a diamond (rotating square)?
  2. Does this symbol look like a lock?
  3. Does this symbol look like the Debian logo?
  4. Are all of these ICONS crossed between the X’s?
  5. style
  6. coding
  7. Show time or not
  8. Directory level separator
  9. Head (left)
  10. Tail (right)
  11. Whether a newline
  12. Whether there is a connection line between the left and right
  13. The command line and prompt are connected
  14. Sparse or loose distribution between two lines of commands
  15. Do I need an icon?

After executing the command, p10k is initialized: generate ~/.p10k.zsh in the root directory, and write at the bottom of ~/.zshrc:

To disable the p10K configuration, delete the preceding command and ~/.p10k.zsh.

Custom Configuration

You can also manually configure p10k in ~/.zshrc or modify it from ~/.p10k.zsh if you want to play it as a high level.

This has to look at the document to explore, here I simply say a few configuration:

  • POWERLEVEL9K_LEFT_PROMPT_ELEMENTS
  • POWERLEVEL9K_RIGHT_PROMPT_ELEMENTS
  • POWERLEVEL9K_VCS_GIT_GITHUB_ICON

POWERLEVEL9K_LEFT_PROMPT_ELEMENTS

Elements displayed on the left side of the command line:

The configuration corresponding to the figure above is:

POWERLEVEL9K_LEFT_PROMPT_ELEMENTS=(user dir vcs newline)
Copy the code

POWERLEVEL9K_RIGHT_PROMPT_ELEMENTS

Elements displayed in the right area of the command line:

The configuration corresponding to the figure above is:

POWERLEVEL9K_RIGHT_PROMPT_ELEMENTS=(time)
Copy the code

The following fields can be used in POWERLEVEL9K_LEFT_PROMPT_ELEMENTS and POWERLEVEL9K_RIGHT_PROMPT_ELEMENTS:

field meaning
user The user name
dir Current directory name
vcs Remote warehouse information
os_icon The system icon
date The date of
host The host name
status Execution status of the previous command
time The current time
. .

If you want to learn more, head to the documentation at 👉.

POWERLEVEL9K_VCS_GIT_GITHUB_ICON

If it is a Github directory, this icon will be displayed:

So the ICONS that appear in the window can be customized. You can use the command to view the ICONS that are currently in use:

get_icon_names
Copy the code

You can change the icon by finding the KEY you want to change.

Note: You need to use Nerd Fonts to receive this full joy.

Someone asked, where do you find the code for this icon?

Here: 👉 https://www.nerdfonts.com/cheat-sheet

These are all the ICONS supported by Nerd Fonts and can be searched directly using keywords.

For example, if I want to change the Git icon:

After you find your favorite icon, f113 in the lower right corner is the value of the icon, and that’s all you need to do:

POWERLEVEL9K_VCS_GIT_GITHUB_ICON=$'\uf113'
Copy the code

Make it up

The plug-in

At this point, your iTerm2 should be good-looking enough.

After all, this is our job, light good-looking not, have to use, to understand the powerful plug-in system.

First, let’s look at where the plugin is located in ~/.zshrc, and find the following field:

plugins=(git)
Copy the code

git

Git plugin is a built-in plugin, which is enabled by default. It allows you to use very useful Git commands to improve development efficiency:

Use the git command from before the plug-in Git command after using the plug-in
git add –all gaa
git branch -D gbD
git commit -a -m gcam
git checkout -b gcb
git checkout master gcm

It’s a lot easier. You can run the following command to view all configurations:

vim ~/.oh-my-zsh/plugins/git/git.plugin.zsh
Copy the code

Automatically hops to the corresponding directory

If you’re like me, you’re a file junkie, and you’re a file junkie, and you’re a file junkie.

Tidy up is good for a while, but bad for a time

The directory level is deep, the age is old, can’t find the file to put where, CD is not convenient, what method can solve it? I’ll give you two tips.

Set alias

Open ~/.zshrc and enter an alias, such as:

alias articles='~/Code/GitHub/articles'
Copy the code

Then executing articles will automatically jump to ~/Code/GitHub/articles.

This is more troublesome, you have to configure alias for each directory.

Autojump plug-in

The AutoJump plugin will keep a record of all your visits, with different configurations.

The installation
brew install autojump
Copy the code
configuration

Open ~/.zshrc with a line of code:

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

And then the source comes into effect.

use

Auto-jump can be executed using the j command, such as j articles:

If you’ve visited the Articles catalog, you’ve got to make it remember.

zsh-autosuggestions

The function of this plugin is simple, just like its name, it will prompt you when you type a command and automatically complete it:

brew install zsh-autosuggestions
Copy the code

colors

This is a file directory beautification plug-in, as shown in the figure:

gem install colorls
Copy the code

You can also set alias to be more efficient:

alias lc='colorls -lA --sd'
Copy the code

Once the alias is set, just type LC, as I did.

I only used the above plugins and they have greatly improved my work efficiency. If there are other plugins that work well, please let me know.

VS Code configuration

If you are using VS Code, you need to configure the font again:

{
  "terminal.integrated.fontFamily": "Hack Nerd Font"
}
Copy the code

Homebrew is installed

Brew: Brew: Brew: Brew: Brew: Brew: Brew: Brew

brew: command not found
Copy the code

Then I googled it and said I wanted to install something called Homebrew, and I did it the way it was installed on the website:

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

If the installation is successful, congratulations, you are really in luck. If not installed successfully, then you will be a variety of Baidu how to install, and then the installation is not successful:

curl: (7) Failed to connect to raw.githubusercontent.com port 443: Connection refused
Copy the code

Someone told you to try a source of the University of Science and Technology:

/usr/bin/ruby -e "$(curl -fsSL https://cdn.jsdelivr.net/gh/ineo6/homebrew-install/install)"
Copy the code

And then, you might get stuck here:

==> Tapping homebrew/core
Cloning into '/usr/local/Homebrew/Library/Taps/homebrew/homebrew-core'.Copy the code

The network is not working when we download homebrew-core, so we can either manually clone it or download a ZIP package and decompress it to the corresponding directory:

cd "$(brew --repo)/Library/Taps/"
mkdir homebrew && cd homebrew
git clone git://mirrors.ustc.edu.cn/homebrew-core.git
Copy the code

Then execute the above command to install:

/usr/bin/ruby -e "$(curl -fsSL https://cdn.jsdelivr.net/gh/ineo6/homebrew-install/install)"
Copy the code

You will see a successful installation message:

==> Installation successful!
Copy the code

Write in the last

Ask you such a terminal development environment SAO SAO is not good. If nothing else, looking at the background, I’m more motivated to write code.

discussion

Welcome to pay attention to the public number “front-end trial”, the public number usually share some practical or interesting things, find the beauty of the code. Focus on depth and best practices, hoping to create a high quality public account. Occasionally, I also share some photos

Public account background reply “add group”, pull you into the communication paddling chat group, have seen a good article/code will be posted in the group.

If you don’t want to add groups, you can just add me.