這也是我給組內(nèi)新成員寫(xiě)的部分基礎(chǔ)入職文檔介紹往产，分享給大家

理清內(nèi)部平臺(tái)

進(jìn)入一家新公司，你需要了解以下幾個(gè)平臺(tái)以及使用方式：

• 需求分發(fā)平臺(tái)撒犀，常見(jiàn)類(lèi)似jira
• 代碼托管平臺(tái)福压，常見(jiàn)類(lèi)似gitlab
• 設(shè)計(jì)稿平臺(tái)掏秩，常見(jiàn)類(lèi)似figma
• 接口協(xié)議文檔
• 配置郵箱
• 內(nèi)部OA平臺(tái)

基本理清這些平臺(tái)就足夠了，一般公司都是會(huì)在新人入職文檔寫(xiě)明荆姆，如果沒(méi)有蒙幻，那就得一個(gè)一個(gè)去問(wèn)。

iTerm2的配置

效果圖

WX20230715-134326@2x.png

1. 下載iTerm2：

   • 前往官方網(wǎng)站（https://www.iterm2.com/）下載最新版本的iTerm2胆筒。
   • 完成下載后邮破，打開(kāi)安裝包，將iTerm2應(yīng)用程序拖動(dòng)到"Applications"文件夾中腐泻。

2. 設(shè)置默認(rèn)Shell為zsh：

   • 打開(kāi)iTerm2應(yīng)用程序决乎。
   • 在菜單欄中，選擇"iTerm2" -> "Preferences"派桩，或使用快捷鍵"Command + ,"打開(kāi)偏好設(shè)置。
   • 在"General"選項(xiàng)卡的"Preferences"部分蚌斩，點(diǎn)擊"Command"選項(xiàng)铆惑，選擇"Command"和"Return"。
   • 在"Profiles"選項(xiàng)卡的"General"部分送膳，點(diǎn)擊"Command"選項(xiàng)员魏，選擇"Login Shell"。

3. 安裝Oh My Zsh：

   • 打開(kāi)終端（iTerm2）叠聋。
   • 運(yùn)行以下命令安裝Oh My Zsh：

     sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"
     

   • 安裝完成后撕阎，關(guān)閉終端并重新打開(kāi)一個(gè)新的終端。

4. 安裝Powerline和PowerFonts：

   • 打開(kāi)終端（iTerm2）碌补。
   • 安裝Powerline：

     pip install powerline-status --user
     

   • 安裝PowerFonts：
     • 在終端中執(zhí)行以下命令克隆PowerFonts項(xiàng)目：

       git clone https://github.com/powerline/fonts.git --depth=1
       

     • 進(jìn)入克隆的fonts文件夾：

       cd fonts
       

     • 執(zhí)行安裝腳本：

       ./install.sh
       

   • 安裝完成后虏束，你可以在iTerm2的偏好設(shè)置中選擇Meslo LG字體作為默認(rèn)字體。

5. 安裝配色方案：

   • 打開(kāi)終端（iTerm2）厦章。
   • 克隆Solarized配色方案：

     git clone https://github.com/altercation/solarized
     

   • 進(jìn)入iterm2-colors-solarized文件夾：

     cd solarized/iterm2-colors-solarized/
     

   • 雙擊Solarized Dark.itermcolors或Solarized Light.itermcolors安裝對(duì)應(yīng)的配色方案镇匀。
   • 在iTerm2的偏好設(shè)置中，選擇喜歡的配色方案袜啃。

6. 安裝agnoster主題：

   • 打開(kāi)終端（iTerm2）汗侵。
   • 克隆agnoster主題：

     git clone https://github.com/fcamblor/oh-my-zsh-agnoster-fcamblor.git
     

   • 進(jìn)入oh-my-zsh-agnoster-fcamblor文件夾：

     cd oh-my-zsh-agnoster-fcamblor/
     

   • 執(zhí)行安裝腳本：

     ./install
     

   • 打開(kāi)你的.zshrc文件：

     vi ~/.zshrc
     

   • 將ZSH_THEME字段修改為"agnoster"：
     ZSH_THEME="agnoster"
   • 保存并關(guān)閉.zshrc文件。
   • 在終端中執(zhí)行以下命令使修改生效：

     source ~/.zshrc
     

