I don’t think anyone knows how to make an environment!

background

Recently, there are a lot of new colleagues, in order to unify everyone’s development environment and tools

Environment installation documentation has been written specifically for use

All commands are entered in iterm2

This section describes common Mac address information

MAC users with experience can skip this section

For those of you who used to use Windows, look at this section first

The keyboard

Use CMD instead of CTRL on Windows.

On some external keyboards, it’s the WIN key

Download the installation package

It can be downloaded from the AppStore

It can also be downloaded from the web

Points set

By default, the MAC has only one disk. There is no partitioning concept

Windows for my computer

For Finder on MAC

Download the installation package format from the web page

• dmg
• pkg
• zip

Installation packages downloaded from the Web will be available in all three formats

DMG format

Double click on the install

Take wechat for example

Hold down the software with the left mouse button and drag it to the folder on the right

PKG file

Double – click, no brain next step

The zip file

Windows – like green software

Once unzipped, drag the resulting application into the Finder folder, under the Applications folder

Software cannot open

When this type of popover is encountered, the first selection is good and the second selection is cancelled

Add finder default add-ons

Common Software Installation

In addition to their common development software, such as vscode webstrom, idea, xcode, as such

The following software must be installed

Git iterm2 Alfred4Copy the code

The proxy tool

It doesn’t matter what you use, as long as it feels right

Once enabled, find the proxy Settings

Whether web, client, must be able to find proxy Settings!!

Here is an example of the x tool:

View Http ports (default is 1087 for MAC, default is 1080 for Windows)

Set HTTP and HTTPS proxies based on the port

Export http_proxy = http://127.0.0.1:1087; Export https_proxy = http://127.0.0.1:1087;Copy the code

---

This command to remember, the future development career will be used in many places!!

This command to remember, the future development career will be used in many places!!

This command to remember, the future development career will be used in many places!!

---

How do I test for success

Remember not to ping www.google.com test, you are ping to next year also ping impassability

Check whether the returned data is the proxy IP address. Check whether the returned data is the proxy IP addressCopy the code

git

Open iterm2 and type

git --version  
Copy the code

If you have Git, print the version

If you don’t have Git, a pop-up window will appear. Install it

alfred4

Shear plate history

CMD + Alt + C calls the clipboard history

Quick search – Baidu search

http://www.baidu.com/s?wd={query}
Copy the code

Quick search -Github search

https://github.com/search?q={query}
Copy the code

Call up search Alt + space type github/baidu keywords to search (note the space in the middle)

For example, github 123 or Baidu 123

Youdao plug-in

Download YoudaoTranslate

Import after decompression

For specific configuration, please refer to the right side, and you only need to fill in Netease Identity Key and netease Secret

Alt + space, after invoking the Alfred input box, type YD (note there is a space in the middle)

Yd Hello World

Installation in a prepared environment

With the above software installed, let’s install some common environments on the MAC

Oh-my-zsh (after git installation)

Open the iterm2

All commands are executed from top to bottom

See terminal wall climbing command at the top of the article
exportHttp_proxy = http://127.0.0.1:1087;exportHttps_proxy = http://127.0.0.1:1087; sh -c"$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

Install the ZSH plugin
cd ~/.oh-my-zsh/custom/plugins
# Highlight plugin
git clone https://github.com/zsh-users/zsh-syntax-highlighting.git

echo "source ${(q-)PWD}/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh" >> ${ZDOTDIR:-$HOME}/.zshrc

source ./zsh-syntax-highlighting/zsh-syntax-highlighting.zsh

# Autocomplete plugin
git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions
Copy the code

After installation

cd ~

open -e ~/.zshrc
Copy the code

A text edit pops up

Search plugin to find

Modified to

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

And then save

Type in iterm2

source ~/.zshrc
Copy the code

brew

Homebrew is a package manager for MAC that makes it very easy to manage our various environments and path dependencies

See terminal wall climbing command at the top of the article
exportHttp_proxy = http://127.0.0.1:1087;exportHttps_proxy = http://127.0.0.1:1087; /bin/bash -c"$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
Copy the code

In the middle of the need to enter the password, fill in the boot password, the input process will not be displayed, this is the mechanism of Linux, after finishing the press enter

Press Enter to proceed to the next step

Copy this code to execute

Automatic operation script

Add this script yourself, based on your ide

