Skip to content
本页目录

Mac 前端开发环境 ​

软件:

  • Thor 应用之间快速切换
  • SwitchHosts 管理 hosts 文件的应用
  • Carbon Mac风格代码图片生
  • Hidden Bar 隐藏 macOS 菜单栏不常用的应用图
  • draw.io draw.io 流程图绘制 (桌面版本)
  • excalidraw excalidraw 素描手绘风格的流程图 (桌面版)

谷歌浏览器 ​

国内下载地址:https://www.google.cn/chrome/

设置插件:chrome://extensions/

暗黑模式切换 ​

关闭 暗黑模式

shell
defaults write com.google.Chrome NSRequiresAquaSystemAppearance -bool YES
# 重新启动 Chrome

打开 暗黑模式

shell
defaults write com.google.Chrome NSRequiresAquaSystemAppearance -bool NO
# 重新启动 Chrome

Xcode Command Line Tools ​

sh
# 安装 Xcode Command Line Tools
xcode-select --install

# 删除 Xcode Command Line Tools
sudo rm -rf /Library/Developer/CommandLineTools

Homebrew ​

Mac 的软件包管理工具,用于安装、卸载和管理各种软件,包括命令行工具、库和应用程序等

懒人一键安装(推荐) ​

sh
/bin/bash -c "$(curl -fsSL https://gitee.com/ineo6/homebrew-install/raw/master/install.sh)"
其他安装方式 (巨坑!不推荐)

MacBook Pro M2 亲测环境变量无法自动写入,需要自己手动添加,新手勿踩坑!!!

shell
# 国内源完整版安装
/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"
# 极速安装(update 功能需要命令修复)
/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)" speed

安装教程

常用命令 ​

sh
# 更新 Homebrew
brew update

# 安装指定的软件包
brew install <package>

# 卸载指定的软件包
brew uninstall <package>

# 搜索可用的软件包,并显示匹配的结果
brew search <query>

# 列出已安装的软件包
brew list

# 查看可以升级的软件包
brew outdated

# 升级所有软件包到最新版本
brew upgrade
# 升级指定的软件包到最新版本
brew upgrade <package>

# 查看指定软件包的信息,包括版本号、安装路径、依赖关系等
brew info <package>

# 清理 Homebrew 临时文件和旧版本的软件包
brew cleanup
# 查看可以清理的 Homebrew 临时文件和旧版本的软件包
brew cleanup -n

iTerm2 ​

Mac 上最好用的终端

  1. 支持子窗口
  2. 自动补全
  3. 查看粘贴历史
  4. 自定义配置项
sh
# 查看所有的 shell
cat /etc/shells

# 查看当前窗口使用的 shell
echo $SHELL

# 查看系统用户默认的 shell
cat /etc/passwd | grep sh

# 切换系统默认 shell
chsh -s /bin/zsh

Github软件官网

iTerm2 常用快捷键 ​

操作含义
⌘ + N新建窗口
⌘ + T新建 Tab
⌘ + W关闭 Tab / 窗口
⌘ + ←切换到上一个 Tab
⌘ + →切换到下一个 Tab
⌘ + 数字快速切换 Tab
⌘ + D垂直分屏
⌘ + Shift + D水平分屏
⌘ + Enter切换全屏
⌘ + F查找
⌘ + /查看光标的位置
Ctrl + P上一条命令
Ctrl + R搜索命令历史
Ctrl + L清屏
Ctrl + U清除当前行
Ctrl + W删除光标前面的一个单词
Ctrl + K删除光标后面的所有字符
Ctrl + A移动光标到行首
Ctrl + E移动光标到行尾

iTerm2 配色方案 ​

Oh-My-Zsh ​

github:https://github.com/ohmyzsh/ohmyzsh

curl:

shell
sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

wget:

shell
sh -c "$(wget -O- https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

终端代理 ​

TIP

首先得有梯子

1、添加 zshrc 配置

shell
# 查看当前 IP 
alias proxy-ip = "curl http://cip.cc"


