前端新人入職的第一天通常就是配置環境，熟悉項目。本文就來分享前端新人入職第一天應該如何配置環境，保姆級教程，值得收藏！

本文以 Mac 電腦為例，使用 Windows 的小伙伴也可以參考！

圖片

開發環境

Node.js

通常我們的項目都是依賴Node.js 環境的，所以第一步就來安裝 Node.js。

打開 Node.js 官網（https://nodejs.org/en），其會自動識別當前的操作系統l類型，直接下載即可。官網提供了兩個版本的 Node.js：LTS（穩定版） 和 Current（最新版），這里建議下載穩定版，新版可能存在一些Bug。

圖片

下載完成后之后，按照提示一步步安裝即可：

圖片

這個安裝包含 Node.js 和 Npm。我這里安裝的是 Node.js v18.16.1 和 Npm v9.5.1。可以在終端中通過 node -v 和 npm -v命令來分別查看 Node.js 和 Npm 版本：

圖片

nvm

不同的項目可能對 Node.js 的版本要求不同，這時我門就需要切換不同版本的 Node.js。我們可以通過 Nvm 來管理Node.js 版本。

nvm（Node Version Manager）是一個用于管理 Node.js 版本的工具，它被設計成每個用戶獨立安裝，并在每個終端會話中調用。nvm 可以在任何符合 POSIX 標準的 shell（如 sh、dash、ksh、zsh、bash）上運行，特別適用于以下平臺：Unix、macOS 和 Windows 的 WSL（Windows Subsystem for Linux）。

nvm 的主要功能是允許用戶輕松切換不同版本的 Node.js，并在不同的項目中使用不同的 Node.js 版本。它為每個已安裝的 Node.js 版本提供隔離的運行環境，使得用戶可以在同一系統上同時使用多個 Node.js 版本而不會相互干擾。

首先在終端中通過以下命令來安裝 nvm：

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

當我輸入該命令后，終端就報錯了，報錯信息：curl: (7) Failed to connect to raw.githubusercontent.com port 443 after 5 ms: Couldn't connect to server，這個報錯是因為github 有些域名訪問不到，可以通過配置hosts里面的ip域名對應關系解決。

1. 在終端中輸入以下命令來打開hosts文件以進行編輯：

sudo vim /etc/hosts

2. 在文件中追加以下對應關系：

199.232.68.133 raw.githubusercontent.com
199.232.68.133 user-images.githubusercontent.com
199.232.68.133 avatars2.githubusercontent.com
199.232.68.133 avatars1.githubusercontent.com

如下：

圖片

然后按下ESC鍵，輸入:w來保存即可。這個配置不僅可以解決 nvm 的安裝問題，還能使加載不了圖片的 GitHub頁面恢復正常，homebrew 也能裝了。然后再輸入上面的命令就可以安裝nvm了。

安裝完成之后，重新打開終端，輸入 nvm，如果出現以下內容就是安裝成功了：

圖片

如果報錯：zsh: command not found: nvm，那就是安裝失敗了。原因就是電腦缺少 bash_profile 文件。該文件位于/Users/MacUserName/.bash_profile路徑，如果沒有就創建一個，通過以下命令來創建：

touch .bash_profile

然后通過以下命令來打開該文件：

open .bash_profile

在文件中添加以下內容：

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"

保存之后，在終端中輸入以下命令來刷新配置：

source ~/.bash_profile

重新打開終端，輸入nvm 來查看：

圖片

安裝成功就可以愉快的玩耍啦，nvm 提供了很多命令管理 Node.js 版本。當輸入 nvm 時，也會列出來所有可用的命令，下面來看看常用的 nvm 命令。

• 安裝 Node.js 版本：

安裝最新穩定版的 Node.js：nvm install stable

安裝指定版本的 Node.js：nvm install <version> （例如：nvm install 14.17.0）

• 切換 Node.js 版本：

切換到已安裝的其中一個版本：nvm use <version> （例如：nvm use 14.17.0）