You can open projects directly from the IDE in finder, and no longer need to open the IDE to find the project folder

VSCode, for example

The full name of VSCode is: Visual Studio Code

for f in "$@"
do
    open -a "Visual Studio Code" "$f"
done
Copy the code

Visual Studio Code can be replaced with the full name of any IED, such as Android Studio, etc

Save CMD + s as an arbitrary name

use

---

At this point, the preparatory work is ready

---

IOS Installation

There’s really nothing to install on iOS

Xcode is installed

Command line tool installation

sudo xcode-select --install
Copy the code

Cocoapods installation

exportHttp_proxy = http://127.0.0.1:1087;exportHttps_proxy = http://127.0.0.1:1087; brew install cocoapodsCopy the code

If pod install does not download down

You can do it first

Export http_proxy = http://127.0.0.1:1087; Export https_proxy = http://127.0.0.1:1087;

Download again

The iOS environment has been installed

Android

Is also very simple

First open the wall tool, open the agent

Download and install Android Studio

Once installed, open iterm2

open -e ~/.zshrc
Copy the code

Add at the end of the environment variables file

# android
export Android_Home=~/Library/Android/sdk
export PATH=$Android_Home/tools:$PATH
export PATH=$Android_Home/platform-tools:$PATH
export PATH=$Android_Home/build-tools:$PATH%
Copy the code

save

Open iterm2 execution

source ~/.zshrc
Copy the code

The Android environment is installed

Web

Install the NVM

See terminal wall climbing command at the top of the article
exportHttp_proxy = http://127.0.0.1:1087;exportHttps_proxy = http://127.0.0.1:1087; brew install nvmCopy the code

open -e ~/.zshrc
Copy the code

Add at the end of the file

# nvm 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

source ~/.zshrc
Copy the code

Install the node

nvm ls-remote
The printout is followed by a representation stable version of the LTS
# M1 users can only install version 15 or later, and other users can install their own versionsNVM install v15.14.0 NPM install NPM - g - the registry at https://registry.npm.taobao.orgCopy the code

Install NRM and switch taobao source

npm install nrm -g --registry https://registry.npm.taobao.org

nrm use taobao
Copy the code

Vscode configuration

Necessary plug-in

# regular
any-rule
# Automatically modify tags
Auto Rename Tag
# parentheses with color
Bracket Pair Colorizer 2
# Chinese
Chinese
# Color highlight
Color Highlight
# ESLint
ESlint
# the Git plug-in
GitLens — Git supercharged
# path supplement
Path Intellisense
Topic #
vscode-icons
Copy the code

If it’s Vue, add two more

Vetur
vue-helper
Copy the code

Configuration items:

{
    / / icon theme
    "workbench.iconTheme": "vscode-icons".// Open the page without preview (no overwrite)
    "workbench.editor.enablePreview": false.// ESLint automatically fixes
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true}},Copy the code

The Web environment is installed

flutter

Start by following the iOS and Android environment above

Then follow the installation below

Installation of flutter environment

react-native

Install the iOS development environment first

Then install the Android development environment

Then install the Web development environment

then

watchman

See terminal wall climbing command at the top of the article
exportHttp_proxy = http://127.0.0.1:1087;exportHttps_proxy = http://127.0.0.1:1087; brew install watchman npm i yarn -gCopy the code

The React-Native environment is installed

java

Install the JDK

If the JDK version is not required, you can install the OpenJDK version

For example, install jdK8

See terminal wall climbing command at the top of the article
exportHttp_proxy = http://127.0.0.1:1087;exportHttps_proxy = http://127.0.0.1:1087; brew install homebrew/cask-versions/adoptopenjdk8Copy the code

If you need to install the oracle version, you can refer to installing Java8 with brew for MAC

Of course, directly under the installation package installation is also OJBK

See terminal wall climbing command at the top of the article
exportHttp_proxy = http://127.0.0.1:1087;exportHttps_proxy = http://127.0.0.1:1087; brew install mavenCopy the code

The Java environment is installed

go

See terminal wall climbing command at the top of the article
exportHttp_proxy = http://127.0.0.1:1087;exportHttps_proxy = http://127.0.0.1:1087; brew install goCopy the code

Go is installed

---

In fact, it is also exploring more convenient environment installation methods

For example, type a Docker image, or use a script to install

But for now, install it manually

END