# 开启代理方法
proxy-on() {
# 我的 Clash for Windows中port为7890
export http_proxy =http://127.0.0.1:7890
# 只代理 https 请求
export https_proxy=http://127.0.0.1:7890
# 代理所有请求
export ALL_PROXY=http://127.0.0.1:7890
  echo "HTTP Proxy on"
}

# 关闭代理方法
proxy-off() {
  unset http_proxy
  unset https_proxy
  unset ALL_PROXY
  echo "HTTP Proxy off"
}

2、重新加载 zsh 的配置

shell
source ~/.zshrc

3、使用

查看当前 IP

shell
proxy-ip

IP 信息

shell
IP	: 101.69.249.90
地址	: 中国  浙江  杭州
运营商	: 联通

数据二	: 浙江省杭州市 | 联通

数据三	: 中国浙江杭州 | 联通

URL	: http://www.cip.cc/101.0.0.0

开启代理:

shell
proxy-on
shell
# 查看IP
proxy-ip

# IP 信息
IP	: 203.175.12.118
地址	: 不丹  不丹

数据二	: 香港 | 特别行政区

数据三	: 中国香港

URL	: http://www.cip.cc/203.175.12.118

关闭代理:

shell
proxy-off

Zsh 插件配置 ​

TIP

1、查看已经安装的插件

shell
cd ~/.oh-my-zsh/plugins

2、如果已经安装,可以直接在 plugins 中添加

shell
vim ~/.zshrc

# 再插件列表中添加
plugins=(git zsh-autosuggestions z ...other plugin)

3、重新加载 zsh 的配置

shell
source ~/.zshrc

参考:zsh oh-my-zsh 插件推荐

命令自动补全:zsh-autosuggestions ​

github:zsh-autosuggestions

1、clone 插件

shell
git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions

2、把插件称加入 oh-my-zsh 插件列表

shell
# 打开 zsh 配置文件
open ~/.zshrc
or
vim ~/.zshrc

# 把插件名称加入插件列表
plugins=(git zsh-autosuggestions) 

3、重新加载 zsh 的配置

shell
source ~/.zshrc

Z 快速切换文件路径 ​

1、默认安装oh my zsh时就已经安装了 z 插件,具体可以在以下目录看到

shell
cd ~/.oh-my-zsh/plugins

2、只需要在(~/.zshrc)中的插件列表中添加

shell
vim ~/.zshrc
# 再插件列表中添加
plugins=(其他插件 z)

3、重新加载 zsh 的配置

shell
source ~/.zshrc

nvm ​

Nvm 是一个管理 Node 版本的工具

github:nvm

安装: ​

curl:

shell
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

wget:

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

Homebrew 安装 Nvm(不是很推荐,会有依赖 path 问题)

shell
brew install nvm

常用的命令 ​

安装 node ​

shell
# 安装最新版本 Node
nvm install node 

# 安装指定版本 Node
nvm install version

# 安装最新LTS(Long-term Support)版本Node
nvm install --lts

查看 node ​

shell
# 查看本地 Node 版本
nvm ls 

# 查看远程 Node 所有版本
nvm ls-remote
 
# 查看远程 Node 所有 LTS 版本
nvm ls-remote --lts 

# 查看当前使用 Node 版本
nvm current 

# 查看 node 安装位置
nvm which <version>

使用 node ​

shell
# 当前 shell 下使用某个 Node 版本
nvm use <version>

# 指定全局默认版本
nvm alias default <version> 

删除 ​

shell
# 卸载指定的版本
nvm uninstall <version>

