Zero configuration front-end development environment-Mac

WeChat public account: [Front end cook in a pot]
A little technique, a little thinking.
For questions or suggestions, please leave a message on the official account.

Since the use of mac computers, 6 new computer environments have been successively configured, and migration can be more convenient through migration assistant, account synchronization, etc. The following is a record of how to configure from scratch.

Computer initialization

After the new computer is in hand, a series of initial configuration starts, set the power-on password, and log in to the computer.

How to reset the power-on password of a Mac M1 chip computer:

• In the shutdown state, first short press the power button and release, then-quickly-[focus]-long-press. If the power is off, it means that you are not fast enough. The interval is too long, and the option appears to be successful.
• After selecting options, find the utility option on the upper left, select [Terminal], enter resetpassword and press Enter to unlock a reset password box, and press [Deactivate Mac].
• Then you can enter the new password, maybe the previous password, because this may be a bug in M1, not that you got Alzheimer, I am sorry for questioning myself for ten minutes (constantly typing in the password that may be set). Then press [Next].

Software installation method

1. Download some commonly used free software in the App Store, if you can’t connect to it, forget it
2. Mac development and configuration introductory document (first glance)
3. best and most detailed security free cracking mac software download platform MacWk
4. Tencent Lemon (for reference)
5. play (for reference)

Software Installation

Install the following 28 software

Download 12 models from the app store or Baidu search official website:

• Google Chrome, Firefox, Sunflower remote control
• WeChat, QQ, Enterprise WeChat, WeChat Developer Tools, HBuilderX, Tencent Conference
• ApiPost、Robo 3T、vscode

Download 16 models on MacWk platform:

• XMind, Sketch, Axure, Ps, Microsoft Word suite
• PPDuck-Picture Fidelity Compression, ColorSnapper2-Suck Color, iShot-Screenshot
• Sourcetree, SnailSVN, SwitchHosts-modify host, CheatSheet-view shortcut commands
• iTerm2, RDM, Navicat Premium-Various database viewing, Charles

Do not use Baidu cloud disk, choose Tianyi cloud disk to download quickly

Google Chrome configuration

Bookmarks: download bookmarks from the original computer and then transfer to the new computer, or account login synchronization

Extensions: Forage QR code, Proxy SwitchyOmega, Vue.js devtools, React Developer Tools, Google Access Assistant (app store can’t connect to Baidu search corresponding extension)

vscode configuration

• 27 plug-in installations

Debugger for Chrome、Apollo GraphQL、Auto Rename Tag 3

Chinese (Simplified) Language Pack for Visual Studio Code 1

Code Runner、EditorConfig for Visual Studio Code 2

ESLint、filesize、HTML Snippets、Image Preview、Import Cost 5

JavaScript (ES6) snippets、JSON Tools、JSON Viewer、koroFileHeader 4

Minify、Monokai Theme、npm (npm support for VS Code) 3

Open in Browser、Path Intellisense、Prettier - Code formatter 3

Prettify JSON、Todo Tree、Vetur、View Node Package、vscode-icons 5

Sass/Less/Stylus/Pug/Jade/Typescript/Javascript Compile Hero Pro 1

• Setting adjustment

Open a new file instead of overwriting Workbench enablePreview-true

The selected file does not automatically expand Auto Reveal-false

comd + n File format defaultLanguage-html when creating a new file

Trim Trailing Whitespace-true

Fix the problem that git.exe takes up too much memory due to vscode
git.enabled: false
git.autorefresh: false

Compact Folders-false

Trigger Expansion On Tab - true

includeLanguages - "javascript": "javascriptreact"

other settings

  Auto Save - onFocusChange
  Tab Size - 2
  Cursor Blinking - smooth
  Cursor Style - line-thin
  Word Wrap - on
  Auto Indent - advanced 粘贴保留格式
  Folding Strategy - indentation 按空格缩进收起
  Highlight Active Indent Guide - false
  Match Brackets - never 突出显示匹配的括号
  Max Tokenization Line Length - 100000
  Render Control Characters - true
  Render Whitespace - none

  Tree: Indent - 10
  Tree: Render Indent Guides - none
  Initial Indent - true
  Use Tabs - true

  Minimap: Enabled - false
  Update Imports On File Move: Enabled - never
  Surveys: Enabled - false
  Breadcrumbs: Enabled - true
  Enable Crash Reporter - false
  Enable Telemetry - false
  Eslint: Enable - false

  Max Column - 40
  Activity Bar: Visible - true
  Side Bar: Location - left
  Confirm Delete - false
  Confirm Drag And Drop - false
  Integrated: Split Cwd - initial
  Page Size - 0
  Show Scan Mode Button - false
  Package Manager - yarn
  Autorefresh - false
  Validate: Scripts - false
  Prettier: Semi - false
  Prettier: Single Quote - true
  Quote Style - single
  Default Formatter: HTML - prettyhtml
  Default Formatter: JS - prettier-eslint
  Save File Before Run - true
  Ignore Project Warning - true
  Dont Show New Version Message - true
  JS Official - true

