My front end one day

Software Installation
Software configuration
Terminal installation
Auxiliary tools
Start writing code

Let's have a cup of health tea first

先来一杯养生茶

Software Installation

Previous article: Zero configuration front-end development environment-Mac

Installation method

Download some commonly used free software in the App Store, and it’s more than 10s if you don’t connect to it.
MacWk Five-star recommendation
Tencent Lemon (for reference)

28 commonly used software

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

Google Chrome, Firefox, WeChat, QQ, Enterprise WeChat, Tencent Conference, vscode, WeChat Developer Tools, HBuilderX
Robo 3T, a classic and easy-to-use mongodb database viewing tool
Sunflower remote control, can remotely control other windows or mac computers, stable and reliable, high quality
ApiPost, a concise and easy-to-use interface document tool, Chinese friendly, simple operation and few steps, and automatically generates beautiful online interface documents

Analogy Swagger, Apizza, YApi, Kanyun, Showdoc, Postman

Download 16 models on MacWk platform:

Axure, Ps, Microsoft Word Suite, Sourcetree, SnailSVN, iTerm2, Charles
PPDuck-Picture Fidelity Compression, ColorSnapper2-Suck Color, iShot-Screenshot, CheatSheet-View Quick Command
XMind
Sketch
SwitchHosts-modify host
RDM-redis database viewing tool
Navicat Premium-View all kinds of databases

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

Software configuration

Google Chrome configuration

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

Google Chrome extensions: Forage QR code, Vue.js devtools, React Developer Tools, Proxy SwitchyOmega, Google Access Assistant (the corresponding extension of Baidu search if the app store is not connected)
扩展程序

vscode configuration

Previous article: VS Code User Guide

26 plug-in installations

Chinese Language Pack for VS Code-Chinese Language Pack

Monokai Theme-color theme

vscode-icons-icon plugin

Debugger for Chrome-Debug JavaScript code running in Google Chrome from vscode

EditorConfig for Visual Studio Code-Override vscode configuration

filesize-Display the current file size in the status bar, you can also see the detailed creation and modification time after clicking

Import Cost-Calculate the size of the imported file

Image Preview-Display image preview in blank space and when hovering

Path Intellisense-auto fill in file name

Auto Rename Tag-Automatically complete the synchronization modification of the other side tag

Code Runner shortcut to run code

koroFileHeader-A plugin for generating file header comments and function comments in vscode

HTML Snippets-complete HTML code hints, including HTML5

JavaScript (ES6) snippets-ES6 syntax smart prompts, and quick input

Apollo GraphQL-Apollo GraphQL highlight

Vetur-vue syntax highlighting, intellisense, Emmet, etc.

Prettify JSON-format json

JSON Tools-JSON formatting tool

JSON Viewer-JSON View

ESLint-Check javascript syntax errors and hints

Prettier-Code formatter-Formatting code tool

Minify-Compress current HTML, CSS, JS to generate .min files

Open in Browser-Open the file in the browser

Todo Tree-Comment tags such as TODO and FIXME

View Node Package-Use this extension to quickly view the Node package source, allowing you to open the Node package repository/document directly from vscode.

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

Adjust settings

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

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

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

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

zsh install oh-my-zsh plugin

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

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

# 前文：Mac 设置开机启动 https://cjm0.github.io/blog/page/list/maclist.html#%E5%88%9B%E5%BB%BA-plist-%E6%96%87%E4%BB%B6
# mongod 启动、停止、重启别名
alias mongod.start='launchctl load -w ~/Library/LaunchAgents/org.mongodb.mongod.plist'
alias mongod.stop='launchctl unload -w ~/Library/LaunchAgents/org.mongodb.mongod.plist'
alias mongod.restart='mongod.stop && mongod.start'

# redis 启动、停止、重启别名
alias redis.start='launchctl load -w ~/Library/LaunchAgents/org.redis.plist'
alias redis.stop='launchctl unload -w ~/Library/LaunchAgents/org.redis.plist'
alias redis.restart='redis.stop && redis.start'

# nginx 启动、停止、重启别名
alias nginx.start='launchctl load -w ~/Library/LaunchAgents/org.nginx.plist'
alias nginx.stop='launchctl unload -w ~/Library/LaunchAgents/org.nginx.plist'
alias redis.restart='nginx.stop && nginx.start'

Auxiliary tools

If you want to be good at your work, you must first make good use of it

NATAPP ip mapping tool, back-end temporary domain name, front-end temporary domain name
JSBench code testing tool
inspect Chrome browser to debug mobile web pages

Outline tool for adding border to all web elements

javascript: (function() {     var elements = document.body.getElementsByTagName('*');     var items = [];     for (var i = 0; i < elements.length; i++) {         if (elements[i].innerHTML.indexOf('html * { outline: 1px solid #F9CC9D }') != -1) {             items.push(elements[i]);         }     }     if (items.length > 0) {         for (var i = 0; i < items.length; i++) {             items[i].innerHTML = '';         }     } else {         document.body.innerHTML +=             '<style>html * { outline: 1px solid #F9CC9D }</style>';     } })();

outline

Feishu: Multi-machine cross-platform (mobile phone, computer) file transfer tool
http://ruoyi.vip turn to the bottom, regularly updated free music recommendations, the code is tired and relieved