7. 安裝zsh-autosuggestions插件（可選）：

   • 打開(kāi)終端（iTerm2）群发。
   • 安裝zsh-autosuggestions插件：

     git clone https://github.com/zsh-users/zsh-autosuggestions ~/.oh-my-zsh/custom/plugins/zsh-autosuggestions
     

   • 打開(kāi)你的.zshrc文件：

     vi ~/.zshrc
     

   • 在.zshrc文件的plugins部分晰韵，添加"zsh-autosuggestions"插件：
     plugins=(zsh-autosuggestions)
   • 保存并關(guān)閉.zshrc文件。
   • 在終端中執(zhí)行以下命令使修改生效：

     source ~/.zshrc
     

8.配置熱鍵

我的是command+~這樣調(diào)出iTerm2窗口熟妓，記得配置top吸頂效果

• 打開(kāi)iTerm2應(yīng)用程序雪猪。
• 在菜單欄中，選擇"iTerm2" -> "Preferences"滑蚯，或使用快捷鍵"Command + ,"打開(kāi)偏好設(shè)置浪蹂。
• 在"Keys"選項(xiàng)卡中抵栈，點(diǎn)擊"Hotkey"部分的"Create a Dedicated Hotkey Window"。
• 選擇你喜歡的熱鍵組合坤次，例如"Control + Option + Space"古劲。
• 在"Action"部分，選擇"Show/hide iTerm2 with a system-wide hotkey"缰猴。
• 點(diǎn)擊"OK"保存設(shè)置产艾。

完成以上步驟后，你的iTerm2終端將配置好滑绒，并具有美化的界面和功能闷堡。你可以根據(jù)個(gè)人喜好進(jìn)行自定義調(diào)整。

nvm管理Node.js

WX20230715-135647@2x.png

在進(jìn)行前端開(kāi)發(fā)時(shí)疑故，經(jīng)常需要使用不同版本的Node.js杠览。為了簡(jiǎn)化版本管理的過(guò)程，我們可以使用nvm（Node Version Manager）工具來(lái)管理和切換Node.js版本纵势。本文將詳細(xì)介紹如何安裝nvm踱阿、使用nvm安裝Node.js，并配置環(huán)境變量钦铁，以便在終端中正確使用已安裝的Node.js版本软舌。

1. 下載并安裝nvm

1. 在終端中運(yùn)行以下命令來(lái)下載和安裝nvm：

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

2. 關(guān)閉終端并重新打開(kāi)一個(gè)新的終端。

3. 驗(yàn)證nvm是否成功安裝：

   nvm --version
   

   如果安裝成功牛曹，你將看到nvm的版本號(hào)佛点。

2. 安裝Node.js

1. 打開(kāi)終端（iTerm2）。

2. 在終端中運(yùn)行以下命令來(lái)安裝Node.js：

   nvm install stable
   

   這將安裝最新的穩(wěn)定版Node.js黎比。如果你想安裝特定版本的Node.js超营，可以使用以下命令并替換<version>為你想要安裝的具體版本號(hào)，例如14.17.6：

   nvm install <version>
   

3. 驗(yàn)證Node.js是否成功安裝：

   node --version
   

   如果安裝成功焰手，你將看到Node.js的版本號(hào)糟描。

3. 配置環(huán)境變量

1. 打開(kāi)你的終端配置文件，這里是zsh的配置文件為~/.zshrc书妻。

2. 在配置文件中添加以下內(nèi)容來(lái)設(shè)置nvm的環(huán)境變量：

   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
   

