前端遷移電腦環(huán)境配置101

電腦配置

一离赫、常用軟件

1婶熬、通訊協(xié)作

公司自己的通訊軟件:例如KIM氏身,飛書...
微信:App Store
搜狗輸入法:App Store
電子郵件
  • 網(wǎng)易郵箱

  • 電腦自帶郵件配置用戶名和密碼

2歼郭、文檔軟件

Typora: 必備必備互捌,日常工作計(jì)劃潘明,文檔編輯神器。
有道云筆記:App Store
WPS:App Store

3秕噪、開(kāi)發(fā)軟件

  1. Chrome
    • 簡(jiǎn)單介紹:Chrome 是 Google 開(kāi)發(fā)的瀏覽器钳降,具有強(qiáng)大的開(kāi)發(fā)者工具支持,前端開(kāi)發(fā)者首選腌巾。

    • 官網(wǎng)鏈接:https://www.google.cn/intl/zh-CN/chrome/

      image.png

  2. iTerm2
    • 簡(jiǎn)單介紹:iTerm2 是一個(gè)非常好用的命令行終端軟件遂填,比系統(tǒng)自帶的終端要好用很多,開(kāi)箱即用澈蝙,定制性也很強(qiáng)吓坚,強(qiáng)烈建議使用。

    • 官網(wǎng)鏈接:https://www.iterm2.com

      image.png

  3. VSCode
    • 簡(jiǎn)單介紹:VSCode 是微軟開(kāi)發(fā)的開(kāi)源代碼編輯器灯荧,功能強(qiáng)大礁击、插件豐富,是當(dāng)前 Web 開(kāi)發(fā)的首選編輯器逗载,當(dāng)然如果你更加習(xí)慣 IDE 的話客税,也可以考慮安裝 WebStorm 等功能強(qiáng)大的 IDE。

    • 官網(wǎng)地址:https://code.visualstudio.com/

    • 安裝方式:下載安裝即可撕贞。


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


      image.png
  5. VPN
    • 遠(yuǎn)程辦公需要测垛,每家公司各不相同

      • 例如AnyConnect
  6. Charles
    • 代理抓包捏膨,跨平臺(tái)抓包,開(kāi)發(fā)移動(dòng)端需要

    • 最新版本下載(速度較慢) https://www.charlesproxy.com/download/

    • 注冊(cè)方式登錄賬號(hào)和key

    • 或者使用ProxyMan食侮,免費(fèi)版基本夠用号涯,界面全新設(shè)計(jì)比較賞心悅目https://proxyman.io/

image.png
  1. switchHost

4链快、命令行軟件

  1. Mac 包管理工具 —— Homebrew
  • 簡(jiǎn)單介紹:Homebrew 是一款 Mac OS 下的包管理工具,可以很方便地在命令行安裝眉尸、卸載域蜗、升級(jí)巨双、搜索等很多軟件,可謂 Mac 開(kāi)發(fā)的包管理利器霉祸,建議一定安裝筑累。

  • 官網(wǎng)鏈接:https://brew.sh/

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

詳細(xì)安裝方法:
第一步:打開(kāi) 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]. 簡(jiǎn)單介紹

為什么需要安裝 zsh 和 oh-my-zsh 呢?先簡(jiǎn)單介紹下兩者的作用:

Mac 默認(rèn)的 Shell 是 Bash丝蹭,而 Zsh 也是一個(gè) Shell慢宗,可以用來(lái)替代 Bash。而 oh-my-zsh 是社區(qū)維護(hù)的一個(gè) zsh 配置框架奔穿,此框架包含了眾多漂亮的主題镜沽、好用的插件,以及很多方便的小工具贱田。

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

[2]. 安裝方式

可以根據(jù) Github 的 README 來(lái)進(jìn)行安裝缅茉,具體是執(zhí)行以下命令即可:

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

安裝成功命令行截圖如下:


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

[1]. 簡(jiǎn)單介紹

node 大家都知道,當(dāng)前前端的工具鏈體系湘换,node 是裝機(jī)必備了宾舅,但是這里我們先安裝 nvm,也就是 node 的包管理工具彩倚,再安裝 node筹我。

nvm 的好處就在于可以很方便地安裝和切換各種 node 版本,版本之間互不影響帆离。

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

node 官網(wǎng):https://nodejs.org/en/

[2]. 安裝方式

第一步:安裝可以參考 Github 的 README蔬蕊,也可以直接執(zhí)行以下命令進(jìn)行安裝:

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

第二步:命令執(zhí)行成功之后,使用以下命令讓 nvm 生效:

source ~/.zshrc

ps: 如果安裝了ohmyzsh后命令行顯示找不到nvm哥谷,解決方案如下:

  1. 打開(kāi)~/.zshrc:vim ~/.zshrc

  2. 復(fù)制粘貼以下片段到.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]. 簡(jiǎn)單介紹:

nrm 可以方便快速地讓你在不同的 npm 源之間切換们妥,例如我們常用的 npm 的官方源:npm ----- https://registry.npmjs.org/猜扮,或者是淘寶的 npm 源:taobao -- https://registry.npm.taobao.org/〖嗌簦或者輸入公司內(nèi)部的 npm 源旅赢。