Terminal installation

1. Homebrew installation

允许所有访问：sudo spctl --master-disable

终端执行 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
网络连接失败就换国内地址 /bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"
查看版本 brew -v

切换源 brew 下载源提高下载速度
  brew.git:
    cd "$(brew --repo)"
    git remote set-url origin https://mirrors.ustc.edu.cn/brew.git
  homebrew-core.git:
    cd "$(brew --repo)/Library/Taps/homebrew/homebrew-core"
    git remote set-url origin https://mirrors.ustc.edu.cn/homebrew-core.git
  替换 Homebrew Bottles 源
    cd ~
    echo 'export HOMEBREW_BOTTLE_DOMAIN=https://mirrors.ustc.edu.cn/homebrew-bottles' >> ~/.bash_profile
    source ~/.bash_profile

brew install git
brew install nginx

2. xcode-select installation

xcode-select --install 下载安装
xcode-select -p 查看安装目录
xcode-select -v 查看版本

删除 xcode-select
sudo rm -rf $(xcode-select --print-path)
rm -rf /Library/Developer/CommandLineTools

3. nvm installation

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash

touch ~/.bash_profile

vim ~/.bash_profile 输入提示的三行
  export NVM_DIR="$HOME/.nvm"
  [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
  [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

source ~/.bash_profile

nvm 换源：export NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/mirrors/node
新电脑默认全局安装了 v16 版本的，要先卸载掉

nvm install v12.22.6         安装指定版本
nvm use v12.22.6             切换 node 版本
nvm alias default v12.22.6   设置默认版本

安装 cnpm
  npm install -g cnpm --registry=https://registry.npm.taobao.org
  cnpm config get registry // 查看 cnpm 源
  cnpm set registry https://registry.npm.taobao.org // 用淘宝源

下载 pm2
  cnpm install -g pm2

4. zsh install oh-my-zsh plugin

zsh 安装完成之后退出当前会话重新打开一个终端窗口
wget https://github.com/robbyrussell/oh-my-zsh/raw/master/tools/install.sh -O - | sh

5. Global variable settings

.bashrc: read by non-login users

.bash_profile: can only be read by the logged-in user, after modification, execute source ~/.bash_profile to take effect

.zshrc: Both logged in and non-logged users can read, modify environment variables, save the modifications and restart the terminal

The terminal.app of Mac OS X actually runs "login shell" instead of "non-login shell", and calls .bash_profile instead of .bashrc by default

After omyzsh is installed on Mac, scripts such as ~/.bash_profile and ~/.bashrc will not be executed when terminal init. The default startup execution script is changed to ~/.zshrc

For unified management, make the following settings:

add this code to the last line source ~/.bash_profile

Then all variables are added in .bash_profile

.bash_profile variable reference:

# nvm path
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

# deno path
export DENO_PATH="/Users/qianduanyiguozhu/.deno"
export PATH="$DENO_PATH/bin:$PATH"

# mongodb path
export PATH="/usr/local/mongodb/bin:$PATH"

# redis path
export PATH="/usr/local/opt/redis/bin:$PATH"

# homebrew
export HOMEBREW_BOTTLE_DOMAIN=https://mirrors.ustc.edu.cn/homebrew-bottles

# Created by mirror-config-china
export IOJS_ORG_MIRROR=https://npm.taobao.org/mirrors/iojs
export NODIST_IOJS_MIRROR=https://npm.taobao.org/mirrors/iojs
export NVM_IOJS_ORG_MIRROR=https://npm.taobao.org/mirrors/iojs
export NVMW_IOJS_ORG_MIRROR=https://npm.taobao.org/mirrors/iojs

export NODEJS_ORG_MIRROR=https://npm.taobao.org/mirrors/node
export NODIST_NODE_MIRROR=https://npm.taobao.org/mirrors/node
export NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/mirrors/node
export NVMW_NODEJS_ORG_MIRROR=https://npm.taobao.org/mirrors/node

export NVMW_NPM_MIRROR=https://npm.taobao.org/mirrors/npm