3. 保存并關(guān)閉終端配置文件船响。

4. 在終端中執(zhí)行以下命令使配置文件的修改生效：

   source ~/.bashrc  # 或 source ~/.bash_profile 或 source ~/.zshrc，根據(jù)你的配置文件名來(lái)選擇對(duì)應(yīng)的命令
   

5. 環(huán)境變量配置完成后躲履，可以在終端中使用nvm命令來(lái)管理已安裝的Node.js版本见间。

6. 驗(yàn)證環(huán)境變量是否配置成功：

   nvm --version
   

   如果成功配置，你將看到nvm的版本號(hào)工猜。

4. 使用已安裝的Node.js版本

1. 在終端中運(yùn)行以下命令來(lái)切換到已安裝的Node.js版本：

   nvm use <version>
   

   使用具體的版本號(hào)替換<version>米诉。切換成功后，你將可以在終端中使用選定的Node.js版本篷帅。

安裝git

1. 安裝Git

在macOS上安裝Git

1. 在終端（iTerm2）中運(yùn)行以下命令來(lái)安裝Homebrew（包管理工具）：

   /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
   

2. 在終端中運(yùn)行以下命令來(lái)使用Homebrew安裝Git：

   brew install git
   

2. 配置SSH協(xié)議

SSH協(xié)議允許你通過(guò)加密方式與遠(yuǎn)程代碼倉(cāng)庫(kù)進(jìn)行通信史侣，以確保安全性拴泌。以下是配置SSH協(xié)議的步驟：

1. 生成SSH密鑰對(duì)：

   • 在終端中運(yùn)行以下命令來(lái)生成SSH密鑰對(duì)：

     ssh-keygen -o
     

   • 按照提示，選擇密鑰的保存路徑和設(shè)置密碼（可選）惊橱。
     2.查看密鑰

 cat ~/.ssh/id_rsa.pub // 公鑰
 cat ~/.ssh/id_rsa // 私鑰

3. 升級(jí)SSH協(xié)議（可選）

有些平臺(tái)SSH協(xié)議不一樣蚪腐，就沒(méi)有權(quán)限推送代碼了惰蜜，這點(diǎn)得注意

為了提高SSH協(xié)議的安全性谭羔，你可以升級(jí)到更高版本的SSH協(xié)議邓萨。以下是升級(jí)SSH協(xié)議的步驟：

1. 檢查SSH客戶(hù)端配置：

   • 在終端中打開(kāi)SSH客戶(hù)端配置文件：

     vi ~/.ssh/config
     

   • 如果文件不存在适掰，可以創(chuàng)建一個(gè)新的配置文件。

2. 在配置文件中添加以下內(nèi)容以啟用最新版本的SSH協(xié)議：
   Host *
   AddKeysToAgent yes
   UseKeychain yes
   IdentityFile ~/.ssh/id_rsa
   PreferredAuthentications publickey
   PubkeyAcceptedKeyTypes ssh-ed25519-cert-v01@openssh.com,ssh-rsa-cert-v01@openssh.com,ssh-ed25519,ssh-rsa

遵循git提交規(guī)范

49760520-fa6c6f00-fcc4-11e8-84c4-80727f071487.png

方便一點(diǎn)就是用git-cz代替git commit

npm install -g commitizen
npm install --save-dev git-cz

• feat : 新功能
• fix : 修復(fù)bug
• docs : 文檔改變
• style : 代碼格式改變
• refactor : 某個(gè)已有功能重構(gòu)
• perf : 性能優(yōu)化
• test : 增加測(cè)試
• build : 改變了build工具 如 grunt換成了 npm
• revert : 撤銷(xiāo)上一次的 commit
• chore : 構(gòu)建過(guò)程或輔助工具的變動(dòng)

配置whistle

如果你做的是H5項(xiàng)目赡模，想要在真機(jī)上調(diào)試创夜，那么whistle會(huì)給你極大的便利

