记一次前端 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

# nenpm alias
alias nenpm='npm --registry=http://rnpm.hz.netease.com/ --registryweb=http://npm.hz.netease.com/ --cache=$HOME/.nenpm/.cache --userconfig=$HOME/.nenpmrc'

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

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

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

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

接下来就准备开始开发了

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

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

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

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

csscomb 可以很好地格式化 css 文件，能按照配置文件指定的顺序排列样式，一般我都是按照以下顺序：

位置属性（如 position、top、z-index、display、flex、margin、padding 等）
自身属性（如 width、border、background、color 等）
文字属性（如 text-align、word-wrap、font、line-height 等）
动画属性及其他

统一 css 顺序不仅美观，而且不容易出错，用法就是 Shift + cmd + p 执行格式化命令。

jsdoc 是为了方便加函数注解，markdown preview enhanced 让 md 写作的体验更上一层楼。

最后隆重地介绍下 Tabnine，用完之后我简直可以不带脑子写代码，人工智能就帮我写好了。

原文作者：Yizhou Shen

原文链接：http://shenyizhou.github.io/2020/12/10/2020-12-10-%E8%AE%B0%E4%B8%80%E6%AC%A1%E5%89%8D%E7%AB%AF%20Mac%20%E6%96%B0%E6%9C%BA%E9%85%8D%E7%BD%AE%E4%B9%8B%E8%B7%AF/

发表日期：December 10th 2020, 1:52:22 am

更新日期：March 5th 2024, 10:56:50 pm

Next Post

自动批量请求（2）—— TS 化和代码逻辑优化
Previous Post

自动批量请求

CATALOG

1. 首先肯定是拷贝老机子的内容啦
2. 安装 git 和配置 ssh
3. 安装 brew
4. 安装 iterm2 和 zsh
5. 安装 nvm 和 npm
6. 然后就是下载常用的软件啦
7. 接下来就准备开始开发了