记一次前端 Mac 新机配置之路

IDE

 2020/12/10 

首先肯定是拷贝老机子的内容啦

这时候正好手边没有 U 盘，叫外卖性价比太低，京东又要等双十二才有优惠，怎么办呢？

这时候我们可以直接用局域网来传递，在老机子上执行：

1
2
3

npm i -g host-your-folder
host-your-folder -g
# listen on :::50771

这时候访问老机子的 ip 就可以访问用户目录下的文件啦！如 xxx.xxx.xxx.xxx:50771/xxx.zip。

但是要注意的是 .ssh 之类 . 开头的文件是系统文件，没法通过这种方式传递，需要改个其他名字。

最容易的办法就是把所有要传递的文件打包成一个 xxx.zip 放在用户目录下一起下载。

另外要转移代码的话记得先删除 node_modules，用如下的命令就可以对当前目录下所有仓库执行删除：

1 2	find . -name node_modules -type d -exec rm -rf {} \; # 找到所有名字为 node_modules 的目录并执行删除

安装 git 和配置 ssh

Mac 在命令行里打 git 就能安装了。

然后因为上述操作迁移过 .ssh 文件夹，直接拷贝到用户根目录就行啦！

注：记得显示隐藏文件，快捷键是 Shift + cmd + .

不用每次都再用如下麻烦的方式生成一遍 ssh 文件啦：

1 2	ssh-keygen -t rsa -C “xxx@xxx.com” cat ~/.ssh/id_rsa.pub \| pbcopy

安装 brew

Homebrew 是一款 Mac OS 平台下必备的软件包管理工具，没有它安装和卸载可真的很麻烦。

尝试了下在公司内网可以执行/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"，但是卡在 github 那步。

后来发现在公司内网没法用 ssh 连 github，改为用流量就可以了。但是用流量访问上述链接会 403。

最后在流量下执行/usr/bin/ruby -e "$(curl -fsSL https://cdn.jsdelivr.net/gh/ineo6/homebrew-install/install)" 终于下载成功。

安装 iterm2 和 zsh

iterm2 好看的配色、灵活的快捷键、智能的选中和点击地址跳转，配合 Oh My Zsh 的快捷命令，用起来十分舒服。

iterm2 官网下载即可，zsh 安装：sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

顺带贴一下自己常用 git 命令的缩写：

gcp # git cherry-pick
gfa # git fetch --all --prune
gupa # git pull --rebase --autostash
gpsup # git push --set-upstream origin $(git_current_branch)
glols # git log --graph --pretty='%Cred%h%Creset -%C(auto)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --stat

安装 nvm 和 npm

用 nvm 来管理 npm 的版本是种很优雅的方式，nvm 的安装如下：

1	curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.37.2/install.sh \| bash

注：0.37.2 是编者写文章时的最新版，见nvm仓库

之后就是用 nvm 安装 node 和 npm

1 2	nvm install node nvm use node

像我司有一些内部包得从内部源下载，所以要配置下 nenpm。

可以把 alias 写到 .bash_profile 里永久保存，像我用了zsh则是保存到 .zshrc 中：

# 开启前端相关的插件
plugins=(docker git node react-native vscode)

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

### 然后就是下载常用的软件啦

![image](https://p6.music.126.net/obj/wo3DlcOGw6DClTvDisK1/5192874733/ff38/9ec2/a448/29d7fa333c425db05cc33a4883453f76.png)

最重要的当然是 chrome，没有 chrome 的收藏夹和记住密码简直寸步难行！

![image](https://p5.music.126.net/obj/wo3DlcOGw6DClTvDisK1/5192833655/e6a2/d1a0/de8e/fb7ed6c18027dd1c6e28e92cd04ca215.jpg)

剩下除了公司自带的几个，ppduck 压图真的好使，强烈建议买正式版！

xcode 的 simulator 配合测试包可以直接在 Mac 上方便地调试 webview 下的效果~

### 接下来就准备开始开发了

VSCode Insiders 可以登录账户同步的功能真是太棒啦，直接就把配置和插件安装了(VSC目前也支持啦)。

![image](https://p6.music.126.net/obj/wo3DlcOGw6DClTvDisK1/5192897486/505c/b816/3882/c073e8da218268eeba4b7cffd1845518.png)

Chinese 汉化、gitlens 查看提交记录、eslint 统一规范自是不必多说。

prettier 格式化 js 很好看，我通常都会时不时地手动格式化一下，然后保存的时候再解决一下 eslint 报错和调整 import 顺序，设置如下：

``` json
{
    "editor.codeActionsOnSave": {
        "source.organizeImports": true,
        "source.fixAll.eslint": true
    }
}