1.安裝whistle

Node安裝成功后溶耘，執(zhí)行如下npm命令安裝whistle （Mac或Linux的非root用戶(hù)需要在命令行前面加sudo觅廓，如：sudo npm install -g whistle）

$ npm install -g whistle

$ npm install cnpm -g --registry=https://registry.npmmirror.com
$ cnpm install -g whistle

或者直接指定鏡像安裝：
$ npm install whistle -g --registry=https://registry.npmmirror.com

3. 啟動(dòng)whistle

最新版本的whistle支持三種等價(jià)的命令whistle鼻忠、w2、wproxy

啟動(dòng)whistle:

$ w2 start

Note: 如果要防止其他人訪問(wèn)配置頁(yè)面杈绸，可以在啟動(dòng)時(shí)加上登錄用戶(hù)名和密碼 -n yourusername -w yourpassword粥烁。

重啟whsitle:

$ w2 restart

停止whistle:

$ w2 stop

調(diào)試模式啟動(dòng)whistle(主要用于查看whistle的異常及插件開(kāi)發(fā)):

$ w2 run

啟動(dòng)完whistle后，最后一步需要配置代理蝇棉。

4. 配置代理

配置信息

1. 代理服務(wù)器：127.0.0.1 (如果部署在遠(yuǎn)程服務(wù)器或虛擬機(jī)上，改成對(duì)應(yīng)服務(wù)器或虛擬機(jī)的ip即可)
2. 默認(rèn)端口：8899 (如果端口被占用芥永，可以在啟動(dòng)時(shí)通過(guò) -p 來(lái)指定新的端口篡殷，更多信息可以通過(guò)執(zhí)行命令行 w2 help (v0.7.0及以上版本也可以使用w2 help) 查看)

勾選上 對(duì)所有協(xié)議均使用相同的代理服務(wù)器

代理配置方式(把上面配置信息配置上即可)

1. 瀏覽器代理 (推薦)：安裝瀏覽器代理插件

   • 安裝Chrome代理插件：推薦安裝SwitchyOmega

     [圖片上傳失敗...(image-14fe2f-1689410435917)]

   • Firefox: 地址欄輸入訪問(wèn) about:preferences，找到 Network Proxy埋涧，選擇 手動(dòng)代理配置(Manual proxy configuration)板辽，輸入代理服務(wù)器地址、端口棘催，保存

     [圖片上傳失敗...(image-9c7bd-1689410435917)] [圖片上傳失敗...(image-3221e0-1689410435917)]

2. 移動(dòng)端需要在設(shè)置中配置當(dāng)前Wi-Fi的代理劲弦，以 iOS 為例：

   [圖片上傳失敗...(image-a2c7bb-1689410435917)]

PS: 如果配置完代理，手機(jī)無(wú)法訪問(wèn)醇坝，可能是whistle所在的電腦防火墻限制了遠(yuǎn)程訪問(wèn)whistle的端口邑跪，關(guān)閉防火墻或者設(shè)置白名單：http://jingyan.baidu.com/article/870c6fc317cae7b03ee4be48.html

訪問(wèn)配置頁(yè)面

啟動(dòng)whistle及配置完代理后，用**Chrome瀏覽器(由于css兼容性問(wèn)題界面只支持Chrome瀏覽器)**訪問(wèn)配置頁(yè)面呼猪，如果能正常打開(kāi)頁(yè)面画畅，whistle安裝啟動(dòng)完畢，可以開(kāi)始使用宋距。

通過(guò)ip+端口來(lái)訪問(wèn)轴踱，形式如 http://whistleServerIP:whistlePort/ e.g. http://127.0.0.1:8899

[圖片上傳失敗...(image-a48c6e-1689410435917)]

5. 安裝根證書(shū)

[圖片上傳失敗...(image-42c708-1689410435917)]