可以通過簡寫版本號進行切換（例如 nvm use 14），nvm 將自動選擇符合的已安裝版本。

如果在項目目錄中創建了 .nvmrc 文件，nvm 在進入該目錄時會自動切換到文件中指定的 Node.js 版本。

• 查看已安裝的 Node.js 版本：

列出已安裝的所有版本：nvm ls

列出遠程可用的所有版本：nvm ls-remote

• 卸載 Node.js 版本：

卸載指定的 Node.js 版本：nvm uninstall <version> （例如：nvm uninstall 14.17.0）

• 設置默認的 Node.js 版本：

設置默認版本：nvm alias default <version> （例如：nvm alias default 14.17.0）

這樣，在新打開的終端中將自動使用默認版本。

• 運行 Node.js 命令和 npm：

在已安裝的 Node.js 版本下運行命令：nvm exec <version> <command> （例如：nvm exec 14.17.0 node -v）

在當前使用的 Node.js 版本下運行命令：nvm run <command> （例如：nvm run node -v）

nrm

在開發中，我們通常需要安裝很多 npm 包，而默認的 npm 源有時候就可能下載很慢，所以就需要切換 npm 源，nrm 就可以幫助我們管理和切換 nrm 源。其特點如下：

• 管理多個源：nrm 允許管理多個 npm 源，例如官方源、淘寶源、cnpm 源等。你可以根據需要快速切換不同的源。
• 快速切換：nrm 提供了快捷的命令來切換 npm 源，無需手動修改配置文件。你可以通過簡單的命令在不同的源之間進行切換。
• 測試速度：nrm 可以測試各個源的響應速度，并給出評分，幫助你選擇最快的源來加快依賴包的下載速度。

使用方法：

1. 安裝：首先，需要在全局安裝 nrm。在命令行中執行以下命令即可：

npm install -g nrm

2. 查看可用源：你可以使用以下命令查看當前可用的源列表：

nrm ls

3. 切換源：要切換到某個源，可以使用以下命令：

nrm use <源名稱>

例如，要切換到 taobao 源，可以執行：

nrm use taobao

4. 測試源的速度：你可以通過以下命令測試各個源的響應速度：

nrm test

5. 添加自定義源：如果你有自定義的源，可以通過以下命令添加：

nrm add <源名稱> <源地址>

例如，添加一個名為 myregistry 的自定義源：

nrm add myregistry http://myregistry.com/

6. 刪除源：如果要刪除已添加的源，可以使用以下命令：

nrm del <源名稱>

在安裝 nrm 時，我遇到以下報錯，這就是說沒有安裝權限：

圖片

可以使用管理員權限進行安裝，只需要在命令前面增加以一個 sudo，執行 后輸入電腦的密碼即可。

Homebrew

Homebrew 是 macOS 上一款常用的包管理工具，用于安裝、升級和管理軟件包，可以通過它來安裝 Git 等。

使用方法如下：

1. 安裝：在終端中執行以下命令來安裝 Homebrew：

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

2. 安裝軟件包：要安裝一個軟件包，只需在終端中執行以下命令：

brew install <軟件包名稱>

例如，要安裝 wget 軟件包，可以執行：

brew install wget

3. 升級軟件包：可以使用以下命令來升級已安裝的軟件包：

brew upgrade <軟件包名稱>

例如，要升級所有已安裝的軟件包，可以執行：

brew upgrade

4. 查找軟件包：如果不確定某個軟件包的名稱，可以使用以下命令進行模糊搜索：

brew search <關鍵詞>

5. 列出已安裝的軟件包：可以使用以下命令列出已經安裝的軟件包：

brew list

6. 刪除軟件包：要刪除已安裝的軟件包，可以執行以下命令：

Copy Codebrew uninstall <軟件包名稱>

7. 更新 Homebrew：可以使用以下命令來更新 Homebrew 自身：

brew update

開發工具

IDE

前端開發用的最多的 IDE 就是 Visual Studio Code 和 Webstorm。其中 VS Code 是開源的，完全免費，而Webstorm 是需要付費訂閱的。筆者一直在用 VS Code，這里以 VS Code 為例，看看如何安裝它。