[2]. 安裝方式:

第一步:執(zhí)行以下命令安裝:

npm install -g nrm

第二步:設(shè)置 npm 源為快手內(nèi)部源,執(zhí)行以下命令:

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

nrm use yourName

如果要查看當(dāng)前 npm 源惑惶,使用 nrm ls

如果要切換回到官方 npm 源煮盼,使用 nrm use npm,更多使用方式參見(jiàn) nrm 使用文檔带污。

二僵控、開(kāi)發(fā)環(huán)境設(shè)置

1. Git 設(shè)置

(1). 設(shè)置 git 的用戶名和郵箱

git config --global user.name "xxxxx"

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

(2). 設(shè)置 gitlab 的ssh key

第一步:生成 ssh-key,命令行執(zhí)行:

ssh-keygen

然后一路回車就好

第二步:復(fù)制 ssh-key 到剪貼板

pbcopy < ~/.ssh/id_rsa.pub

復(fù)制ssh-key到剪貼板

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

(3). GUI客戶端
對(duì)于復(fù)雜的分支 日志 commit處理, 仍舊推薦圖形界面工具. 可行的有 SourceTree, SmartGit

2. 云主機(jī)等設(shè)置

1  ls ~/.ssh

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

粘貼到云主機(jī)公鑰配置

三鱼冀、操作習(xí)慣遷移

1. 命令行歷史記錄:找到舊電腦的.zsh_history报破,在~/.zsh_history, copy到新電腦~目錄下
image.png
2. 瀏覽器插件書簽同步:登錄Google賬戶云同步
  • 部分插件不在插件市場(chǎng)悠就,需要本地打包遷移到新主機(jī)重新安裝
3. iTab新標(biāo)簽頁(yè)登錄賬戶同步
4. VsCode登錄賬戶同步插件

四、Project遷移

1. 刪除node_modules打個(gè)壓縮包遷移到新電腦下泛烙,或者通過(guò)git挨個(gè)clone到本地(費(fèi)勁)

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

刪除目錄下所有的node_modules目錄
刪除命令和查詢命令差不多
Linux系統(tǒng)中:
find . -name "node_modules" -type d -prune -exec rm -rf '{}' +

注:部分文件打包存到網(wǎng)盤:(https://pan.baidu.com/s/124eOi6wivMoy1_Lgu9Jw5Q

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末理卑,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子蔽氨,更是在濱河造成了極大的恐慌藐唠,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,126評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件鹉究,死亡現(xiàn)場(chǎng)離奇詭異宇立,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)自赔,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,254評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門妈嘹,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人绍妨,你說(shuō)我怎么就攤上這事润脸。” “怎么了他去?”我有些...
    開(kāi)封第一講書人閱讀 152,445評(píng)論 0 341
  • 文/不壞的土叔 我叫張陵毙驯,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我灾测,道長(zhǎng)爆价,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書人閱讀 55,185評(píng)論 1 278
  • 正文 為了忘掉前任媳搪,我火速辦了婚禮铭段,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘秦爆。我一直安慰自己序愚,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,178評(píng)論 5 371
  • 文/花漫 我一把揭開(kāi)白布等限。 她就那樣靜靜地躺著展运,像睡著了一般。 火紅的嫁衣襯著肌膚如雪精刷。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書人閱讀 48,970評(píng)論 1 284
  • 那天蔗候,我揣著相機(jī)與錄音怒允,去河邊找鬼。 笑死锈遥,一個(gè)胖子當(dāng)著我的面吹牛纫事,可吹牛的內(nèi)容都是我干的勘畔。 我是一名探鬼主播,決...
    沈念sama閱讀 38,276評(píng)論 3 399
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼丽惶,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼炫七!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起钾唬,我...
    開(kāi)封第一講書人閱讀 36,927評(píng)論 0 259
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤万哪,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后抡秆,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體奕巍,經(jīng)...
    沈念sama閱讀 43,400評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,883評(píng)論 2 323
  • 正文 我和宋清朗相戀三年儒士,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了的止。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 37,997評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡着撩,死狀恐怖诅福,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情拖叙,我是刑警寧澤氓润,帶...
    沈念sama閱讀 33,646評(píng)論 4 322
  • 正文 年R本政府宣布,位于F島的核電站憋沿,受9級(jí)特大地震影響旺芽,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜辐啄,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,213評(píng)論 3 307
  • 文/蒙蒙 一采章、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧壶辜,春花似錦悯舟、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 30,204評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至岭参,卻和暖如春反惕,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背演侯。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 31,423評(píng)論 1 260
  • 我被黑心中介騙來(lái)泰國(guó)打工姿染, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人秒际。 一個(gè)月前我還...
    沈念sama閱讀 45,423評(píng)論 2 352
  • 正文 我出身青樓悬赏,卻偏偏與公主長(zhǎng)得像狡汉,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子闽颇,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,722評(píng)論 2 345