# 解除当前版本绑定
nvm deactivate` 

如何在 M1 下安装 v14 及以下的老版本 Node ​

安装 Node 的部分写的很简单,因为按这个步骤,一般不会出问题。 而当你用 nvm 尝试去安装 v14 及以下的 Node 版本时,大概率会报错

而我们在工作中恰恰又可能依赖 v14 及以下的 lts 版本。那么为什么会报错呢?

究其原因还是因为低版本的 node 并不是基于 arm64 架构的,所以不适配 M1 芯片。 在这里教大家两个方法,就能成功安装上低版本 Node。

方法一 ​

终端输入:

shell
arch -x86_64 zsh

通过这个命令可以让 shell 运行在 Rosetta2 下。 之后你可以通过 nvm install v12 来安装低版本 Node。

在此之后,您可以不用在 Rosetta2 中就可以使用安装的可执行文件,也就是说,您可以将 Node v15与其他节点版本互换使用

方法二 ​

通过 Rosetta2 来启动终端,这样通过 Rosetta2 转译到 x86 架构中执行安装,也一样可以安装成功。

  • 在 finder 中,点击应用程序,并在实用工具中找到终端 (Terminal)
  • 右键终端,点击获取信息
  • 选择 使用Rosetta 打开
  • 重启终端,并执行 nvm install v12 命令

image

image

npm 配置 ​

nrm ​

nrm是一个npm源管理器,可以快速地在npm源间切换.

安装 ​

shell
# 全局安装 nrm
npm install -g nrm

查看可选的源 ​

shell
➜  ~ nrm ls
* npm ---------- https://registry.npmjs.org/
  yarn --------- https://registry.yarnpkg.com/
  tencent ------ https://mirrors.cloud.tencent.com/npm/
  cnpm --------- https://r.cnpmjs.org/
  taobao ------- https://registry.npmmirror.com/
  npmMirror ---- https://skimdb.npmjs.com/registry/
  • 其中,带*的是当前使用的源,上面的输出表明当前源是官方源。

切换源 ​

shell
# 如果要切换到taobao源:
nrm use taobao

增加源和删除源 ​

shell
# 你也可以增加定制的源,特别适用于添加企业内部的私有源:
nrm add <registry> <url> 其中reigstry为源名,url为源的路径。
# 示例
nrm add registry http://192.168.10.127:8081/repository/npm-public/

# 删除源
nrm del <registry> 删除对应的源

测试源速度 ​

shell
# 测试npm源
nrm test npm 
# 测试taobao源
nrm test taobao

git 配置 ​

git cz Commitizen 使用方法 ​

参考:优雅的提交你的 Git Commit Message

Fig ​

终端自动补全命令提示工具

  • 支持近 300 多种 CLI 工具的补全提示,如 cd git brew npm yarn
  • 支持插件
  • 支持自定义补全规范

安装

sh
brew install --cask fig

在 vscode 中使用,需修改 editor.accessibilitySupport 为 "off"

参考链接

mas-cli ​

Mac App Store 命令行工具

安装

sh
brew install mas  

常用命令

sh
# 搜索应用程序
mas search [query]

# 列出已经安装的应用程序
mas list

# 通过应用程序的 ID 进行安装,可以从 search 命令或者应用程序网页中获取
mas install [app-id]

# 升级已经安装的应用程序
mas upgrade

# 列出有更新可用的应用程序
mas outdated

Github

duti 设置默认应用程序 ​

设置默认应用程序的命令行工具

sh
brew install duti

常用命令

sh
# 查看指定文件类型的默认应用程序
duti -x txt

# 更改文件类型的默认应用程序
duti -s com.apple.TextEdit .txt all

常用的默认应用程序设置

万恶的微信开发者工具修改了很多默认应用程序设置

有一说一:微信开发者工具只配用来预览,开发还是一边玩去

sh
duti -s com.microsoft.VSCode .ts all
duti -s com.microsoft.VSCode .js all
duti -s com.microsoft.VSCode .json all
duti -s com.microsoft.VSCode .wxml all
duti -s com.microsoft.VSCode .wxss all

Github

tree 文件目录生成 ​

tree命令的作用是以树状图形式列出目录的内容。 执行tree命令,它会以树状图的方式列出指定目录下的所有文件,包括目录里的文件,显示出指定目录的文件目录结构,常用于文档总结。

Mac环境安装tree命令

shell
brew install tree

使用

shell

tree【选项】【目录】

tree -N # tree -N 可解决Mac环境,tree命令中文乱码问题 (转UTF-8)

除此之外我们还有其他的参数可以设置:

命令行效果
tree -d只显示文件夹
tree -D显示文件的最后修改时间
tree -L nn表示显示项目的层级,n=3即只显示项目的三层结构
tree -I <pattern>pattern表示想要过滤的目录,例如 tree -I 'node_modules'可以过滤掉node_modules这个文件夹
Details

参考链接 🔗

shell
-a  # 显示所有文件和目录(默认选项)
-A	# 使用ASNI绘图字符显示树状图而非以ASCII字符组合
-C	# 在文件和目录清单加上色彩,便于区分这种类型
-d	# 显示目录名称而非内容(只列出目录,不列出文件)
-D	# 列出文件或目录的更改时间
-f	# 在每个文件或目录之前,显示完整的相对路径名称
-F	# 在执行文件,目录,Socket,符号连接,管道名称名称,各自加上“*”,“/”,“=”,“@”,“|”号
-g	# 列出文件或目录的所属群组名称,没有对应的名称时,则显示群组识别码
-i	# 不以阶梯状列出文件或目录名称
-I  # 不现实符合范本样式的文件或目录名称
-l	# 如遇到性质为符号连接的目录,直接列出该连接所指向的原始目录
-n	# 不在文件和目录清单上加上色彩
-N	# 直接列出文件和目录名称,包括控制字符
-p	# 列出权限标示
-P	# 只显示符合范本像是的文件或目录名称
-q	# 用“?”号取代控制字符,列出文件和目录名称
-s	# 列出文件或目录大小
-t	# 用文件和目录的更改时间排序
-u	# 列出文件或目录的拥有者名称,没有对应的名称时,则显示用户识别码
-x	# 将范围局限在现行的文件系统中,若指定目录下的某些子目录,其存放于另一个文件系统上,则将该子目录予以排除在寻找范围外
-L	# 分层级显示(tree -L 1 /etc/)

clash for windows ​

  1. 下载安装 clash for windows

  2. 汉化补丁下载

Mac汉化步骤
  • 依次打开–访达–应用程序–右键 Clash for Windows–显示包内容–Contents–Resources
  • 替换 app.asar 文件即可。

开启代理 ​

导入订阅🔗


开启代理


出站模式介绍 ​



  • 全局连接: 无论国内外网站, 全部使用此软件加速访问. 缺点: 国内网站会变很慢或者无法访问。
  • 规则判断: 国内网站使用自己本地宽带, 国外网站使用此软件加速访问。 国内国外网页来回切一定要用这个!!
  • 直接连接: 和关闭代理没什么区别,选择这个就无法上外网了.

开clash后国内网站无法访问 ​

最近换了🪜的订阅🔗,开启全局代理后,百度、掘金、csdn这些网站访问巨慢,知乎直接打不开,在网上翻了半天,都是说手动设置绕过系统代理,尝试了一下,根本不起任何效果,其实最简单的方式就是上面提到的出站模式介绍,只要启用Rule即规则判断模式就好了。

开clash后Git依然超时的解决方法 ​

问题复现

为了解决这个问题,我们一般想到的方法就是走一下代理,但是Clash开启之后,我们可以在网页端正常访问github,但是push还是不行。问题的根源是:普通的代理模式,流量都是走一个特定的端口,与服务器通信,但是git的流量不会走。所以我们需要手动绑定一下代理。

方法非常简单,这里以Clash为例,其他软件的配置也大差不差。

打开Clash,马上就可以看到它使用的代理端口,这里为7890

接下来,给git设置代理,方法如下:

方法一 直接使用命令 ​

直接在Bash里输入命令设置全局http/https代理:

shell
git config --global http.proxy http://127.0.0.1:7890
git config --global https.proxy https://127.0.0.1:7890

把git的代理改成clash的端口,改完了可以使用git config -l查看配置

这样以后使用Clash时,git也能走代理了。

其他相关命令:

shell
## 查看代理
git config --global http.proxy
git config --global https.proxy

## 取消代理
git config --global --unset http.proxy
git config --global --unset https.proxy

# 设置代理 
git config --global https.proxy 127.0.0.1:****
git config --global http.proxy 127.0.0.1:****

方法二 修改配置文件 ​

  1. 打开配置文件:
shell
vi ~/.gitconfig
  1. 在文件末尾添加配置:
shell
[http]

proxy = http://127.0.0.1:7890
 
[https]
 
proxy = https://127.0.0.1:7890

保存退出,重启一下终端。

参考链接 🔗