Visual Studio Code（簡稱為 VS Code）是由微軟開發的免費、開源且跨平臺的代碼編輯器，其特點如下：

• 高度可定制：VS Code 允許用戶通過安裝插件和主題來自定義編輯器的外觀和功能，滿足不同用戶的需求。
• 豐富的擴展生態系統：VS Code 擁有一個龐大的擴展市場，用戶可以選擇從數千個插件中找到適合自己的工具和功能，例如代碼片段、調試器、語法高亮等。
• 強大的編輯功能：VS Code 提供了智能代碼補全、語法檢查、代碼導航、重構等強大的編輯功能，提高了開發效率。
• 內置終端：VS Code 內置了終端窗口，可以直接在編輯器中執行命令行操作，無需切換到外部終端。
• 調試支持：VS Code 內置了調試器，可以方便地進行代碼調試和錯誤排查，支持多種編程語言和調試器插件。

版本控制集成：VS Code 與 Git 和其他版本控制系統集成緊密，提供了版本控制工具和界面，方便代碼管理和協作開發。

• 可視化編輯：VS Code 支持以分割視圖和并排編輯的方式工作，使得同時編輯多個文件變得更加容易。
• 跨平臺：VS Code 可以在 Windows、macOS 和 Linux 系統上運行，用戶可以在不同的操作系統中享受一致的開發體驗。
• 快速啟動和輕量級：VS Code 啟動迅速，占用系統資源相對較少，適合在任何配置的計算機上進行開發。

首先，在 VS Code 官網（https://code.visualstudio.com/）下載最新的穩定版：

圖片

官網會識別我們當前是什么系統，自動選擇適合該系統的版本，點擊下載即可。當然也可以點擊下拉箭頭選擇需要的版本。

下載的文件，直接解壓就可以用了，長這樣：

圖片

默認是英文版，如果需要中文版，可以在插件市場中下載官方提供的簡體中文插件：

圖片

這樣，VS Code 就安裝完成啦，接下來就可以愉快的 Codeing 啦！

VS Code 的插件市場有很多用于日常開發的高效插件，這里附上之前分享的插件總結，可以按需安裝：2023年最新最全 VSCode 插件推薦！

另外，VS Code 內置了很多快捷鍵，可以參考這篇文章：Visual Studio Code 常用快捷鍵大全

瀏覽器

前端開發，瀏覽器當然必不可少啦，筆者最常用的瀏覽器就是 Chrome，如果需要兼容各個瀏覽器，可以下載多個。

Chrome 可以在其官網（https://www.google.cn/chrome/index.html）下載：

圖片

下載完成后，按照提示安裝即可。安裝完成之后，瀏覽器的默認搜索引擎是谷歌，如果需要更改，可以在設置中進行配置：

圖片

Chrome 也有一個很豐富的插件市場，這里附上之前分享的用于前端開發的高效 Chrome 插件總結：《推薦50個超實用的 Chrome 擴展，建議收藏！》

iTerm2

終端是前端開發中必不可少的工具，個人覺得 iTerm2 是比 Mac 默認終端好用很多的，可定制程度很高。iTerm2 是一款功能強大的終端模擬器，其有如下特點：

• 多標簽和分割窗口：iTerm2 支持多標簽和分割窗口，你可以在同一個窗口中打開多個終端會話，并方便地在它們之間切換。
• 自定義外觀：iTerm2 允許根據自己的喜好自定義終端的外觀，包括主題、背景圖像、字體等。你可以選擇預設的主題，或者創建自己的主題。
• 支持多窗口管理：iTerm2 支持窗口分組和窗口管理，你可以將多個窗口組織在一個窗口組中，并進行集體操作。
• 強大的搜索和歷史記錄：iTerm2 提供了高級搜索功能，在終端輸出中快速查找和過濾內容。此外，它還保存了完整的命令歷史記錄，可以隨時回溯和搜索之前的命令。
• 集成的 Autocomplete（自動完成）：iTerm2 內置了命令和路徑的自動完成功能，能夠節省輸入命令的時間和精力。
• 內置的觸發器（Triggers）：iTerm2 具有觸發器功能，可以根據輸出文本或命令執行特定的操作，例如自動運行腳本、更改顏色等。
• 支持分屏和粘貼歷史：iTerm2 允許你輕松分割窗口，并提供了一個方便的粘貼歷史功能，可以查看和復制過去粘貼的內容。
• 可定制的快捷鍵：iTerm2 具有豐富的可定制快捷鍵選項，可以根據個人喜好和使用習慣進行設置。