[圖片上傳失敗...(image-da40e2-1689410435917)]

[圖片上傳失敗...(image-cd56f2-1689410435917)]

6.手機(jī)配置

這里手機(jī)代理到我們電腦的IP+8899端口(8899端口是whistle啟動(dòng)的窗口)
[圖片上傳失敗...(image-34747c-1689410435917)]

[圖片上傳失敗...(image-a4e492-1689410435917)]

[圖片上傳失敗...(image-82a654-1689410435917)]

使用手機(jī)掃描下面二維碼進(jìn)行下載（打開(kāi)localhost:8899選擇https tab就會(huì)彈出二維碼）

[圖片上傳失敗...(image-563a6a-1689410435917)]

武裝vscode

按照我配置的vscode插件介紹，建議vscode用戶(hù)登錄谚赎，這樣換電腦的話可以保留配置

Auto Close Tag

與Visual Studio IDE或Sublime Text一樣淫僻，自動(dòng)添加HTML/XML關(guān)閉標(biāo)簽诱篷。

[圖片上傳失敗...(image-3148f3-1689410435917)]

Auto Rename Tag

自動(dòng)重命名配對(duì)的HTML/XML標(biāo)簽，與Visual Studio IDE相同雳灵。

[圖片上傳失敗...(image-ca2ecb-1689410435917)]

Better Comments

更好的注釋擴(kuò)展將幫助您在代碼中創(chuàng)建更人性化的注釋棕所。

[圖片上傳失敗...(image-99bc1e-1689410435917)]

Code Runner

運(yùn)行多種語(yǔ)言的代碼片段或代碼文件：

[圖片上傳失敗...(image-8c9b99-1689410435917)]

Code Spell Checker

Visual Studio Code 的拼寫(xiě)檢查器

[圖片上傳失敗...(image-e2bb2-1689410435917)]

Docker

Docker 擴(kuò)展使您可以輕松地從 Visual Studio Code 構(gòu)建、管理和部署容器化應(yīng)用程序细办。它還提供對(duì)容器內(nèi) Node.js橙凳、Python 和 .NET 的一鍵調(diào)試。

[圖片上傳失敗...(image-5ab7ad-1689410435917)]

Document This

“Document This”是一個(gè) Visual Studio Code 擴(kuò)展笑撞，可以自動(dòng)為 TypeScript 和 JavaScript 文件生成詳細(xì)的 JSDoc 注釋岛啸。

[圖片上傳失敗...(image-8f6e7e-1689410435917)]

Dracula Official

吸血鬼皮膚

[圖片上傳失敗...(image-49b891-1689410435917)]

ESLint

[圖片上傳失敗...(image-60d2ed-1689410435917)]

GitHub Copilot

非常推薦使用，沒(méi)有資格的或者不會(huì)使用的可以私信我茴肥，我教你

[圖片上傳失敗...(image-26b10a-1689410435917)]

GitLens

GitLens — 在 VS Code 中增強(qiáng) Git(可以直接查看代碼是誰(shuí)提交的)

[圖片上傳失敗...(image-5fe23c-1689410435917)]

Image Hover Preview

Vscode 圖片懸停預(yù)覽插件坚踩。

[圖片上傳失敗...(image-e55eb3-1689410435917)]

indent-rainbow

一個(gè)簡(jiǎn)單的擴(kuò)展，使縮進(jìn)更具可讀性

[圖片上傳失敗...(image-c2fd5e-1689410435917)]

Live Server

靜態(tài)資源代理服務(wù)瓤狐，本地啟動(dòng)dist文件的時(shí)候非常方便

[圖片上傳失敗...(image-7c79aa-1689410435917)]

Prettier - Code formatter

代碼格式化

[圖片上傳失敗...(image-d62fc0-1689410435917)]

還有很多很好玩的插件瞬铸，可以自己上vscode市場(chǎng)搜尋一下