前端迁移电脑环境配置101

电脑配置

一、常用软件

1、通讯协作

公司自己的通讯软件:例如KIM,飞书...
微信:App Store
搜狗输入法:App Store
电子邮件
  • 网易邮箱

  • 电脑自带邮件配置用户名和密码

2、文档软件

Typora: 必备必备,日常工作计划,文档编辑神器。
有道云笔记:App Store
WPS:App Store

3、开发软件

  1. Chrome
  2. iTerm2
    • 简单介绍:iTerm2 是一个非常好用的命令行终端软件,比系统自带的终端要好用很多,开箱即用,定制性也很强,强烈建议使用。

    • 官网链接:https://www.iterm2.com

      image.png

  3. VSCode
    • 简单介绍:VSCode 是微软开发的开源代码编辑器,功能强大、插件丰富,是当前 Web 开发的首选编辑器,当然如果你更加习惯 IDE 的话,也可以考虑安装 WebStorm 等功能强大的 IDE。

    • 官网地址:https://code.visualstudio.com/

    • 安装方式:下载安装即可。


      image.png
  4. XCode
    • 安装方式:使用 App Store 搜索 "xcode" 即可下载。


      image.png
  5. VPN
    • 远程办公需要,每家公司各不相同

      • 例如AnyConnect
  6. Charles
image.png
  1. switchHost

4、命令行软件

  1. Mac 包管理工具 —— Homebrew
  • 简单介绍:Homebrew 是一款 Mac OS 下的包管理工具,可以很方便地在命令行安装、卸载、升级、搜索等很多软件,可谓 Mac 开发的包管理利器,建议一定安装。

  • 官网链接:https://brew.sh/

  • Github 链接:https://github.com/Homebrew/brew

详细安装方法:
第一步:打开 iTerm2
第二步:命令行输入以下命令即可安装
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
第三步:按照命令行提示输入密码并按回车

  1. 代理工具 whistle

安装方法 :https://wproxy.org/whistle/install.html

  1. 漂亮的命令行提示符 —— zsh + oh-my-zsh

[1]. 简单介绍

为什么需要安装 zsh 和 oh-my-zsh 呢?先简单介绍下两者的作用:

Mac 默认的 Shell 是 Bash,而 Zsh 也是一个 Shell,可以用来替代 Bash。而 oh-my-zsh 是社区维护的一个 zsh 配置框架,此框架包含了众多漂亮的主题、好用的插件,以及很多方便的小工具。

oh-my-zsh Github 地址:https://github.com/ohmyzsh/ohmyzsh

[2]. 安装方式

可以根据 Github 的 README 来进行安装,具体是执行以下命令即可:

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

安装成功命令行截图如下:


image.png
  1. Node和它的包管理工具 —— nvm + node

[1]. 简单介绍

node 大家都知道,当前前端的工具链体系,node 是装机必备了,但是这里我们先安装 nvm,也就是 node 的包管理工具,再安装 node。

nvm 的好处就在于可以很方便地安装和切换各种 node 版本,版本之间互不影响。

nvm Github 地址:https://github.com/nvm-sh/nvm

node 官网:https://nodejs.org/en/

[2]. 安装方式

第一步:安装可以参考 Github 的 README,也可以直接执行以下命令进行安装:

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

第二步:命令执行成功之后,使用以下命令让 nvm 生效:

source ~/.zshrc

ps: 如果安装了ohmyzsh后命令行显示找不到nvm,解决方案如下:

  1. 打开~/.zshrc:vim ~/.zshrc

  2. 复制粘贴以下片段到.zshrc中:

export NVM_DIR="$HOME/.nvm"

[ -s "$NVM_DIR/[nvm.sh](http://nvm.sh)" ] && \. "$NVM_DIR/[nvm.sh](http://nvm.sh)"  # This loads nvm

[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

3. 保存并退出,使用 source ~/.zshrc刷新配置即可

第三步:安装 node,使用以下命令安装最新的 LTS 版本:

nvm install --lts

  1. npm 源管理工具 —— nrm

[1]. 简单介绍:

nrm 可以方便快速地让你在不同的 npm 源之间切换,例如我们常用的 npm 的官方源:npm ----- https://registry.npmjs.org/,或者是淘宝的 npm 源:taobao -- https://registry.npm.taobao.org/。或者输入公司内部的 npm 源。

[2]. 安装方式:

第一步:执行以下命令安装:

npm install -g nrm

第二步:设置 npm 源为快手内部源,执行以下命令:

nrm add yourName https://npm.yourName.com

nrm use yourName

如果要查看当前 npm 源,使用 nrm ls

如果要切换回到官方 npm 源,使用 nrm use npm,更多使用方式参见 nrm 使用文档。

二、开发环境设置

1. Git 设置

(1). 设置 git 的用户名和邮箱

git config --global user.name "xxxxx"

git config --global user.email "xxxxx@kuaishou.com"

(2). 设置 gitlab 的ssh key

第一步:生成 ssh-key,命令行执行:

ssh-keygen

然后一路回车就好

第二步:复制 ssh-key 到剪贴板

pbcopy < ~/.ssh/id_rsa.pub

复制ssh-key到剪贴板

第三步:粘贴 ssh-key 到 gitlab https://git.yourName.com/-/profile/keys/

(3). GUI客户端
对于复杂的分支 日志 commit处理, 仍旧推荐图形界面工具. 可行的有 SourceTree, SmartGit

2. 云主机等设置

1  ls ~/.ssh

2  cat ~/.ssh/id_rsa.pub | pbcopy

粘贴到云主机公钥配置

三、操作习惯迁移

1. 命令行历史记录:找到旧电脑的.zsh_history,在~/.zsh_history, copy到新电脑~目录下
image.png
2. 浏览器插件书签同步:登录Google账户云同步
  • 部分插件不在插件市场,需要本地打包迁移到新主机重新安装
3. iTab新标签页登录账户同步
4. VsCode登录账户同步插件

四、Project迁移

1. 删除node_modules打个压缩包迁移到新电脑下,或者通过git挨个clone到本地(费劲)

查询目录下所有的node_modules目录和所占空间
Linux中的命令:
find . -name "node_modules" -type d -prune | xargs du -chs

删除目录下所有的node_modules目录
删除命令和查询命令差不多
Linux系统中:
find . -name "node_modules" -type d -prune -exec rm -rf '{}' +

注:部分文件打包存到网盘:(https://pan.baidu.com/s/124eOi6wivMoy1_Lgu9Jw5Q

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,732评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,496评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,264评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,807评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,806评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,675评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,029评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,683评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,704评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,666评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,773评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,413评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,016评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,204评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,083评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,503评论 2 343