iTerm2 的安裝也很簡單，只需要在官網（https://iterm2.com/downloads.html）下載安裝包，并按照步驟安裝即可：

圖片

官網提供了兩個版本，類似于 Node.js，一個是穩定版，一個是最新的測試版，這里建議下載穩定版（Stable Release），避免使用過程中出現一些不可預測的問題。

這里分享一篇 iTerm2 的保姆級配置教程，可以參考這篇教程并根據自己的需求進行配置：https://zhuanlan.zhihu.com/p/550022490

版本控制工具

Git

目前最常用的代碼版本控制工具就是 Git 了。下面就來通過 Homebrew 安裝 Git，在終端中輸入以下命令即可：

brew install git

安裝完成之后，需要設置郵箱和用戶：

git config --global user.name <名字>
git config --global user.email <郵箱>

除了上述下載 Git 的方法，Git 官網（https://git-scm.com/download/mac）還提供了多種安裝  Git 的方法：

圖片

SoucreTree

有了 Git 就可以通過 Git 內置的命令來進行代碼操作了，除此之外，我們還可以通過 VS Code 和 SoucreTree 進行可視化 Git 操作。下面就來看看 SoucreTree 是如何安裝使用的。

圖片

SourceTree 是一款免費的可視化 Git 和 Mercurial 版本控制工具，提供了直觀的界面和強大的功能來幫助開發者更輕松地管理代碼倉庫，其特點如下：

• 直觀易用：提供了一個直觀的圖形界面，使得初學者和有經驗的開發者都能輕松上手，并能快速進行版本控制操作。
• 支持多種版本控制系統：支持 Git 和 Mercurial 兩種常用的版本控制系統，可以方便地管理不同類型的代碼倉庫。
• 可視化操作：提供了可視化的文件狀態、分支圖和提交歷史等功能，使得開發者能夠清晰地查看和理解代碼倉庫的狀態和變更歷史。
• 強大的分支管理：提供了簡單且強大的分支管理功能，可以輕松創建、切換和合并分支，以及解決分支沖突。

使用方法如下：

1. 下載和安裝：可以從 SourceTree 官網（https://www.sourcetreeapp.com/）下載適用于操作系統的安裝包，然后按照安裝向導進行安裝。
2. 添加代碼倉庫：打開 SourceTree 后，點擊 "New" 按鈕，然后選擇 "Clone" 或 "Create"，根據需要添加已有的代碼倉庫或創建新的代碼倉庫。
3. 查看和提交代碼：在 "Repositories" 面板中，可以查看代碼倉庫的文件狀態、分支信息和提交歷史。在 "Log" 面板中，可以查看詳細的提交記錄，選擇提交進行比較或還原。
4. 創建和切換分支：在 "Branches" 面板中，可以創建新分支、切換分支和合并分支。還可以使用可視化的分支圖來查看和管理分支關系。
5. 解決沖突：如果出現分支沖突，SourceTree 會提供界面來幫助解決沖突，例如手動合并代碼或選擇合適的版本。
6. 使用其他工具：在 SourceTree 中，可以配置并使用喜歡的比較和合并工具，例如 Beyond Compare 或 Kaleidoscope。這些工具可以幫助更方便地進行代碼比較和合并操作。

圖片

Charles

Charles 也是筆者日常使用比較多的一個軟件，用于代碼調試。筆者最常用的就是拿到線上數據，在本地開發環境進行代理調試。

Charles 是一款常用的網絡抓包工具，它允許開發者查看分析網絡流量，幫助診斷和調試網絡應用程序，其特點如下：

• 抓取和查看網絡流量：Charles 可以捕獲電腦和移動設備上的網絡流量，包括 HTTP、HTTPS、WebSocket 等協議的請求和響應，并以直觀的方式展示給用戶。
• SSL/TLS 解密：Charles 可以解密經過 SSL/TLS 加密的網絡流量，使得開發者可以查看加密通信的內容，方便調試和分析。
• 重放請求：Charles 具備重放請求的功能，開發者可以將先前捕獲到的請求重新發送給服務器，用于測試和調試。
• 模擬慢速網絡：Charles 可以模擬不同類型的網絡環境，如低速連接、丟包、延遲等，幫助開發者測試應用程序在不同網絡條件下的性能。
• 可定制性：Charles 提供了豐富的配置選項和插件機制，可以根據個人需求對其功能進行擴展和定制。
• 跨平臺支持：Charles 可以在 Windows、macOS 和 Linux 上運行，適用于不同操作系統上的開發和調試需求。

首先在官網（https://www.charlesproxy.com/latest-release/download.do）下載最新版 Charles，這里根據自己當前的操作系統選擇就好了：

圖片

下載完成之后，按照提示一步步安裝即可。需要注意的是，這個軟件并不是完全免費的，如果未訂閱，那每次只能使用 30 分鐘就會自動重啟。

圖片

可以參考這兩個使用教程：

• https://juejin.cn/post/6844903665304600589
• https://juejin.cn/post/6844903640272994317

其他工具

最后再來分享幾個筆者日常使用比較多的軟件。

Draw.io

draw.io 是一款免費的在線圖表編輯工具，可以繪制流程圖、UML、類圖、組織結構圖、泳道圖、E-R圖、思維導圖等，堪稱畫圖神器！

圖片

draw.io 提供了豐富的模版，支持商務、圖表、cloud、工程、流程圖、布局、地圖、網絡、軟件、表格、UML、Venn等。還可以自定義模板。

圖片

除此之外，draw.io 還有很多特點：

• 支持語言設置為中文；
• 支持使用圖層；
• 支持設置手繪風格、自帶多種圖標，支持自定義圖標；
• 支持將圖片導出為PNG、JEPG、SVG、PDF、HTML、XML等，支持導出高級設置，如調整DPI、寬高、縮放、背景等。

draw.io 使用和下載：

• 在線地址： https://app.diagrams.net/
• 下載地址： https://github.com/jgraph/drawio/releases

Xmind

XMind 是一個跨平臺的思維導圖軟件，具有多種結構樣式，除了普通的思維導圖，還包括樹形圖、邏輯圖、魚骨圖、時間軸、樹狀表格等等，不同的結構樣式可以自由組合混用，同時支持一鍵更換結構樣式。其提供了很多類型的思維導圖，并支持設置多種主題風格：

圖片

除此之外，Xmind 還有很多特點：

• 可以靈活的定制節點外觀、插入圖標外，還有多種樣式、主題色彩、貼圖可以選擇，主題顏色和樣式同樣支持自由組合；
• 除了 XMind 自身的格式，還支持導入 FreeMind、MindManager 等軟件的文件格式，支持導出PNG、SVG、PDF、Markdown、Word、Excel 等；
• 支持進行動態演示。

下載地址：https://xmind.app/download/

超級右鍵

超級右鍵是一個用于 Mac 的右鍵增強工具，Mac 不像 Windows 那樣可以右鍵直接創建文件之類的，這個軟件就可以幫助我們在某些場景下提高工作效率。在 Appstore 中搜索超級右鍵，下載即可（專業版是收費的，其他是免費的，可以根據需要選擇）：

圖片

可以在偏好設置中來根據需要進行設置：

圖片

這里我進行了簡單的設置，就可以直接右鍵新建文件了，并且可以直接右鍵點擊一個文件，使用 VS Code 打開，或者在某個目錄中直接打開終端等：

圖片